"Simple Layout"
Bootstrap 3.2.0 Snippet by ishwarkatwe

<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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bg"> <div class="col-md-10"> <img width="50" src="https://scontent-a-sin.xx.fbcdn.net/hphotos-frc3/v/t1.0-9/1010549_378823185552943_1788436797_n.png?oh=22ba084d3525bcd1c26137da36882340&oe=54498BFE" /> <span class="brand">Dynasofts</span> </div> <div class="col-md-2 pull-right"> <i class="social fa fa-facebook fa-2x" style=" color: rgb(100, 100, 246); "></i> <i class="social fa fa-google-plus fa-2x" style=" color: rgb(252, 49, 49); "></i> <i class="social fa fa-twitter fa-2x" style=" color: rgb(47, 188, 255); "></i> </div> </div> <br> <div class="container"> <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="#">Dynasofts</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</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Web Development</a></li> <li><a href="#">Web Services</a></li> <li><a href="#">Designing</a></li> <li class="divider"></li> <li><a href="#">Branding</a></li> <li class="divider"></li> <li><a href="#">R & D</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Contact Us</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Connect <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Facebook</a></li> <li><a href="#">LinkedIn</a></li> <li><a href="#">Google plus</a></li> <li class="divider"></li> <li><a href="#">Tweet</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="col-md-12"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-bottom:10px;-webkit-box-shadow: -3px 10px 22px -7px rgba(0,0,0,0.75); -moz-box-shadow: -3px 10px 22px -7px rgba(0,0,0,0.75); box-shadow: -3px 10px 22px -7px rgba(0,0,0,0.75);"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://cdn.qiibo.com/wp-content/uploads/2013/03/galaxy-wallpaper-background-40801-hd-wallpapers-2.jpg" width="100%" height="200px" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="http://www.cyclesoles.com/wp-content/uploads/2013/10/hd-wallpapers-mountain-bike-desktop-biking-wallpaper-tricks-1920x1080-wallpaper-1000x400.jpg" width="100%" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="http://www.cyclesoles.com/wp-content/uploads/2013/10/bicycle-hd-for-and-85908-1000x400.jpg" width="100%" alt="..."> <div class="carousel-caption"> ... </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> <div class="col-md-8"> <section> <blockquote style="border-left: 5px solid #CA5252;"> <header><h3 class="title">Learn HTML5</h3></header> <img src="http://lorempixel.com/output/fashion-q-c-100-100-9.jpg" class="img_item img-circle"/> <p>Famous Web design scripting language learning made easy grap the tutorial today!</p> <footer align="right"><i> ~ishwar katwe 05-Aug-2014</i></footer> </blockquote> <blockquote style="border-left: 5px solid #CA5252;"> <header><h3 class="title">Learn HTML5</h3></header> <img src="http://lorempixel.com/output/fashion-q-c-100-100-9.jpg" class="img_item img-circle"/> <p>Famous Web design scripting language learning made easy grap the tutorial today!</p> <footer align="right"><i> ~ishwar katwe 05-Aug-2014</i></footer> </blockquote> <br> <blockquote style="border-left: 5px solid #CA5252;"> <header><h3 class="title">Learn Android</h3></header> <img src="http://lorempixel.com/output/people-q-c-100-100-2.jpg" class="img_item img-circle"/> <p>Famous Web design scripting language</p> <footer align="right"><i> ~ishwar katwe 05-Aug-2014</i></footer> </blockquote> <br> <blockquote style="border-left: 5px solid #CA5252;"> <header><h3 class="title">Learn PHP Scripting</h3></header> <img src="http://lorempixel.com/output/people-q-c-100-100-10.jpg" class="img_item img-circle"/> <p>Famous Web design scripting language</p> <footer align="right"><i> ~ishwar katwe 05-Aug-2014</i></footer> </blockquote> </section> </div> <div class="col-md-4"> <aside> <blockquote style="border-left: 5px solid #CA5252;"> <h3 class="title">Recent News</h3> <ul class="list-group"> <li class="list-group-item">Hello its Friday</li> <li class="list-group-item">Awsome Designing stuff using bootstrap</li> <li class="list-group-item">HTML5</li> <li class="list-group-item">CSS3</li> <li class="list-group-item">PHP</li> </ul> </blockquote> </aside> </div> <footer align="center" class="col-md-12" style=" border-top: 2px brown solid; margin: 5px; "> <i style=" color: #FFF; ">All Right Received © 2014</i> </footer> </div>
*{ margin:0px; padding:0px; } .navbar-default { background-color: #FFFFFF; border-bottom-color: #BB0000; } .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus { color: #FFF; background-color: #8A8A8A; } .nav>li>a:hover, .nav>li>a:focus { text-decoration: none; background-color: #CCC; color: #FFF; } a { color: #FFFFFF; text-decoration: none; } .img_item { width:80px; height:80px; float:left; } .title{ margin-top: 3px; margin-bottom: 3px; font-family: fantasy; color: brown; } element.style { } .well-sm { padding: 9px; border-radius: 3px; } .well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #EBEBEB; border: 1px solid #DADADA; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); box-shadow: inset 0 1px 1px rgba(0,0,0,.05); opacity: 0.9; } .social{ margin:10px; } .brand{ font-family: fantasy; font-size: 37px; } body{ background-image:url(http://subtlepatterns.com/patterns/restaurant_icons.png); } .header { background-color: rgba(39, 39, 39, 0.8); padding: 5px; opacity: 1; margin-bottom: 10px; border-radius: 6px 6px; } .list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid rgba(165, 42, 42, 0.36); } .carousel-control { position: absolute; top: 0; bottom: 0; left: 0; width: 4%; font-size: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.6); filter: alpha(opacity=50); opacity: 1.1; } .img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img { display: block; width: 100% \9; max-width: 100%; height: 340px; }

Related: See More


Questions / Comments: