LinGeo Template

Return to:
G & L WebDesign

Bootprint Column Grid

Bootstrap grid examples - Basic grid layouts to get you familiar with building within the Bootstrap grid system.

Basics

Bootstrap 4 includes the powerful mobile-first 12 column flexbox-powered grid system from Bootstrap plus a few extras.
The grid system allows you to alyout content on your pages and alter the layout based on the screenwidth of the page/browser.


Mobile-first

Mobile-first means that you consider your default layout to be mobile/small screens and then you progressively enhance it up as the screenwidth increases. This is the approach Bootstrap adopted since version 3 although some media queries do go against this where it makes sense.


Flexbox

Since Bootstrap 4 has Flexbox support by default which makes use of the powerful CSS flexbile box layout module opening up a whole new world of grid power!
Internet Explorer 9 (and below) does not support Flexbox at all but fortunately there is a work-around for Internet Explorer 9.
See lines 14-21 at the top of any HTML file in this tutorial.
You can also choose to "opt out" of using Flexbox by simply adding the following line of code after all the other CSS files are included within the head tags: <link href="assets/css/no-flexbox.css" rel="stylesheet"> This will override the Bootstrap Flexbox elements so they use display block & floats instead, magic!


Grid Structure

Basic struction of a grid is: .container|.container-fluid .row .col|col-BREAKPOINT-(1-12)|col-(1-12)
Containers .container|.container-fluid are wrappers that center the content on the page, .container has fixed pixel widths which vary with the screensize and .container-fluid stretches full width of the screen.
Rows .row applies the Flexbox properties which should be applied to the .col|col-BREAKPOINT-(1-12)|col-(1-12) elements within it. By default it sets them to show as "rows" aligned side by side.
Columns .col|col-BREAKPOINT-(1-12)|col-(1-12) elements determine the percentage width to give a column within the grid and at which "breakpoint" that width should be set from. Grid columns without a set width will automatically layout with equal widths. For example, four instances of .col-sm will each automatically be 25% wide for small breakpoints. Column classes indicate the number of columns you want to use out of the possible 12 per row. So, if you want three equal-width columns, you can use .col-sm-4. 12 is considered "full width". If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.


Breakpoint

Breakpoints are the point at which the screenwidth increases or decreases from one recognized point to the next. In Bootstrap there are 5 breakpoints you can work with: all breakpoints (extra small), small, medium, large, and extra large.


Breakpoints are based on minimum widths, meaning they apply to that one tier and all those above it For example: .col-sm-4 would apply to small, medium, large, and extra large devices OR .col-md-6 would apply to medium, large & extra large screens only.
You can also mix and match breakpoints so for example your layout might allow 1 column up to medium screens, then 2 columns for medium and 4 columns for large and above screens. ie class="col-12 col-md-6 col-lg-3"
Breakpoint Shortname Description Media queries Column Class Examples
1. Extra Small (default) (blank) Extra small devices (portrait phones, less than 576px) No media query since this is the default in Bootstrap .col-(1-12)
2. Small sm Small devices (landscape phones, 576px and up) @media (min-width: 576px) {} .col-sm-(1-12)
3. Medium md Medium devices (tablets, 768px and up) up: @media (min-width: 768px) {}
down: @media (max-width: 767px) {}
.col-md-(1-12)
4. Large lg Large devices (desktops, 992px and up) @media (min-width: 992px) {} .col-lg-(1-12)
5. Extra Large xl Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) {} .col-xl-(1-12)

Vertical Spacing

While using Twitter Bootstrap, I ran into some vertical spacing issues when bootstrap's columns started to stack. For example, lets take a look at a 3 column layout for medium sized screens.

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

If a tablet or phone viewed that layout, all the columns would be stacked but each column might be directly touching the previous column.

To solve this, we can create a new css class that applies top margin to columns when they get stacked. View the example below on a small screen as compared to the example above.

.col-sm-4
.col-sm-4
.col-sm-4
View code example

.row.row-grid [class*="col-"] + [class*="col-"] {
	margin-top: 15px;
}
@media (min-width: 1200px) {
	.row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
	margin-top: 0;
	}
}
@media (min-width: 992px) {
	.row.row-grid [class*="col-md-"] + [class*="col-md-"] {
	margin-top: 0;
	}
}
@media (min-width: 768px) {
	.row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
	margin-top: 0;
	}
}

	

Centered Container

use .mx-auto for display:block elements
View code example

<div class="row row-grid">
	<div class="col">
		<div class="mx-auto w-50 p-6 bg-dark text-white text-center">
	<span>use <code>.mx-auto</code> for display:block elements</span>
		</div>
	</div>          
</div>

	

Auto Column Widths

With the power of Flexbox you can simply use any number of .col elements within a .row element and every column will automatically be made the same width.

1 of 2
1 of 2
1 of 3
1 of 3
1 of 3
View code example

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      1 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
  </div>
</div>

	

Setting one column width

You can even set the width of one column and Flexbox will automatically resize the other columns around it.

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
View code example
<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

	

Variable width content

Using the col-{breakpoint}-auto classes you can set fixed width columns on one breakpoint and then reset them to their nature width on another breakpoint.

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
View code example
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

	

Equal-width multi-row

Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line.

col
col
col
col
View code example
<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

	

Responsive Layouts

All breakpoints

For grid layouts that are the same from the smallest of devices to the largest, use the .col and .col-* classes.

col
col
col
col
col
col
col
col-6
col-8
col-4
View code example
<div class="container">
  <div class="row mb-3">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row mb-3">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col-6">col-6</div>
  </div>      
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

	

Stacked to horizontal

Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.

col-sm-8
col-sm-4
col-sm
col-sm
col-sm
View code example
<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

	

Mix it up!

Combine .col-BREAKPOINT-* classes on the same columns to create varying layouts per breakpoint.

.col .col-md-8
.col-6 .col-md-4
.col-6 .col-md-8
.col-6 .col-md-2
.col-6 .col-md-2
.col-6
.col-6
View code example
<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col col-md-8">.col .col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
  
  <!-- 3 equal columns on mobile,  1 wide & 2 small from medium up-->
  <div class="row">
    <div class="col col-md-8">.col-6 .col-md-8</div>
    <div class="col col-md-2">.col-6 .col-md-2</div>
    <div class="col col-md-2">.col-6 .col-md-2</div>
  </div>
  
  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

	

Alignment

Vertical Alignment/Tools

The following classes applied to any .row elements allows you to control the vertical alignment of columns in a grid.

  1. .align-items-start and align-items-BREAKPOINT-start :
    aligns columns to the top ("start").
  2. .align-items-end and align-items-BREAKPOINT-end :
    aligns columns to the bottom ("end").
  3. .align-items-center and align-items-BREAKPOINT-center :
    aligns columns to the middle ("center").
  4. .align-items-stretch and align-items-BREAKPOINT-stretch :
    stretches column to the full height of their row container.

You can also align single columns using the .align-self-start|end|center|stretch and .align-self-BREAKPOINT-start|end|center|stretch classes directly on the column elements.

Align top
Align top
Align center
Align center
Align bottom
Align bottom
Stretch full height
Stretch full height
Single column top
Single column middle
Single column bottom
View code example

<div class="container">
  <div class="row align-items-start" style="height: 10rem;">
    <div class="col">
      Align top
    </div>
    <div class="col">
      Align top
    </div>
  </div>
  <div class="row align-items-center" style="height: 10rem;">
    <div class="col">
      Align center
    </div>
    <div class="col">
      Align center
    </div>
  </div>
  <div class="row align-items-end" style="height: 10rem;">
    <div class="col">
      Align bottom
    </div>
    <div class="col">
      Align bottom
    </div>
  </div>
  <div class="row align-items-stretch" style="height: 10rem;">
    <div class="col">
      Stretch full height
    </div>
    <div class="col">
      Stretch full height
    </div>
  </div>
  
  <div class="row" style="height: 10rem;">
    <div class="col align-self-start">
      Single column top
    </div>
    <div class="col align-self-center">
      Single column middle
    </div>
    <div class="col align-self-end">
      Single column bottom
    </div>    
  </div>  
</div>

	

Horizontal Alignment/Tools

The following classes applied to any .row elements allows you to control the horizontal alignment of columns in a grid.

  1. .justify-content-start and justify-content-BREAKPOINT-start :
    aligns columns to the left ("start").
  2. .justify-content-end and justify-content-BREAKPOINT-end :
    aligns columns to the right ("end").
  3. .justify-content-center and justify-content-BREAKPOINT-center :
    aligns columns to the center ("center").
  4. .justify-content-around and justify-content-BREAKPOINT-around :
    centers columns and distributes them evenly.
  5. .justify-content-between and justify-content-BREAKPOINT-between :
    stretches columns to the full width of their row container and distributes them evenly.
Align left
Align left
Align center
Align center
Align right
Align right
Align even center
Align even center
Align even stretch
Align even stretch
View code example
<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      Align left
    </div>
    <div class="col-4">
      Align left
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      Align center
    </div>
    <div class="col-4">
      Align center
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      Align right
    </div>
    <div class="col-4">
      Align right
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      Align even center
    </div>
    <div class="col-4">
      Align even center
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      Align even stretch
    </div>
    <div class="col-4">
      Align even stretch
    </div>
  </div>  
</div>

	

Vertical Centering

By default columns have horizontal padding to add space or "gutters" between columns, you can modify this by adding flexbox margin coding .mr and .md class to .row elements.

Normal spacing

.col-md-6
.col-md-6

More spacing

.col-md-6 .mr-md-2
.col-md-6 .mr-md-2

Less spacing

.col-md-6 .pr-md-1
.col-md-6 .pl-md-2

3 Columns with more spacing

.col-md-4 pr-md-1 .mr-md-3
.col-md-4 pr-md-1 .mr-md-3
.col-md-4 pr-md-1 .mr-md-3

4 Columns with more spacing

.col-md-3 pr-md-1 .mr-md-3
.col-md-3 pr-md-1 .mr-md-3
.col-md-3 pr-md-1 .mr-md-3
.col-md-3 pr-md-1 .mr-md-3

No Gutters

By default columns have horizontal padding to add space or "gutters" between columns, you can remove this by adding the .no-gutters class to .row elements.

With Gutters
With Gutters
No Gutters
No Gutters
View Code Example

      	<div class="container">
        		<div class="row mb-3">
          		<div class="col">
            			<div class="bg-light">With Gutters</div>
          		</div>
         			 <div class="col">
            			<div class="bg-light">With Gutters</div>
          		</div>
        			</div>
        		</div>
        	</div>
     </div>
        
     <div class="container">
        	<div class="row no-gutters">
          	<div class="col">
            		<div class="bg-lingeo1">No Gutters</div>
          	</div>
          	<div class="col">
            		<div class="bg-lingeo2">No Gutters</div>
          	</div>

	

Column Ordering

Flex order

If you're using Flexbox you can reorder columns without moving them in your code by using these classes: .order-(1-12)

All classes are also responsive: .order-BREAKPOINT-(1-12) so you can change the order per breakpoint too.

First, but unordered
Second, but last
Third, but first
View code example

	<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

	

Re-Order Columns

This little trick is especially useful when a page has 2 sidebars in that it moves the primary content to the top on small screens. Section One moves above Sections 2 and 3 on small screens. Reduce the width of your browser to see how it works.

Two .col-md-3 col-sm-12 col-xs-12 order-md-1 order-sm-2 order-xl-1 order-2
One .col-md-6 col-sm-12 col-xs-12 order-md-2 order-sm-1 order-xl-2 order-1
Three .col-md-3 col-sm-12 col-xs-12 order-md-3 order-sm-3 order-xl-3 order-3
Two col-md-3 col-sm-12 col-xs-12 order-md-1 order-sm-2 order-xl-1 order-2
One col-md-9 col-sm-12 col-xs-12 order-md-2 order-sm-1 order-xl-2 order-1
View code example
	
	<div class="container">
		<div class="row">
			<div class="col-md-3 col-sm-12 col-xs-12 order-md-1 order-sm-2 order-xl-1 order-2">
			<strong>Two</strong> .col-md-3 col-sm-12 col-xs-12 order-md-1 order-sm-2 order-xl-1 order-2</div>
			<div class="col-md-6 col-sm-12 col-xs-12 order-md-2 order-sm-1 order-xl-2 order-1">
			<strong>One</strong> .col-md-6 col-sm-12 col-xs-12 order-md-2 order-sm-1 order-xl-2 order-1</div>
			<div class="col-md-3 col-sm-12 col-xs-12 order-md-3 order-sm-3 order-xl-3 order-3">
			<strong>Three</strong> .col-md-3 col-sm-12 col-xs-12 order-md-3 order-sm-3 order-xl-3 order-3</div>
		</div>
	</div>
	
	 

Re-Order Columns

An easier alternative

FIRST div id="first-col" class="col-md"
MAIN div id="fourth-col" class="col-md"
FIRST
div id="first-col" class="col-md"
SECOND
div id="second-col" class="col-md"
MAIN
div id="fourth-col" class="col-md"
FIRST
div id="first-col" class="col-md"
MAIN
div id="fourth-col" class="col-md"
SECOND
div id="second-col" class="col-md"
FIRST
div id="first-col" class="col-md"
SECOND
div id="second-col" class="col-md"
>THIRD
div id="third-col" class="col-md"
MAIN
div id="fourth-col" class="col-md"
View code example

<!-- Two Columns -->
<div class="container">
 <div class="row">
      <div class="grid-demo">
<div class="container mt-3 mb-3">
 <div class="row">
  <div id="first-col" class="col-md">
		<strong>FIRST</strong> div id="first-col" class="col-md"
  </div>
  <div id="fourth-col" class="col-md">
		<strong>MAIN</strong> div id="fourth-col" class="col-md"		
  </div>
 </div>
</div>
<!-- Three Columns -->
      <div class="grid-demo">
<div class="container mt-3 mb-3">
 <div class="row">
  <div id="first-col" class="col-md">
		<strong>FIRST</strong></br>div id="first-col" class="col-md"
  </div>
  <div id="second-col" class="col-md">
		<strong>SECOND</strong></br>div id="second-col" class="col-md"
  </div>
  <div id="fourth-col" class="col-md">
		<strong>MAIN</strong></br>div id="fourth-col" class="col-md"
  </div>
 </div>
</div>
<!-- Three Columns -->
      <div class="grid-demo">
<div class="container mt-3 mb-3">
 <div class="row">
  <div id="first-col" class="col-md">
		<strong>FIRST</strong></br>div id="first-col" class="col-md"
  </div>
  <div id="fourth-col" class="col-md">
		<strong>MAIN</strong></br>div id="fourth-col" class="col-md"
  </div>
  <div id="second-col" class="col-md">
		<strong>SECOND</strong></br>div id="second-col" class="col-md"
  </div>
 </div>
</div>
<!-- Four Columns -->
<div class="container mt-3 mb-3">
 <div class="row">
  <div id="first-col" class="col-md">
		<strong>FIRST</strong></br>div id="first-col" class="col-md"
  </div>
  <div id="second-col" class="col-md">
		<strong>SECOND</strong></br>div id="second-col" class="col-md"
  </div>
  <div id="third-col" class="col-md">
		<strong>>THIRD</strong></br>div id="third-col" class="col-md"
  </div>
  <div id="fourth-col" class="col-md">
		<strong>MAIN</strong></br>div id="fourth-col" class="col-md"
  </div>
 </div>
</div>
</div>

	

Offsetting Columns

Move columns to the right using .m(r|l)-auto classes.

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto
View code example

<div class="container"><div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div></div>

	

Grid Nesting

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 3: .col-6
Level 3: .col-6
Level 2: .col-4 .col-sm-6
View Grid Nesting Code Example 1

        	<div class="container">
          <!-- level 1 -->
          <div class="row">
            	<div class="col-sm-9">
              		Level 1: .col-sm-9
          <!-- level 2 -->
          <div class="row">
               <div class="col-8 col-sm-6">
                  	Level 2: .col-8 .col-sm-6
          <!-- level 3 -->
          <div class="row">
               <div class="col-6"> Level 3: .col-6 </div>
               <div class="col-6"> Level 3: .col-6 </div>
                  	</div>
               </div>
               <div class="col-4 col-sm-6"> Level 2: .col-4 .col-sm-6 </div>
              	</div>
            		</div>
          	</div>
        	</div>

	
Level 1: .col-9 .col-sm-9
Level 2: .col-6
Level 2: .col-6
Level 1: .col-3 .col-sm-3
View Grid Nesting Code Example 2

        <div class="container">
          <!-- level 1 -->
              <div class="row">
                <div class="col-9 col-sm-9">
                  Level 1: .col-9 .col-sm-9
                  <!-- level 2 -->
                  <div class="row">
                    <div class="col-6"> Level 2: .col-6 </div>
                    <div class="col-6"> Level 2: .col-6 </div>
                  </div>
                </div>
                <div class="col-3 col-sm-3"> Level 1: .col-3 .col-sm-3 </div>
          </div>
        </div>
      </div>
	</div></div>

	
Level 1: .col-9 .col-sm-9
Level 2: .col-6
Level 2: .col-6
Level 2: .col-3
Level 2: .col-3
Level 2: .col-3
Level 2: .col-3
Level 1: .col-3 .col-sm-3
View Grid Nesting Code Example 3

        	<div class="container">
<!-- level 1 -->
              	<div class="row">
                	<div class="col-9 col-sm-9">
                  		Level 1: .col-9 .col-sm-9
<!-- level 2 -->
               <div class="row">
                    <div class="col-6"> Level 2: .col-6 </div>
                    <div class="col-6"> Level 2: .col-6 </div>
               </div>
<!-- level 3 -->
               <div class="row">
                    <div class="col-3"> Level 2: .col-3 </div>
                    <div class="col-3"> Level 2: .col-3 </div>
                    <div class="col-3"> Level 2: .col-3 </div>
                    <div class="col-3"> Level 2: .col-3 </div>
               </div>    
          </div>
                <div class="col-3 col-sm-3"> Level 1: .col-3 .col-sm-3 </div>
          </div>

	
Level 1: .col-8 .col-sm-8
Level 2: .col-6
Level 2: .col-6
Level 2: .col-3
Level 2: .col-3
Level 2: .col-3
Level 2: .col-3
Level 1: .col-4 .col-sm-4
View Grid Nesting Code Example 4

        	<div class="container">
<!-- level 1 -->
              	<div class="row">
                	<div class="col-8 col-sm-8">
                  		Level 1: .col-8 .col-sm-8
<!-- level 2 -->
               <div class="row">
                    <div class="col-6"> Level 2: .col-6 </div>
                    <div class="col-6"> Level 2: .col-6 </div>
               </div>
<!-- level 3 -->
          	<div class="row">
                    <div class="col-3"> Level 2: .col-3 </div>
                    <div class="col-3"> Level 2: .col-3 </div>
                    <div class="col-3"> Level 2: .col-3 </div>
                    <div class="col-3"> Level 2: .col-3 </div>
               </div>
          </div>
                	<div class="col-4 col-sm-4"> Level 1: .col-4 .col-sm-4 </div>
      	</div>

	
Level 1: .col-8 .col-sm-8
1
2
3
4
5
6
7
8
Level 3: .col-3
Level 3: .col-3
Level 3: .col-3
Level 3: .col-3
Level 1: .col-4 .col-sm-4
View Code Grid Nesting Example 5

        	<div class="container">
<!-- level 1 -->
              	<div class="row">
                	<div class="col-8 col-sm-8">
                  		Level 1: .col-8 .col-sm-8
<!-- level 2 -->
               <div class="row">
        			<div class="col">1</div>
        			<div class="col">2</div>
        			<div class="col">3</div>
        			<div class="col">4</div>
        			<div class="col">5</div>
        			<div class="col">6</div>
        			<div class="col">7</div>
        			<div class="col">8</div>
    			</div>
<!-- level 3 -->
               <div class="row">
                    <div class="col-3"> Level 3: .col-3 </div>
                    <div class="col-3"> Level 3: .col-3 </div>
                    <div class="col-3"> Level 3: .col-3 </div>
                    <div class="col-3"> Level 3: .col-3 </div>
               </div> 
               </div>
                	<div class="col-4 col-sm-4"> Level 1: .col-4 .col-sm-4 </div>
          	</div>
        		</div>
      		</div>
		</div>

	

Vertically Centered Columns

Since the Bootstrap 4 .row class is now display:flex you can simply use the new align-self-center flexbox utility on any column to vertically center it:

Center

Taller

With supporting text below as a natural lead-in to additional content.

Link To

Center

Taller

With supporting text below as a natural lead-in to additional content.

Link To

Center

Taller XX

With supporting text below as a natural lead-in to additional content.

Link To
Center

Center
Center
Center
Center

Taller

With supporting text below as a natural lead-in to additional content.

Link To

Taller

With supporting text below as a natural lead-in to additional content.

Link To

Taller

With supporting text below as a natural lead-in to additional content.

Link To
Center
Center
Center
Center

Top (default)

Taller

With supporting text below as a natural lead-in to additional content.

Link To
Center
View code example

<div class="container">
    <div class="row">
        <div class="col-6 align-self-center">
            <div class="card card-body">Center</div>
        </div>
        <div class="col-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-header">Taller</h4>
                    <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
                    <a href="#" class="btn btn-default-drk">Link To</a>
                </div>
            </div>
        </div>
    </div>
</div>
<hr>
<div class="container">
    <div class="row align-items-center">
        <div class="col-6">
            <div class="card card-body">Center</div>
        </div>
        <div class="col-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-header">Taller</h4>
                    <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
                    <a href="#" class="btn btn-default-drk">Link To</a>
                </div>
            </div>
        </div>
    </div>
</div>
<hr>
<div class="container">
    <div class="row align-items-center">
        <div class="col-4">
            <div class="card card-body">Center</div>
        </div>
        <div class="col-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-header">Taller</h4>
                    <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
                    <a href="#" class="btn btn-default-drk">Link To</a>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card card-body">Center</div>
        </div>
    </div>
</div>
<hr>
<div class="container">
<div class="row align-items-center">
    <div class="col-4">
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
    </div>
    <div class="col-4">
<div class="card mb-3">
     <div class="card-body">
            <h4 class="card-header">Taller</h4>
            <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
            <a href="#" class="btn btn-default-drk">Link To</a>
     </div>
</div>
<div class="card mb-3">
        <div class="card-body">
            <h4 class="card-header">Taller</h4>
            <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
            <a href="#" class="btn btn-default-drk">Link To</a>
        </div>
</div>

<div class="card mb-3">
        <div class="card-body">
            <h4 class="card-header">Taller</h4>
            <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
            <a href="#" class="btn btn-default-drk">Link To</a>
        </div>
</div>
</div>

    <div class="col-4">
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
    </div>
</div>

<hr>
<div class="container">
    <div class="row">
        <div class="col-4">
            <div class="card card-body">Top (default)</div>
        </div>
        <div class="col-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-header">Taller</h4>
                    <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
                    <a href="#" class="btn btn-default-drk">Link To</a>
                </div>
            </div>
        </div>
        <div class="col-4 align-self-center">
            <div class="card card-body">Center</div>
        </div>
    </div>
</div>
	</div>

	

Non-Traditional Rows


You can have 7, 8, 9, 10 or 11 columns on a row.

5 columns

1
2
3
4
5

7 columns

1
2
3
4
5
6
7

8 columns

1
2
3
4
5
6
7
8

9 columns

1
2
3
4
5
6
7
8
9

10 columns

1
2
3
4
5
6
7
8
9
10

11 columns

1
2
3
4
5
6
7
8
9
10
11
View code example

<div class="container">
    <h4 class="mt-3">8 columns</h4>
    <div class="row mr-0">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
    </div>
    <h4 class="mt-3">9 columns</h4>
    <div class="row mr-0">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
    </div>
    <h4 class="mt-3">10 columns</h4>
    <div class="row mr-0">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
        <div class="col">10</div>
    </div>
    <h4 class="mt-3">11 columns</h4>
    <div class="row mr-0">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
        <div class="col">10</div>
        <div class="col">11</div>
    </div>
	</div>