Bootstrap snippet: Home presentation layout Bootstrap 3 Layout

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: layout



<div class="container bootstrap snippet"> <div class="row"> <nav class="col-sm-2"><!--nav--> <div class="row"> <div class="col-sm-12"><!--logo--> <img src="http://placehold.it/200&text=Logo" alt="test" class="img-circle img-responsive center" /> </div><!--/logo--> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;Home</a></li> <li><a href="#"><span class="glyphicon glyphicon-cutlery"></span>&nbsp;&nbsp;Recipes</a></li> <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;About</a></li> <li><a href="#"><span class="glyphicon glyphicon-envelope"></span>&nbsp;&nbsp;Contact</a></li> </ul> </nav><!--/nav--> <div class="col-sm-10"> <div id="this-carousel-id" class="carousel slide hidden-xs"><!-- class of slide for animation --> <div class="carousel-inner"> <div class="item active"><!-- class of active since it's the first item --> <img src="http://placehold.it/1200x480" alt="" /> <div class="carousel-caption"> <p>Caption text here</p> </div> </div> <div class="item"> <img src="http://placehold.it/1200x480" alt="" /> <div class="carousel-caption"> <p>Caption text here</p> </div> </div> <div class="item"> <img src="http://placehold.it/1200x480" alt="" /> <div class="carousel-caption"> <p>Caption text here</p> </div> </div> <div class="item"> <img src="http://placehold.it/1200x480" alt="" /> <div class="carousel-caption"> <p>Caption text here</p> </div> </div> </div><!-- /.carousel-inner --> <!-- Next and Previous controls below href values must reference the id for this carousel --> <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a> </div><!-- /.carousel --> </div> </div> </div><!--/.content-->
body{margin-top:20px;}
Dey-Dey

Home presentation layout Bootstrap 3 Layout

Dey-Dey
  May 4th 2014, 17:48
2.1K Views