[salt_banner banner_style=”image-bg” link=”url:%23|title:Buy%20Now||” subtitle=”Multi-purpose Responsive WordPress Template” title=”Column Grids” image=”144″]
[salt_title_block title_tag=”h3″ title=”PARAGRAPHS”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.[/salt_title_block]
[salt_title_block title_tag=”h4″ text_align=”left” title=”FULL WIDTH”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/salt_title_block]
[salt_title_block title_tag=”h4″ text_align=”left” title=”HALF WIDTH ON LARGE & MEDIUM SCREENS”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/salt_title_block]
[salt_title_block title_tag=”h4″ text_align=”left” title=”HALF WIDTH ON LARGE & MEDIUM SCREENS”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/salt_title_block]
[salt_title_block title_tag=”h4″ text_align=”left” title=”1/4TH ON LARGE & MEDIUM”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/salt_title_block]
[salt_title_block title_tag=”h4″ text_align=”left” title=”1/4TH ON LARGE & MEDIUM”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/salt_title_block]
[salt_title_block title_tag=”h4″ text_align=”left” title=”1/4TH ON LARGE & MEDIUM”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/salt_title_block]
[salt_title_block title_tag=”h4″ text_align=”left” title=”1/4TH ON LARGE & MEDIUM”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/salt_title_block]
[salt_title_block title_tag=”h4″ title=”BOOTSTRAP GRID”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.[/salt_title_block]
[salt_title_block title_tag=”h3″ text_align=”left” title=”THREE EQUAL COLUMNS”]Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.[/salt_title_block]
[salt_title_block text_align=”left”].col-md-4[/salt_title_block]
[salt_title_block text_align=”left”].col-md-4[/salt_title_block]
[salt_title_block text_align=”left”].col-md-4[/salt_title_block]
[salt_title_block title_tag=”h3″ text_align=”left” title=”THREE UNEQUAL COLUMNS”]Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.[/salt_title_block]
[salt_title_block text_align=”left”].col-md-3[/salt_title_block]
[salt_title_block text_align=”left”].col-md-6[/salt_title_block]
[salt_title_block text_align=”left”].col-md-3[/salt_title_block]
[salt_title_block title_tag=”h3″ text_align=”left” title=”TWO COLUMNS”]Get two columns starting at desktops and scaling to large desktops.[/salt_title_block]
[salt_title_block text_align=”left”].col-md-8[/salt_title_block]
[salt_title_block text_align=”left”].col-md-4[/salt_title_block]
[salt_title_block title_tag=”h3″ text_align=”left” title=”FULL WIDTH, SINGLE COLUMN”]No grid classes are necessary for full-width elements.[/salt_title_block]
[salt_title_block title_tag=”h3″ text_align=”left” title=”TWO COLUMNS WITH TWO NESTED COLUMNS”]Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.[/salt_title_block]

[salt_title_block text_align=”left”].col-md-8[/salt_title_block]
[salt_title_block text_align=”left”].col-md-6[/salt_title_block]
[salt_title_block text_align=”left”].col-md-6[/salt_title_block]
[salt_title_block text_align=”left”].col-md-4[/salt_title_block]
[salt_title_block title_tag=”h3″ text_align=”left” title=”MIXED: MOBILE AND DESKTOP”]The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.[/salt_title_block]

[salt_title_block text_align=”left”].col-xs-12 .col-md-8[/salt_title_block]
[salt_title_block text_align=”left”].col-xs-6 .col-md-4[/salt_title_block]
[salt_title_block text_align=”left”].col-xs-6 .col-md-4[/salt_title_block]
[salt_title_block text_align=”left”].col-xs-6 .col-md-4[/salt_title_block]
[salt_title_block text_align=”left”].col-xs-6 .col-md-4[/salt_title_block]
[salt_title_block text_align=”left”].col-xs-6[/salt_title_block]
[salt_title_block text_align=”left”].col-xs-6[/salt_title_block]
[salt_title_block title_tag=”h3″ text_align=”left” title=”MIXED: MOBILE, TABLET, AND DESKTOP”][/salt_title_block]
[salt_title_block text_align=”left”].col-xs-12 .col-md-8[/salt_title_block]
[salt_title_block text_align=”left”].col-xs-6 .col-md-4[/salt_title_block]
[salt_title_block text_align=”left”].col-xs-6 .col-md-4[/salt_title_block]
[salt_title_block text_align=”left”].col-xs-6 .col-md-4[/salt_title_block]
[salt_title_block text_align=”left”].col-xs-6 .col-md-4[/salt_title_block]
[salt_title_block title_tag=”h3″ text_align=”left” title=”COLUMN CLEARING”]Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.[/salt_title_block]
[salt_title_block text_align=”left”].col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.[/salt_title_block]
[salt_title_block text_align=”left”].col-xs-6 .col-sm-3[/salt_title_block]
[salt_title_block text_align=”left”].col-xs-6 .col-sm-3[/salt_title_block]
[salt_title_block text_align=”left”].col-xs-6 .col-sm-3[/salt_title_block]
[salt_title_block title_tag=”h3″ text_align=”left” title=”OFFSET, PUSH, AND PULL RESETS”]Reset offsets, pushes, and pulls at specific breakpoints.[/salt_title_block]
[salt_title_block text_align=”left”].col-sm-5 .col-md-6[/salt_title_block]
[salt_title_block text_align=”left”].col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0[/salt_title_block]
[salt_title_block text_align=”left”].col-sm-6 .col-md-5 .col-lg-6[/salt_title_block]
[salt_title_block text_align=”left”].col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0[/salt_title_block]