JTB CONTAINER

If everything becomes clear, you have to think about how you can offset or give padding to your elements... Don't be worry. Since we are aware of this situation, we have created two different ways for you.

Offsetting

Offsetting is one of the easiest jobs in .jtbFlex system. Once you created the main container. Just add an empty child element that offsets desired size to other elements. So simple right?

10% offsetted
			Copy
			<div class='jtbFlex'>
	<div class='_10'></div>
	<div class='_90'>10% offsetted</div>
</div>
		

Padding

Offsetting was quite easy, but how about padding? Yes we know it is possible to add one child element and make the child flex and add another element can create a padding for it blah blah... but that is not the case. Since the other method is a little bir complicated; we have created 'the savior' .jtbContainer_X. This beautiy gives your element desired padding and saves you from lots of work. Let us explain how it works:

Create an element, add jtContainer to it and voila. It's done!

20% padding <->
			Copy
			<div class='jtbFlex'>
	<div class='jtbContainer_20'>20% padding <-></div>
</div>
		

Also it is possible to give the padding in vertical orientation and in pixels too. Just change the class with: .jtbContainerVertical_X or .jtbContainer_Xpx...

Here are all possible options for you:

Padding (Both sides) All screens Extra small screens only Small screens only Medium screens only Large screens only
0% Horizontal jtbContainer_0 jtbContainer_0_xs jtbContainer_0_sm jtbContainer_0_md jtbContainer_0_lg
5% Horizontal jtbContainer_5 jtbContainer_5_xs jtbContainer_5_sm jtbContainer_5_md jtbContainer_5_lg
10% Horizontal jtbContainer_10 jtbContainer_10_xs jtbContainer_10_sm jtbContainer_10_md jtbContainer_10_lg
15% Horizontal jtbContainer_15 jtbContainer_15_xs jtbContainer_15_sm jtbContainer_15_md jtbContainer_15_lg
20% Horizontal jtbContainer_20 jtbContainer_20_xs jtbContainer_20_sm jtbContainer_20_md jtbContainer_20_lg
25% Horizontal jtbContainer_25 jtbContainer_25_xs jtbContainer_25_sm jtbContainer_25_md jtbContainer_25_lg
30% Horizontal jtbContainer_30 jtbContainer_30_xs jtbContainer_30_sm jtbContainer_30_md jtbContainer_30_lg
35% Horizontal jtbContainer_35 jtbContainer_35_xs jtbContainer_35_sm jtbContainer_35_md jtbContainer_35_lg
40% Horizontal jtbContainer_40 jtbContainer_40_xs jtbContainer_40_sm jtbContainer_40_md jtbContainer_40_lg
45% Horizontal jtbContainer_45 jtbContainer_45_xs jtbContainer_45_sm jtbContainer_45_md jtbContainer_45_lg
50% Horizontal jtbContainer_50 jtbContainer_50_xs jtbContainer_50_sm jtbContainer_50_md jtbContainer_50_lg
55% Horizontal jtbContainer_55 jtbContainer_55_xs jtbContainer_55_sm jtbContainer_55_md jtbContainer_55_lg
60% Horizontal jtbContainer_60 jtbContainer_60_xs jtbContainer_60_sm jtbContainer_60_md jtbContainer_60_lg
65% Horizontal jtbContainer_65 jtbContainer_65_xs jtbContainer_65_sm jtbContainer_65_md jtbContainer_65_lg
70% Horizontal jtbContainer_70 jtbContainer_70_xs jtbContainer_70_sm jtbContainer_70_md jtbContainer_70_lg
75% Horizontal jtbContainer_75 jtbContainer_75_xs jtbContainer_75_sm jtbContainer_75_md jtbContainer_75_lg
80% Horizontal jtbContainer_80 jtbContainer_80_xs jtbContainer_80_sm jtbContainer_80_md jtbContainer_80_lg
85% Horizontal jtbContainer_85 jtbContainer_85_xs jtbContainer_85_sm jtbContainer_85_md jtbContainer_85_lg
90% Horizontal jtbContainer_90 jtbContainer_90_xs jtbContainer_90_sm jtbContainer_90_md jtbContainer_90_lg
95% Horizontal jtbContainer_95 jtbContainer_95_xs jtbContainer_95_sm jtbContainer_95_md jtbContainer_95_lg
0px Horizontal jtbContainer_0px jtbContainer_0px_xs jtbContainer_0px_sm jtbContainer_0px_md jtbContainer_0px_lg
5px Horizontal jtbContainer_5px jtbContainer_5px_xs jtbContainer_5px_sm jtbContainer_5px_md jtbContainer_5px_lg
10px Horizontal jtbContainer_10px jtbContainer_10px_xs jtbContainer_10px_sm jtbContainer_10px_md jtbContainer_10px_lg
15px Horizontal jtbContainer_15px jtbContainer_15px_xs jtbContainer_15px_sm jtbContainer_15px_md jtbContainer_15px_lg
20px Horizontal jtbContainer_20px jtbContainer_20px_xs jtbContainer_20px_sm jtbContainer_20px_md jtbContainer_20px_lg
25px Horizontal jtbContainer_25px jtbContainer_25px_xs jtbContainer_25px_sm jtbContainer_25px_md jtbContainer_25px_lg
30px Horizontal jtbContainer_30px jtbContainer_30px_xs jtbContainer_30px_sm jtbContainer_30px_md jtbContainer_30px_lg
35px Horizontal jtbContainer_35px jtbContainer_35px_xs jtbContainer_35px_sm jtbContainer_35px_md jtbContainer_35px_lg
40px Horizontal jtbContainer_40px jtbContainer_40px_xs jtbContainer_40px_sm jtbContainer_40px_md jtbContainer_40px_lg
45px Horizontal jtbContainer_45px jtbContainer_45px_xs jtbContainer_45px_sm jtbContainer_45px_md jtbContainer_45px_lg
50px Horizontal jtbContainer_50px jtbContainer_50px_xs jtbContainer_50px_sm jtbContainer_50px_md jtbContainer_50px_lg
55px Horizontal jtbContainer_55px jtbContainer_55px_xs jtbContainer_55px_sm jtbContainer_55px_md jtbContainer_55px_lg
60px Horizontal jtbContainer_60px jtbContainer_60px_xs jtbContainer_60px_sm jtbContainer_60px_md jtbContainer_60px_lg
65px Horizontal jtbContainer_65px jtbContainer_65px_xs jtbContainer_65px_sm jtbContainer_65px_md jtbContainer_65px_lg
70px Horizontal jtbContainer_70px jtbContainer_70px_xs jtbContainer_70px_sm jtbContainer_70px_md jtbContainer_70px_lg
75px Horizontal jtbContainer_75px jtbContainer_75px_xs jtbContainer_75px_sm jtbContainer_75px_md jtbContainer_75px_lg
80px Horizontal jtbContainer_80px jtbContainer_80px_xs jtbContainer_80px_sm jtbContainer_80px_md jtbContainer_80px_lg
85px Horizontal jtbContainer_85px jtbContainer_85px_xs jtbContainer_85px_sm jtbContainer_85px_md jtbContainer_85px_lg
90px Horizontal jtbContainer_90px jtbContainer_90px_xs jtbContainer_90px_sm jtbContainer_90px_md jtbContainer_90px_lg
95px Horizontal jtbContainer_95px jtbContainer_95px_xs jtbContainer_95px_sm jtbContainer_95px_md jtbContainer_95px_lg
0% Vertical jtbContainerVertical_0 jtbContainerVertical_0_xs jtbContainerVertical_0_sm jtbContainerVertical_0_md jtbContainerVertical_0_lg
5% Vertical jtbContainerVertical_5 jtbContainerVertical_5_xs jtbContainerVertical_5_sm jtbContainerVertical_5_md jtbContainerVertical_5_lg
10% Vertical jtbContainerVertical_10 jtbContainerVertical_10_xs jtbContainerVertical_10_sm jtbContainerVertical_10_md jtbContainerVertical_10_lg
15% Vertical jtbContainerVertical_15 jtbContainerVertical_15_xs jtbContainerVertical_15_sm jtbContainerVertical_15_md jtbContainerVertical_15_lg
20% Vertical jtbContainerVertical_20 jtbContainerVertical_20_xs jtbContainerVertical_20_sm jtbContainerVertical_20_md jtbContainerVertical_20_lg
25% Vertical jtbContainerVertical_25 jtbContainerVertical_25_xs jtbContainerVertical_25_sm jtbContainerVertical_25_md jtbContainerVertical_25_lg
30% Vertical jtbContainerVertical_30 jtbContainerVertical_30_xs jtbContainerVertical_30_sm jtbContainerVertical_30_md jtbContainerVertical_30_lg
35% Vertical jtbContainerVertical_35 jtbContainerVertical_35_xs jtbContainerVertical_35_sm jtbContainerVertical_35_md jtbContainerVertical_35_lg
40% Vertical jtbContainerVertical_40 jtbContainerVertical_40_xs jtbContainerVertical_40_sm jtbContainerVertical_40_md jtbContainerVertical_40_lg
45% Vertical jtbContainerVertical_45 jtbContainerVertical_45_xs jtbContainerVertical_45_sm jtbContainerVertical_45_md jtbContainerVertical_45_lg
50% Vertical jtbContainerVertical_50 jtbContainerVertical_50_xs jtbContainerVertical_50_sm jtbContainerVertical_50_md jtbContainerVertical_50_lg
55% Vertical jtbContainerVertical_55 jtbContainerVertical_55_xs jtbContainerVertical_55_sm jtbContainerVertical_55_md jtbContainerVertical_55_lg
60% Vertical jtbContainerVertical_60 jtbContainerVertical_60_xs jtbContainerVertical_60_sm jtbContainerVertical_60_md jtbContainerVertical_60_lg
65% Vertical jtbContainerVertical_65 jtbContainerVertical_65_xs jtbContainerVertical_65_sm jtbContainerVertical_65_md jtbContainerVertical_65_lg
70% Vertical jtbContainerVertical_70 jtbContainerVertical_70_xs jtbContainerVertical_70_sm jtbContainerVertical_70_md jtbContainerVertical_70_lg
75% Vertical jtbContainerVertical_75 jtbContainerVertical_75_xs jtbContainerVertical_75_sm jtbContainerVertical_75_md jtbContainerVertical_75_lg
80% Vertical jtbContainerVertical_80 jtbContainerVertical_80_xs jtbContainerVertical_80_sm jtbContainerVertical_80_md jtbContainerVertical_80_lg
85% Vertical jtbContainerVertical_85 jtbContainerVertical_85_xs jtbContainerVertical_85_sm jtbContainerVertical_85_md jtbContainerVertical_85_lg
90% Vertical jtbContainerVertical_90 jtbContainerVertical_90_xs jtbContainerVertical_90_sm jtbContainerVertical_90_md jtbContainerVertical_90_lg
95% Vertical jtbContainerVertical_95 jtbContainerVertical_95_xs jtbContainerVertical_95_sm jtbContainerVertical_95_md jtbContainerVertical_95_lg
0px Vertical jtbContainerVertical_0px jtbContainerVertical_0px_xs jtbContainerVertical_0px_sm jtbContainerVertical_0px_md jtbContainerVertical_0px_lg
5px Vertical jtbContainerVertical_5px jtbContainerVertical_5px_xs jtbContainerVertical_5px_sm jtbContainerVertical_5px_md jtbContainerVertical_5px_lg
10px Vertical jtbContainerVertical_10px jtbContainerVertical_10px_xs jtbContainerVertical_10px_sm jtbContainerVertical_10px_md jtbContainerVertical_10px_lg
15px Vertical jtbContainerVertical_15px jtbContainerVertical_15px_xs jtbContainerVertical_15px_sm jtbContainerVertical_15px_md jtbContainerVertical_15px_lg
20px Vertical jtbContainerVertical_20px jtbContainerVertical_20px_xs jtbContainerVertical_20px_sm jtbContainerVertical_20px_md jtbContainerVertical_20px_lg
25px Vertical jtbContainerVertical_25px jtbContainerVertical_25px_xs jtbContainerVertical_25px_sm jtbContainerVertical_25px_md jtbContainerVertical_25px_lg
30px Vertical jtbContainerVertical_30px jtbContainerVertical_30px_xs jtbContainerVertical_30px_sm jtbContainerVertical_30px_md jtbContainerVertical_30px_lg
35px Vertical jtbContainerVertical_35px jtbContainerVertical_35px_xs jtbContainerVertical_35px_sm jtbContainerVertical_35px_md jtbContainerVertical_35px_lg
40px Vertical jtbContainerVertical_40px jtbContainerVertical_40px_xs jtbContainerVertical_40px_sm jtbContainerVertical_40px_md jtbContainerVertical_40px_lg
45px Vertical jtbContainerVertical_45px jtbContainerVertical_45px_xs jtbContainerVertical_45px_sm jtbContainerVertical_45px_md jtbContainerVertical_45px_lg
50px Vertical jtbContainerVertical_50px jtbContainerVertical_50px_xs jtbContainerVertical_50px_sm jtbContainerVertical_50px_md jtbContainerVertical_50px_lg
55px Vertical jtbContainerVertical_55px jtbContainerVertical_55px_xs jtbContainerVertical_55px_sm jtbContainerVertical_55px_md jtbContainerVertical_55px_lg
60px Vertical jtbContainerVertical_60px jtbContainerVertical_60px_xs jtbContainerVertical_60px_sm jtbContainerVertical_60px_md jtbContainerVertical_60px_lg
65px Vertical jtbContainerVertical_65px jtbContainerVertical_65px_xs jtbContainerVertical_65px_sm jtbContainerVertical_65px_md jtbContainerVertical_65px_lg
70px Vertical jtbContainerVertical_70px jtbContainerVertical_70px_xs jtbContainerVertical_70px_sm jtbContainerVertical_70px_md jtbContainerVertical_70px_lg
75px Vertical jtbContainerVertical_75px jtbContainerVertical_75px_xs jtbContainerVertical_75px_sm jtbContainerVertical_75px_md jtbContainerVertical_75px_lg
80px Vertical jtbContainerVertical_80px jtbContainerVertical_80px_xs jtbContainerVertical_80px_sm jtbContainerVertical_80px_md jtbContainerVertical_80px_lg
85px Vertical jtbContainerVertical_85px jtbContainerVertical_85px_xs jtbContainerVertical_85px_sm jtbContainerVertical_85px_md jtbContainerVertical_85px_lg
90px Vertical jtbContainerVertical_90px jtbContainerVertical_90px_xs jtbContainerVertical_90px_sm jtbContainerVertical_90px_md jtbContainerVertical_90px_lg
95px Vertical jtbContainerVertical_95px jtbContainerVertical_95px_xs jtbContainerVertical_95px_sm jtbContainerVertical_95px_md jtbContainerVertical_95px_lg