<StyleSheet StyleSheet="Framework.bootstrap.bootstrap.css" /> <StyleSheet ShowModes="rdBrowser" StyleSheet="Framework.bootstrap.Overrides.css" /> <StyleSheet ShowModes="rdBrowser" StyleSheet="Fonts.combined.css" /> <StyleSheet ShowModes="rdBrowser" StyleSheet="Framework.css.Layout.css" /> <IncludeScriptFile ID="jquery" IncludedScriptFile="Framework.bootstrap.jquery.min.js" /> <IncludeScriptFile ID="bootstrap" IncludedScriptFile="Framework.bootstrap.bootstrap.js"> <Note Note="Includes Bootstrap.min.js, Popper.js or tether.js" /> </IncludeScriptFile>
Grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox 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 for background, terminology, guidelines, and code snippets.
Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.
.col-md-push-*
.col-md-pull-*
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
Use flexbox alignment utilities to vertically align columns.