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.
.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.
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 .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.
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.
.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
.
margin
from the rows and padding
from columns with the class .no-gutters
on the .row
parent.
One of Two columns
More content
Two of Two columns
More content
<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.
<div class="row">
<div class="col-12 col-md-3">
<h2>Breakpoint Modifiers</h2>
</div>
</div>
For more information on the Bootstrap grid system, see this Bootstrap Grid Article.
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
---|---|---|---|---|---|
Max container width | None (auto) | 540px | 720px | 960px | 1140px |
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# of columns | 12 | ||||
Gutter width | 30px (15px on each side of a column) | ||||
Nestable | Yes | ||||
Column ordering | Yes |
Margin and padding classes can be similarly modified, as outlined in the Bootstrap Spacing Utilities section of the Atlanta Tech Styleguide.