<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Ref: https://getbootstrap.com/docs/4.3/utilities/display/ --> <nav class="navbar navbar-expand-lg navbar navbar-dark bg-primary"> <a class="navbar-brand" href="#">Yoda Lives</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Gallery</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Fan club</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Members only</a> </li> </ul> </div> </nav> <div class="jumbotron text-center"> <h1>Yoda lives here.</h1> </div> <div class="container"> <div class="row"> <div class="col-md-2"> <h3>Column 1</h3> <div class="badge badge-danger d-inline d-sm-none">Hello badge</div> <hr> <span class="badge badge-danger d-inline d-sm-none">xs</span> <span class="badge badge-primary d-none d-sm-inline d-md-none">sm</span> <span class="badge badge-primary d-none d-md-inline d-lg-none">md</span> <span class="badge badge-primary d-none d-lg-inline d-xl-none">lg</span> <span class="badge badge-primary d-none d-xl-inline">xl</span> </div> <div class="col-md-8"> <h3>Column 2</h3> <h2 class=" d-inline d-sm-none">Display only on XS screens</h2> </div> <div class="col-md-2"> <h3>Column 3</h3> <p class="d-md-inline d-lg-none">Lorem ipsum dolor..</p> <p class="d-inline d-sm-none">Ut enim ad..</p> </div> </div> </div>