<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="nav-link"href="">kayDog</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class= "collapse navbar-collapse" id="navbarTogglerDemo01"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link"href="">contact</a> </li> <li class="nav-item"> <a class="nav-link"href="">Pricing</a> </li> <li class="nav-item"> <a class="nav-link"href="">Download</a> </li> </ul> </div> </nav> <div class="row"> <div class="col" style="background-color:red; border: 1px solid;"> col </div> <div class="col" style="background-color:red; border: 1px solid;"> col </div> </div> <div class="row"> <div class="col-6" style="background-color:green; border: 1px solid;"> col-6 </div> <div class="col-6" style="background-color:green; border: 1px solid;"> col-6 </div> </div> <div class="row"> <div class="col-md 6"style="background-color:yellow; border: 1px solid;"> col-md 6 </div> <div class="col-md 6" style="background-color:yellow; border: 1px solid;"> col-md 6 </div> </div>