<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header> <nav class="navbar navbar-default hidden-xs" role="navigation"> <div class="container"> <div class="col-md-7"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li> <li><a href="#">About Us</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Services<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> <li><a href="#">Contact Us</a></li> <li><a href="#">Events</a></li> <li><a href="#">Career</a></li> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </div> <!-- end col 7 --> <div class="col-md-5"> <span class="social"><a href="#"><i aria-hidden="true" class="glyphicon glyphicon-tags"></i></a></span> <span class="social"><i aria-hidden="true" class="glyphicon glyphicon-envelope"></i></a></span> <span class="social"><a href="#"><i aria-hidden="true" class="glyphicon glyphicon-music"></i></a></span> <span class="social"><a href="#"><i aria-hidden="true" class="glyphicon glyphicon-trash"></i></a></span> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> </form> </div> <!-- end col 5 --> </div> <!-- end container --> </nav> <!-- end nav --> <nav class="navbar navbar-default visible-xs" role="navigation" id=""> <div class="navbar-header"> <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-ex2-collapse" style="padding: 8px 15px;"> <span class="sr-only">Toggle navigation</span> <span aria-hidden="true" class="glyphicon glyphicon-sort"></span> </button> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li> <li><a href="#">About Us</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Services<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> <li><a href="#">Contact Us</a></li> <li><a href="#">Events</a></li> <li><a href="#">Career</a></li> </ul> </div> <div class="collapse navbar-collapse navbar-ex2-collapse"> <div class="col-xs-12"> <ul> <li><span class="social"><a href="#"><i aria-hidden="true" class="glyphicon glyphicon-tags"></i></a></span></li> <li><span class="social"><a href="#"><i aria-hidden="true" class="glyphicon glyphicon-envelope"></i></a></span></li> <li><span class="social"><a href="#"><i aria-hidden="true" class="glyphicon glyphicon-music"></i></a></span></li> <li><span class="social"><a href="#"><i aria-hidden="true" class="glyphicon glyphicon-trash"></i></a></span></li> </ul> </div> <div class="col-xs-12"> <form class="navbar-form qu-from" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> </form> </div> </div> </nav> </header> <!-- end header --> <div class="container"> <div class="row"> <!--Main Content--> <div class="col-lg-9 col-lg-push-3 main"> <h1>Main Content</h1> </div> <!--Sidebar--> <div class="col-lg-3 col-lg-pull-9 side"> <h1>Sidebar</h1> </div> </div> </div> <div class="padding-20"></div> <div class="container content"> <div class="row"> <!--Main Content--> <div class="col-lg-3 col-lg-push-9 main"> <h1>Right sidebar</h1> </div> <!--Sidebar--> <div class="col-lg-9 col-lg-pull-3 side"> <h1>Main Content</h1> </div> </div> </div>

body{ font-family:Verdana, Geneva, sans-serif; background-color:#fffeab; } .navbar-default{ background-color:#e7513d; border:none; border-radius:0px; } .navbar-default .navbar-nav > li > a{ color:#fff; margin-left:6px; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{ background-color:#8b2214; color:#fff; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{ background-color:#8b2214; color:#fff; } .navbar-nav > li > .dropdown-menu{ background-color:#8b2214; color:#fff; border-color:#8b2214; } .dropdown-menu > li > a{ color:#fff; } .social{ color:#fff; line-height:50px; } .social a{ color:#FFF; padding:15px; } #banner{ background:100%; background-size:100%; } .para{ margin-top:10%; } .loans{ margin-top:20%; } .navbar-ex2-collapse ul li{ list-style: none; } .navbar-ex2-collapse ul li a{ text-decoration: none; color: #fff; } .navbar-ex2-collapse ul li { float: left; list-style: outside none none; } .navbar-ex2-collapse ul li:hover{ background: #8b2214; color: #fff; } .qu-from{border: none;} .padding-20{ height: 20px; } .main{ background-color: #000; height: 200px; } .side{ background-color: #ccc; height: 200px; }