Grid system | bootstrap ml-auto
Useourpowerfulmobile-firstflexboxgridtobuildlayoutsofallshapesandsizesthankstoatwelvecolumnsystem,fivedefaultresponsivetiers,Sassvariablesandmixins,anddozensofpredefinedclasses.HowitworksBootstrap’sgridsystemusesaseriesofcontainers,rows,andcolumnstolayoutandaligncontent.It’sbuiltwithflexbox[1]andisfullyresponsive.Belowisanexampleandanin-depthlookathowthegridcomestogether.Newtoorunfamiliarwithflexbox?ReadthisCSSTricksflexboxguide[2]forbackground,terminology,guidelines,andcodesnippets.Oneofthr...
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
How it worksBootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox[1] and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide[2] for background, terminology, guidelines, and code snippets.
One of three columns
One of three columns
One of three columns
<div class="container"> <div class="row"> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> <d...