<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target="#collapse-navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand"> <img src="http://khavar.in/media/app-logo.png" id="img-logo"> KhaVar </a> </div> <div class="collapse navbar-collapse" id="collapse-navbar"> <ul class="nav navbar-nav navbar-left"> <li class="active"> <a href="#"><i class="fa fa-home fa-fw"></i> Home</a> </li> <li><a href="#"><i class="fa fa-users fa-fw"></i> About</a></li> <li><a href="#"><i class="fa fa-mobile fa-fw"></i> Contact</a></li> </ul> <form action="" method="" class="navbar-form navbar-left"> <div class="form-group"> <div class="input-group input-group-150"> <input type="text" class="form-control" placeholder="Search this site..." id="location"> <span class="input-group-addon"> <i class="fa fa-search"></i> </span> </div> </div> </form> <ul class="nav navbar-nav navbar-right"> <li class="navbar-text">Hello user</li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> My Account <strong class="caret"></strong></a> <ul class="dropdown-menu" role="menu"> <li> <a href="#"><span class="glyphicon glyphicon-pencil"></span> My reviews</a> </li> <li> <a href="#"><span class="glyphicon glyphicon-briefcase"></span> Favourites</a> </li> <li class="divider"></li> <li> <a href="#"><span class="glyphicon glyphicon-wrench"></span> Account Settings</a> </li> <li> <a href="#"><span class="glyphicon glyphicon-off"></span> Sign out</a> </li> <li class="divider"></li> <li><a href="KhavarLogin.jsp">Sign in</a></li> </ul> </li> </ul> </div> </div> </nav> <nav> </nav> <div id="header-row"> <div class="well"> <div class="row" > <div class="col-lg-7"> <div class="container"> <div class="row"> <div class="col-lg-8"> <h1> Barbeque Nation</h1> </div> <div class="col-lg-4"> Rating </div> </div> <hr> <p><b>ADDRESS:</b></p> <p><b>PHONE:</b></p> </div> </div> <div class="col-lg-5"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://www.barbeque-nation.com/uploads/image_files/web-slider-2-776-x-424-px-776x424-quadrant(T).jpg" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="http://www.barbeque-nation.com/uploads/image_files/kids-eat-free-web-slider-776x424-776x424-quadrant(T).jpg" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="http://www.barbeque-nation.com/uploads/image_files/web-slider-1-776-x-424-px-776x424-quadrant(T).jpg?timestamp=1411909801749" alt="..."> <div class="carousel-caption"> </div> </div> </div> </div> </div> </div> </div> </div> <div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Home</a></li> <li><a href="#tab2" data-toggle="tab">Section 2</a></li> <li><a href="#tab2" data-toggle="tab">Section 3</a></li> <li><a href="#tab2" data-toggle="tab">Section 4</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <div id="header-row"> <div class="well"> <div class="row" > <div class="col-lg-7"> <div class="container"> <div class="row"> <div class="col-lg-8"> <h1> Barbeque Nation</h1> </div> <div class="col-lg-4"> Rating </div> </div> <hr> <p><b>ADDRESS:</b></p> <p><b>PHONE:</b></p> </div> </div> <div class="col-lg-5"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://www.barbeque-nation.com/uploads/image_files/web-slider-2-776-x-424-px-776x424-quadrant(T).jpg" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="http://www.barbeque-nation.com/uploads/image_files/kids-eat-free-web-slider-776x424-776x424-quadrant(T).jpg" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="http://www.barbeque-nation.com/uploads/image_files/web-slider-1-776-x-424-px-776x424-quadrant(T).jpg?timestamp=1411909801749" alt="..."> <div class="carousel-caption"> </div> </div> </div> </div> </div> </div> </div> </div> </div><!-- end tab-pane --> <div class="tab-pane" id="tab2"> <h4>A Left Floated Picture <small>Using Placehold.it</small></h4> <img src="http://placehold.it/140" class="thumbnail pull-left" alt="Placeholder image"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <hr> <a href="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span> Click for a Modal Window!</a> </div><!-- end tab-pane --> </div><!-- end tab-content --> </div><!-- end tabbable -->

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'); @import url('https://raw.githubusercontent.com/silviomoreto/bootstrap-select/master/dist/css/bootstrap-select.min.css'); #img-logo{ width:30px; height:30px; } .input-group-150 { max-width: 250px; } #header-row{ margin-top:70px; }