Home presentation layout Bootstrap 3 Layout

This bootstrap snippet Home presentation layout Bootstrap 3 Layout was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: layout

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<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-->

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


				                
body{margin-top:20px;}				              
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.0.1

Created: May 4th 2014, 17:47

Views: 2.9K