Bootstrap'sgridsystemusesaseriesofcontainers,rows,andcolumnstolayoutandaligncontent.It'sbuiltwith[flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
**Newtoorunfamiliarwithflexbox?**[ReadthisCSSTricksflexboxguide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets.
-Containersprovideameanstocenterandhorizontallypadyoursite'scontents.Use`.container` for a responsive pixel width or `.container-fluid` for `width: 100%`acrossallviewportanddevicesizes.
-Rowsarewrappersforcolumns.Eachcolumnhashorizontal`padding` (called a gutter) for controlling the space between them. This `padding`isthencounteractedontherowswithnegativemargins.Thisway,allthecontentinyourcolumnsisvisuallyaligneddowntheleftside.
-Thankstoflexbox,gridcolumnswithoutaspecified`width` will automatically layout as equal width columns. For example, four instances of `.col-sm`willeachautomaticallybe25%widefromthesmallbreakpointandup.Seethe[auto-layoutcolumns](#auto-layout-columns)sectionformoreexamples.
-Columnshavehorizontal`padding` to create the gutters between individual columns, however, you can remove the `margin` from rows and `padding` from columns with `.no-gutters` on the `.row`.
-Gridbreakpointsarebasedonminimumwidthmediaqueries,meaning**theyapplytothatonebreakpointandallthoseaboveit**(e.g.,`.col-sm-4` applies to small, medium, large, and extra large devices, but not the first `xs`breakpoint).
Beawareofthelimitationsand[bugsaroundflexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).
##Gridoptions
WhileBootstrapuses`em`s or `rem`s for defining most sizes, `px`sareusedforgridbreakpointsandcontainerwidths.Thisisbecausetheviewportwidthisinpixelsanddoesnotchangewiththe[fontsize](https://drafts.csswg.org/mediaqueries-3/#units).
Forexample,herearetwogridlayoutsthatapplytoeverydeviceandviewport,from`xs` to `xl`.Addanynumberofunit-lessclassesforeachbreakpointyouneedandeverycolumnwillbethesamewidth.
<divclass="bd-example-row">
{%captureexample%}
<divclass="container">
<divclass="row">
<divclass="col">
1of2
</div>
<divclass="col">
2of2
</div>
</div>
<divclass="row">
<divclass="col">
1of3
</div>
<divclass="col">
2of3
</div>
<divclass="col">
3of3
</div>
</div>
</div>
{%endcapture%}
{%includeexample.htmlcontent=example%}
</div>
Equal-widthcolumnscanbebrokenintomultiplelines,buttherewasa[Safariflexboxbug](https://github.com/philipwalton/flexbugs#flexbug-11) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if you're up-to-date.
Createequal-widthcolumnsthatspanmultiplerowsbyinsertinga`.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100`withsome[responsivedisplayutilities]({{site.baseurl}}/docs/{{site.docs_version}}/utilities/display/).
Forgridsthatarethesamefromthesmallestofdevicestothelargest,usethe`.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`.
<divclass="bd-example-row">
{%captureexample%}
<divclass="container">
<divclass="row">
<divclass="col">col</div>
<divclass="col">col</div>
<divclass="col">col</div>
<divclass="col">col</div>
</div>
<divclass="row">
<divclass="col-8">col-8</div>
<divclass="col-4">col-4</div>
</div>
</div>
{%endcapture%}
{%includeexample.htmlcontent=example%}
</div>
###Stackedtohorizontal
Usingasinglesetof`.col-sm-*` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`).
Gutterscanberesponsivelyadjustedbybreakpoint-specificpaddingandnegativemarginutilityclasses.Tochangetheguttersinagivenrow,pairanegativemarginutilityonthe`.row` and matching padding utilities on the `.col`s. The `.container` or `.container-fluid`parentmayneedtobeadjustedtootoavoidunwantedoverflow,usingagainmatchingpaddingutility.
Here'sanexampleofcustomizingtheBootstrapgridatthelarge(`lg`) breakpoint and above. We've increased the `.col` padding with `.px-lg-5`, counteracted that with `.mx-lg-n5` on the parent `.row` and then adjusted the `.container` wrapper with `.px-lg-5`.
Theguttersbetweencolumnsinourpredefinedgridclassescanberemovedwith`.no-gutters`. This removes the negative `margin`s from `.row` and the horizontal `padding`fromallimmediatechildrencolumns.
Here'sthesourcecodeforcreatingthesestyles.Notethatcolumnoverridesarescopedtoonlythefirstchildrencolumnsandaretargetedvia[attributeselector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). While this generates a more specific selector, column padding can still be further customized with [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/).
**Needanedge-to-edgedesign?**Droptheparent`.container` or `.container-fluid`.
Breakingcolumnstoanewlineinflexboxrequiresasmallhack:addanelementwith`width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `.row`s,butnoteveryimplementationmethodcanaccountforthis.
Use`.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `12`acrossallfivegridtiers.
<divclass="bd-example-row">
{%captureexample%}
<divclass="container">
<divclass="row">
<divclass="col">
First,butunordered
</div>
<divclass="col order-12">
Second,butlast
</div>
<divclass="col order-1">
Third,butfirst
</div>
</div>
</div>
{%endcapture%}
{%includeexample.htmlcontent=example%}
</div>
Therearealsoresponsive`.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 13` (`order: $columns + 1`), respectively. These classes can also be intermixed with the numbered `.order-*`classesasneeded.
Movecolumnstotherightusing`.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4`overfourcolumns.
Tonestyourcontentwiththedefaultgrid,addanew`.row` and set of `.col-sm-*` columns within an existing `.col-sm-*`column.Nestedrowsshouldincludeasetofcolumnsthataddupto12orfewer(itisnotrequiredthatyouuseall12availablecolumns).
ThenumberofgridcolumnscanbemodifiedviaSassvariables.`$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width`setsthewidthforthecolumngutters.
{%highlightscss%}
$grid-columns:12!default;
$grid-gutter-width:30px!default;
{%endhighlight%}
###Gridtiers
Movingbeyondthecolumnsthemselves,youmayalsocustomizethenumberofgridtiers.Ifyouwantedjustfourgridtiers,you'dupdatethe`$grid-breakpoints` and `$container-max-widths`tosomethinglikethis:
{%highlightscss%}
$grid-breakpoints:(
xs:0,
sm:480px,
md:768px,
lg:1024px
);
$container-max-widths:(
sm:420px,
md:720px,
lg:960px
);
{%endhighlight%}
WhenmakinganychangestotheSassvariablesormaps,you'llneedtosaveyourchangesandrecompile.Doingsowilloutputabrandnewsetofpredefinedgridclassesforcolumnwidths,offsets,andordering.Responsivevisibilityutilitieswillalsobeupdatedtousethecustombreakpoints.Makesuretosetgridvaluesin`px` (not `rem`, `em`, or `%`).