Among such utilities as Colors, Display, Spacing, and Typography, Bootstrap provides accessibility frameworks to help your site with standards and best practice requirements. For more information on how Bootstrap's Accessibility is utilized, see Bootstrap's Accessibility Features.
Bootstrap's mobile-first flexbox grid is used to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, and dozens of predefined classes. The SLUG Theme makes extensive use of the
col class framework to construct responsive and customizable layouts.
The grid system uses a series of containers, rows, and columns to lay out and align content. It's built with flexbox and is fully responsive (for more information on how flexbox works, see A Complete Guide to Flexbox, and Basic Concepts of Flexbox). All columns in a single row will add up to 12 or less. The containers are built into the SLUG theme code and can be left out of the WYSIWYG editor. The default container is not fluid but can be adjusted in the WYSIWYG editor options by toggling on the container-fluid option. Below is an example and in-depth look at how the grid comes together.
<div class="container-fluid"> <div class="row"> <div class="col-sm"> One of three columns </div> <div class="col-sm"> Two of three columns </div> <div class="col-sm"> Three of three columns </div> </div> </div>
The above example creates three equal-width columns on small, medium, large, and extra large devices using Bootstrap's predefined grid classes.
Here's how the system works:
padding(known as a gutter) for controlling the space between them. Note: In a grid layout, content must be placed within columns, and only columns may be immediate children of rows. Think of the
.rowclass as being like a bookshelf, where
.col-classes are books. Without the shelf, the books would be scattered and unorganized, much like the layout and code if the parent
.rowclass isn't first used.
widthwill automatically lay out as equal-width columns. For example, four instances of
.col-smwill each automatically be 25% wide from mobile device sizes and up.
.col-4. Similarly, you could mix and match column classes to equal out 12 columns or fewer, i.e.
marginfrom the rows and
paddingfrom columns with the class
One of Two columns
Two of Two columns
<div class="container-fluid"> <div class="row"> <div class="col-md-6 text-align-center"> One of Two columns </div> <div class="col-md-6 d-flex justify-content-center align-items-center flex-column"> Two of Two columns </div> </div> </div>
*could change if flex display is set to row instead of column
*Breakpoints: Bootstrap uses breakpoints based on minimum viewport widths that allow elements to scale up as the viewport changes and are called with class modifiers. These breakpoint modifiers are appended to positioning and grid classes (such as margin and padding and col classes) and are defined as xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). Leaving off a breakpoint modifier is a good way to take advantage of Bootstrap's CSS library mobile-first principles, and can be used in place of the
xs modifier. Several modifiers can be used at once to dictate an elements behavior across devices.
For example, the breakpoint modifiers in the following code will display the
h2 element in a width spanning twelve columns in all mobile devices up until the
md modifier is fired at a minimum device width of 991.98 pixels, where the width will span only three columns. Using class modifiers in this fashion will greatly reduce the need for media queries, providing an eloquent and user-friendly way to control the behavior of content on a website.
For more information on the Bootstrap grid system, see this Bootstrap Grid Article.
<div class="row"> <div class="col-12 col-md-3"> <h2>Breakpoint Modifiers</h2> </div> </div>
|Max container width||None (auto)||540px||720px||960px||1140px|
|# of columns||12|
|Gutter width||30px (15px on each side of a column)|
Margin and padding classes can be similarly modified, as outlined in the Bootstrap Spacing Utilities section of the Atlanta Tech Styleguide.