Bootstrap is the most popular CSS framework for developing responsive, mobile-first websites. Bootstrap 4 is the newest version, and includes seamless JavaScript integration to build interactive elements, such as accordions and tabbed navigation. It also uses Flexbox to reduce the need for complicated media queries and build grid-based layouts with ease.

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.

Grid layout and using .row and .col-* classes

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 row and col class framework to construct responsive and customizable layouts.

How it works

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:

• Rows are wrappers for columns, each column having horizontal 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 .row class 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 .row class isn't first used.
• Thanks to flexbox, grid columns without a specified width will automatically lay out as equal-width columns. For example, four instances of .col-sm will each automatically be 25% wide from mobile device sizes and up.
• Column classes indicate the number of columns to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4. Similarly, you could mix and match column classes to equal out 12 columns or fewer, i.e. .col-8 and .col-4, or .col-5 and .col-6.
• Column widths are set in percentages, so they're always fluid and sized relative to their parent element.
• Columns have horizontal padding to create the gutters between individual columns, but you can remove the margin from the rows and padding from columns with the class .no-gutters on the .row parent.
• To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.*

Common Example (with flexbox classes)

              
                <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>
              
            

*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.

            
              <div class="row">
                <div class="col-12 col-md-3">
                  <h2>Breakpoint Modifiers</h2>
                </div>
              </div>
            
          

Grid Options

Margin and padding classes can be similarly modified, as outlined in the Bootstrap Spacing Utilities section of the Atlanta Tech Styleguide.