Layout

This theme utilizes Bootstrap v4 grid, which contains components and options for laying out your project, including wrapping containers, a grid system, a flexible media objects, and responsive utility classes.

Containers

Containers are a fundamental building block that contain, pad, and align your content within a given device or viewport.

Fixed width container

The default .container class is a responsive, fixed-width container. It's max width is 1140px.

Container Example

Here is an example of content inside a div with the class container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac tellus scelerisque, tincidunt sapien vitae, commodo purus. Phasellus at efficitur diam, et pretium arcu. Nulla molestie, augue non semper sodales, nisl sem euismod dui, in rhoncus dui ante sit amet nibh. Aenean eget sapien nisi. Vivamus aliquam pharetra purus quis auctor. Aenean sit amet cursus mauris. Vivamus a interdum nisl, sit amet tempus enim.

<div class="container"> 
    <!-- Content here -->
</div>

Grid System

The grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.

Bootstrap uses a 12-column layout because the number 12 has more divisors than any number before it or after it, up until the number 60.

With Bootstrap’s 12-column layout, responsive columns can be divided up by their 12 grid fraction:

Halves (6/12), class .col-6
Thirds (4/12), class .col-4
Quarters (3/12), class .col-3
Sixths (2/12), class .col-2
etc

Halves (6/12)

Thirds (4/12)

Fourths (3/12)

Sixths (2/12)

(5/12)

Sixths (2/12)

The border and background on grid layout examples are for demonstrating the spacing. Columns and rows have no background or border.

<div class="container">
 <div class="row">
  <div class="col-6">Halves (6/12)</div>
  <div class="col-6">Halves (6/12)</div>
 </div>
 <div class="row">
  <div class="col-4">Thirds (4/12)</div>
  <div class="col-4">Thirds (4/12)</div>
  <div class="col-4">Thirds (4/12)</div>
 </div>
    <div class="row">
  <div class="col-3">Fourths (3/12)</div>
  <div class="col-2">Sixths (2/12)</div>
  <div class="col-5">(5/12)</div>
  <div class="col-2">Sixths (2/12)</div>       
 </div> 
</div>

If you want to creates layouts with persistent column widths across all devices and viewports, exclude the breakpoint from the column class. You can also exclude the grid fraction from the column class to create an auto column layout which will have equal width columns in the row div.

Column

The border and background on grid layout examples are for demonstrating the spacing. Columns and rows have no background or border.

 <div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Grid Options

You can specify the "breakpoint" for when a column spans the full width of the screen. This is an important elment in responsive design. You asign a breakpoint to the column by adding sm, md, lg, xl to the column class.

See how aspects of the Bootstrap grid system work across multiple devices with this handy table.

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

Responsive Columns

An example of 50% width column layout that will expand to 100% at the md breakbpoint.

50% width on screen size above 720px | 100% width below 720px

<div class="container">
 <div class="row">
  <div class="col-md-6">1 of 2</div>
  <div class="col-md-6">2 of 2</div>
 </div>
</div>

Review Bootstrap's Grid documentation for more examples and functionality details.

Prev Next