<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 ----------> <div class="container"> <div class="row"> <div class="col-md-12 text-center backgroundgray"> <img src="http://lorempixel.com/g/1024/150/people/"> </div> </div> <nav class="navbar navbar-default" role="navigation"> <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="#">Chantoirs.be</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="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Bienvenue <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Bienvenue 1</a></li> <li><a href="#">Bienvenue 2</a></li> <li class="divider"></li> <li><a href="#">Bienvenue 3</a></li> <li class="divider"></li> <li><a href="#">Bienvenue 4</a></li> </ul> </li> <!-- --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Soins <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Soins 1</a></li> <li><a href="#">Soins 2</a></li> <li><a href="#">Soins 3</a></li> </ul> </li> <!-- --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Chambres <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Chambres 1</a></li> <li><a href="#">Chambres 2</a></li> <li><a href="#">Chambres 3</a></li> </ul> </li> <!-- --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Activites <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Activites 1</a></li> <li><a href="#">Activites 2</a></li> <li><a href="#">Activites 3</a></li> </ul> </li> <!-- --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">A proximite <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">proximite 1</a></li> <li><a href="#">proximite 2</a></li> <li><a href="#">proximite 3</a></li> <li><a href="#">proximite 4</a></li> </ul> </li> <!-- --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Contact <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Contact 1</a></li> <li><a href="#">Contact 2</a></li> <li><a href="#">Contact 3</a></li> <li><a href="#">Contact 4</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-10 col-sm-12"> <h1>TITLE <small>subtitle</small></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed sem nibh. Integer ligula est, faucibus eget nulla vel, vestibulum porta augue. Curabitur viverra ligula vitae porttitor blandit. Vestibulum vitae rutrum ante. Aenean at nisi semper, suscipit sapien vulputate, laoreet lectus. Mauris non sapien scelerisque, laoreet diam nec, scelerisque diam. Praesent sed commodo nulla, id maximus nulla. Suspendisse venenatis nulla ut commodo hendrerit. Vestibulum ullamcorper nulla a elit vestibulum, non facilisis ex vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p> </div> <div class="col-md-2 backgroundgray hidden-sm hidden-xs"> <img src="http://lorempixel.com/g/150/900/abstract/"> </div> </div> </div> </div> <div class="row"> <div class="col-md-12 backgroundgray"> <img src="http://lorempixel.com/g/1024/150/people/"> </div> </div> </div>

body{ background-color:#8F7B6B; } body > .container { background-color:#fff; } .backgroundgray { /*background-color:#ddd;*/ } img{ width:100%; }