<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 ----------> <div class="container"> <nav class="navbar navbar-light bg-light"> <span class="navbar-brand mb-0 h1">Navbar</span> </nav> <div id="moreinfo" class="row my-0 mx-0 collapse alert alert-dismissible"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <p class="alert-heading">Health Check</p> </div> <div class="row justify-content-center" id="drop-down-button-holder"> <div data-toggle="collapse" data-target="#moreinfo" class="w-25 my-0 border border-top-0 rounded-bottom text-center alert alert-dismissible" id="center-tab">See More... <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> </div> </div>

#drop-down-button-holder{ background:transparent; } #moreinfo{ background:aqua; } #center-tab{ background:aqua; }