<div class="container">
      <h2>Common Bootstrap 4 Grid Layouts</h2>
      <hr />

      

   <h2>One column centered</h2>


   <div class="row justify-content-center">
      <div class="col-md-6"></div>
   </div>

   <h2>Two column</h2>
   <div class="row">

      <div class="col-sm-6">

      </div>
      <!-- /.col -->
      <div class="col-sm-6">

      </div>
      <!-- /.col -->
   </div>
   <!-- /.row -->


   <h2>Two column - Golden Ratio Left</h2>
   <div class="row">

      <div class="col-sm-8">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-4">

      </div>
      <!-- /.col-sm-6 -->
   </div>
   <!-- /.row -->


   <h2>Two column - Golden Ratio Right</h2>
   <div class="row">

      <div class="col-sm-4">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-8">

      </div>
      <!-- /.col-sm-6 -->
   </div>
   <!-- /.row -->


   <h2>Three column</h2>
   <div class="row">

      <div class="col-sm-4">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-4">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-4">

      </div>
      <!-- /.col-sm-6 -->
   </div>
   <!-- /.row -->


   <h2>Four column</h2>
   <div class="row">

      <div class="col-sm-3">

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

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

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

      </div>
      <!-- /.col-sm-6 -->

   </div>
   <!-- /.row -->

   <h2>Five column</h2>
   <p>Does require some custom CSS</p>
   <div class="row row-5">
      <div class="col">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col">

      </div>
      <!-- /.col -->
      <div class="col">

      </div>
      <!-- /.col -->
      <div class="col">

      </div>
      <!-- /.col -->
      <div class="col">

      </div>
      <!-- /.col -->
   </div>
   <!-- /.row -->
   
   
   
   <h2>Six column</h2>
   <div class="row">

      <div class="col-sm-2">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-2">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-2">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-2">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-2">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-2">

      </div>
      <!-- /.col-sm-6 -->
   </div>
   <!-- /.row -->

   
   
 <h2>12 column</h2>
   <div class="row">
     <div class="col-sm-1">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-1">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-1">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-1">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-1">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-1">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-1">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-1">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-1">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-1">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-1">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-1">

      </div>
      <!-- /.col-sm-6 -->
   </div>
   <!-- /.row -->
   
   
   
 <h2>No Gutters - Two column</h2>
   <div class="row no-gutters">

      <div class="col-sm-6">

      </div>
      <!-- /.col -->
      <div class="col-sm-6">

      </div>
      <!-- /.col -->
   </div>
   <!-- /.row -->
   

   

</div>
<!-- /.container -->


<div class="container-fluid">
   <h2>Two column Fluid</h2>
   <div class="row">

      <div class="col-sm-6">

      </div>
      <!-- /.col-sm-6 -->
      <div class="col-sm-6">

      </div>
      <!-- /.col-sm-6 -->
   </div>
   <!-- /.row -->

</div>
<!-- /.container-fluid -->
/* Use this if you need 5 columns */
@media (max-width:575px) {
   .row-5 {
      display: block;
   }
}

/* add width to element with .center-block because its default is 100% */

/* Used for demo purposes */
body {margin:2em 0;}
.row div { margin-bottom:1em;background:orange;opacity:0.4;}
.row div:nth-child(odd) {background-color: orange;}

.row div:after {content: " ";background:#ccc;width:100%;display:block;height:30px;}



External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js