Bootstrap 4 Grid

Bootstrap 4 uses a 12-column responsive grid built from containers, rows and columns.

Basic Grid Top ↑

<div class="container">
  <div class="row">
    <div class="col-md-8">Main content</div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>

Responsive Breakpoints Top ↑

Bootstrap 4 grid prefixes are col-, col-sm-, col-md-, col-lg- and col-xl-.

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">A</div>
  <div class="col-12 col-md-6 col-lg-4">B</div>
  <div class="col-12 col-lg-4">C</div>
</div>

Offsets and Auto Layout Top ↑

<div class="row">
  <div class="col-md-6 offset-md-3">
    Centered column
  </div>
</div>

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

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<div class="container-fluid">
<div class='row'>
	<div class='col-sm'>class='col-sm'<br>1/4 equal sections</div>
	<div class='col-sm'>class='col-sm'<br>1/4 equal sections</div>
	<div class='col-sm'>class='col-sm'<br>1/4 equal sections</div>
	<div class='col-sm'>class='col-sm'<br>1/4 equal sections</div>
</div>	
</div>

Original example 2

<div class="container-fluid">
<div class='row'>
	<div class='col-1'>col-1</div>
	<div class='col-7'>class='col-7'<br>7/12  sections</div>
	<div class='col-4'>class='col-4'<br>4/12  sections</div>	
</div>	
</div>

Original example 3

<div class="container-fluid">
<div class='row'>
	<div class='w-50'>class='w-50'<br>50% of full width</div>
	<div class='col'>class='col'</div>
	<div class='col'>class='col'</div>	
</div>	
</div>

Original example 4

<div class="container-fluid">
<div class='row align-items-start'>
	<div class='w-25 border'>class='w-25'<br><br>25% of full width</div>
	<div class='col border'>class='col'</div>
	<div class='col border'>class='col'</div>	
</div>
<br>	
<div class='row align-items-center'>
	<div class='w-25 border'>class='w-25'<br><br>25% of full width</div>
	<div class='col border'>class='col'</div>
	<div class='col border'>class='col'</div>	
</div>	
<br>
<div class='row align-items-end'>
	<div class='w-25 border'>class='w-25'<br><br>25% of full width</div>
	<div class='col border'>class='col'</div>
	<div class='col border'>class='col'</div>	
</div>	
</div>

Original example 5

<div class='row align-items-start'>
<div class='col offset-md-2'>class='col offset-md-2'<br>with offset</div>
<div class='col'>class='col'</div>
<div class='col'>class='col'</div>	
</div>	
</div>

Original example 6

<div class="container-fluid">
<div class='row align-items-start'>
 <div class='col >class='col </div>
 <div class='col offset-md-2'>class='col offset-md-2'<br><br>with offset</div>
</div>	
</div>

Original example 7

<div class='container-fluid'>
<div class='row align-items-start'>
	<div class='col  order-8'> 1st column<br> order-8</div>
	<div class='col  order-2'> 2nd column<br> order-2</div>
	<div class='col' > 3rd column <br> No order</div>
	<div class='col order-1'> 4th column<br> order-1</div>
</div>	
</div>

Original example 8

<div class='container-fluid'>
<div class='row align-items-start'>
	<div class='col border order-last'> 1st column<br> order-last</div>
	<div class='col border' > 2nd column <br> No order</div>
	<div class='col border order-first'> 4th column<br> order-first</div>
</div>	
</div>

Additional Original Learning Routes Top ↑

• bs-alert.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: