<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"> <div class="row"> <header> <nav class="navbar navbar-expand-lg navbar-light text-light py-3 main-nav"> <div class="container"> <a class="navbar-brand" href="index.html"></a></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse " id="navbarSupportedContent"> <div class="row"> </div> </div> <ul class="ds-btn"> <li> <a class="btn btn-lg btn-info " href="#"> <i class="glyphicon glyphicon-dashboard pull-left"></i><span>+<br></span></a> </li> <li> <a class="btn btn-lg btn-success " href="#"> <i class="glyphicon glyphicon-dashboard pull-left"></i><span>ORDERS<br></span></a> </li> <li> <a class="btn btn-lg btn-success " href="#"> <i class="glyphicon glyphicon-dashboard pull-left"></i><span>TABLES<br></span></a> </li> </ul> </div> </nav> </header> </div> </div> <br/><br/> <h1>.</h1> <div class="row col-md-12"> <div class="col-md-2 bgwhite"> <div class="smalldiv col-md-6">C-1</div> <div class="cndtion"><b>Empty</b></div> </div> <div class="col-md-1"></div> <div class="col-md-2 bgwhite"> <div class="smalldiv col-md-6">C-1</div> <div class="cndtion"><b>Empty</b> </div> </div> <div class="col-md-1"></div> <div class="col-md-2 bgwhite"> <div class="smalldiv col-md-6">C-1</div> <div class="cndtion"><b>Empty</b></div> </div> <div class="col-md-1"></div><div class="col-md-2 bgwhite"> <div class="smalldiv2 col-md-6">C-1</div> <div class="cndtion"><b><u>Seated</u></b> <small> </small></div> </div> </div> <br/><br/> <div class="row col-md-12"> <div class="col-md-2 bgwhite"> <div class="smalldiv col-md-6">C-1</div> <div class="cndtion"><b>Empty</b></div> </div> <div class="col-md-1"></div> <div class="col-md-2 bgwhite"> <div class="smalldiv col-md-6">C-1</div> <div class="cndtion"><b>Empty</b> </div> </div> <div class="col-md-1"></div> <div class="col-md-2 bgwhite"> <div class="smalldiv2 col-md-6">C-1</div> <div class="cndtion"><b><u>Seated</u></b> <small> </small></div> </div> <div class="col-md-1"></div> <div class="col-md-2 bgwhite"> <div class="smalldiv2 col-md-6">C-1</div> <div class="cndtion"><b><u>Seated</u></b> <small> </small></div> </div> </div> <div class="nfooter">© 2018 - baap Technology . <a href="#" target="_blank" >Angular 5</a></div>

.row{ margin-left:0px; margin-right:0px; } #main_icon { float:right; padding-right: 65px; padding-top:20px; } .nfooter{ position: fixed; bottom:11px; margin-left: 459px; background-color:#e3dddc; } .sub_icon { float:right; padding-right: 65px; padding-top:10px; } .content-header { height: 65px; line-height: 65px; } .content-header h1 { margin: 0; margin-left: 20px; line-height: 65px; display: inline-block; } header .main-nav{ background-color:#FA8072; position: fixed; top: 0; left: 0; width: 100%; z-index: 4000; max-height: 69px; } header .main-nav-scrolled{ background-color: rgba(0,0,0,0.4); } a.btn.btn-lg.btn-success { line-height: 1.1;margin-top:12px; } a.btn.btn-lg.btn-info { line-height: 1.1;margin-top:12px; } .navbar-light .navbar-nav .nav-link{ color: #fff; } .navbar-light .navbar-nav .active .nav-link{ color: #00e0d0; } .bgwhite{ height:70px; background-color:white; box-shadow: 5px 3px; } .smalldiv{ background-color:#FA8072; float:left; margin-top:21px; } .smalldiv2{ background-color:lightgreen; float:left; margin-top:21px; } .cndtion{ margin-top:21px;float:right; } /*for test*/ body{ height: 400px; background-color:#f1f1f1; } .ds-btn li{ list-style:none; float:right; padding:10px; }