Bootstrap 4 Grid Generator Online Tool

Choose your grid below.


 <div class="container">
   <div class="row justify-content-center">
     <div class="col-md-6">
        Column One
     </div>
   </div>
   <!-- /.row -->
</div>
<!-- /.container -->


 <div class="container">
   <div class="row">
     <div class="col-sm-6">
       Column One
     </div>
     <!-- /.col-sm-6 -->
     <div class="col-sm-6">
       Column Two
     </div>
     <!-- /.col-sm-6 -->
   </div>
   <!-- /.row -->
  </div>
  <!-- /.container -->


 <div class="container">
   <div class="row no-gutters">
     <div class="col-sm-6">
       Column One
     </div>
     <!-- /.col-sm-6 -->
     <div class="col-sm-6">
       Column Two
     </div>
     <!-- /.col-sm-6 -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->


 <div class="container">
   <div class="row">
       <div class="col-sm-4">
         Column One
       </div>
       <!-- /.col-sm-4 -->
       <div class="col-sm-4">
         Column Two
       </div>
       <!-- /.col-sm-4 -->
       <div class="col-sm-4">
         Column Three
       </div>
       <!-- /.col-sm-4 -->
  </div>
  <!-- /.row -->
</div>
<!-- /.container -->


<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Column One
    </div>
    <!-- /.col-sm-3 -->
    <div class="col-sm-3">
      Column Two
    </div>
    <!-- /.col-sm-3 -->
    <div class="col-sm-3">
      Column Three
    </div>
    <!-- /.col-sm-3 -->
    <div class="col-sm-3">
      Column Four
    </div>
    <!-- /.col-sm-3 -->
    </div>
    <!-- /.row -->
 </div>
 <!-- /.container -->


 <div class="container">
 <!-- Does require some custom CSS -->
 <div class="row row-5">
   <div class="col">
      Column One
   </div>
   <!-- /.col-sm-6 -->
   <div class="col">
      Column Two
   </div>
   <!-- /.col -->
   <div class="col">
      Column Three
   </div>
   <!-- /.col -->
   <div class="col">
      Column Four
   </div>
   <!-- /.col -->
   <div class="col">
      Column Five
   </div>
   <!-- /.col -->
   </div>
   <!-- /.row -->
</div>
<!-- /.container -->
 <style>
 /* Use this if you need 5 columns */
@media (max-width:575px) {
   .row-5 {
      display: block;
   }
}
</style>


 <div class="container">
   <div class="row">
     <div class="col-sm-2">
      Column One
     </div>
     <!-- /.col-sm-2 -->
     <div class="col-sm-2">
      Column Two
     </div>
     <!-- /.col-sm-2 -->
     <div class="col-sm-2">
      Column Three
     </div>
     <!-- /.col-sm-2 -->
     <div class="col-sm-2">
      Column Four
     </div>
     <!-- /.col-sm-2 -->
     <div class="col-sm-2">
      Column Five
     </div>
     <!-- /.col-sm-2 -->
     <div class="col-sm-2">
      Column Six
     </div>
     <!-- /.col-sm-2 -->
   </div>
   <!-- /.row -->
</div>
<!-- /.container -->

Advertise Here