Bootstrap 4 Grid System

Bootstrap 4 Grid System

Bootstrap’s grid system is built with flexbox and allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1
 span 4 span 4 span 4
span 4span 8
span 6span 6
span 12

The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).


Grid Classes

The Bootstrap 4 grid system has five classes:

  1. .col- (extra small devices – screen width less than 576px)
  2. .col-sm- (small devices – screen width equal to or greater than 576px)
  3. .col-md- (medium devices – screen width equal to or greater than 768px)
  4. .col-lg- (large devices – screen width equal to or greater than 992px)
  5. .col-xl- (xlarge devices – screen width equal to or greater than 1200px)

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for sm and md, you only need to specify sm.

Basic Structure of a Bootstrap 4 Grid

The following is a basic structure of a Bootstrap 4 grid:

<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

First example: create a row (<div class="row">). Then, add the desired number of columns (tags with appropriate .col-*-* classes).

The first star (*) represents the responsiveness: sm, md, lg or xl, while the second star represents a number, which should add up to 12 for each row.

Second example: instead of adding a number to each col, let bootstrap handle the layout, to create equal-width columns: two "col" elements = 50% width to each col.

three cols = 33.33% width to each col. four cols = 25% width, etc. You can also use .col-sm|md|lg|xl to make the columns responsive.

Below we have collected some examples of basic Bootstrap 4 grid layouts.

Three Equal Columns

.col
.col
.col

The following example shows how to create three equal-width columns, on all devices and screen widths:

Example

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Responsive Columns

.col-sm-3
.col-sm-3
.col-sm-3

The following example shows how to create four equal-width columns starting at tablets and scaling to extra large desktops. On mobile phones or screens that are less than 576px wide, the columns will automatically stack on top of each other:

Example

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

Two Unequal Responsive Columns

.col-sm-4
.col-sm-8

The following example shows how to get two various-width columns starting at tablets and scaling to large extra desktops:

Example

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Bootstrap 4 Default Settings

Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.

The default font-family is “Helvetica Neue”, Helvetica, Arial, sans-serif.

In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).

<h1> – <h6>

Bootstrap 4 styles HTML headings (<h1> to <h6>)  with a bolder font-weight and an increased font-size:

Example

h1 Bootstrap heading (2.5rem = 40px)
h2 Bootstrap heading (2rem = 32px)
h3 Bootstrap heading (1.75rem = 28px)
h4 Bootstrap heading (1.5rem = 24px)
h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)

Display Headings

Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are four classes to choose from: .display-1.display-2.display-3.display-4

Example

Display 1
Display 2
Display 3
Display 4

<small>

In Bootstrap 4 the HTML <small> element is used to create a lighter, secondary text in any heading:

Example

h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text

<mark>

Bootstrap 4 will style the HTML <mark> element with a yellow background color and some padding:

Example

Use the mark element to highlight text.

<abbr>

Bootstrap 4 will style the HTML <abbr> element with a dotted border bottom:

Example

The WHO was founded in 1948.

<blockquote>

Add the .blockquote class to a <blockquote> when quoting blocks of content from another source:

Example

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

<dl>

Bootstrap 4 will style the HTML <dl> element in the following way:

Example

Coffee
      - black hot drink
Milk
     - white cold drink

<code>

Bootstrap 4 will style the HTML <code> element in the following way:

ClassDescriptionExample
.font-weight-boldBold textTry it
.font-weight-bolderBolder textTry it
.font-italicItalic textTry it
.font-weight-lightLight weight textTry it
.font-weight-lighterLighter weight textTry it
.font-weight-normalNormal textTry it
.leadMakes a paragraph stand outTry it
.smallIndicates smaller text (set to 85% of the size of the parent)Try it
.text-leftIndicates left-aligned textTry it
.text-*-leftIndicates left-aligned text on small, medium, large or xlarge screensTry it
.text-centerIndicates center-aligned textTry it
.text-*-centerIndicates center-aligned text on small, medium, large or xlarge screensTry it
.text-decoration-noneRemoves the underline from a linkTry it
.text-rightIndicates right-aligned textTry it
.text-*-rightIndicates right-aligned text on small, medium, large or xlarge screensTry it
.text-justifyIndicates justified textTry it
.text-monospaceMonospaced textTry it
.text-nowrapIndicates no wrap textTry it
.text-lowercaseIndicates lowercased textTry it
.text-resetResets the color of a text or a link (inherits the color from its parent)Try it
.text-uppercaseIndicates uppercased textTry it
.text-capitalizeIndicates capitalized textTry it
.initialismDisplays the text inside an <abbr> element in a slightly smaller font sizeTry it
.list-unstyledRemoves the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)Try it
.list-inlinePlaces all list items on a single line (used together with .list-inline-item on each <li> elements)Try it
.pre-scrollableMakes a <pre> element scrollable

Example

The following HTML elements: span, section, and div defines a section in a document.

<kbd>

Bootstrap 4 will style the HTML <kbd> element in the following way:

Example

Use ctrl + p to open the Print dialog box.

<pre>

Bootstrap 4 will style the HTML <pre> element in the following way:

Example

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

Leave a Comment