"Blog"
Bootstrap 3.1.0 Snippet by johndrova

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="wrapper"> <div class="box"> <div class="row"> <!-- sidebar --> <div class="column col-sm-3" id="sidebar"> <a class="logo" href="#">B</a> <ul class="nav"> <li class="active"><a href="#featured">Featured</a> </li> <li><a href="#stories">Stories</a> </li> </ul> <ul class="nav hidden-xs" id="sidebar-footer"> <li> <a href="http://www.bootply.com"><h3>Basis</h3>Made with <i class="glyphicon glyphicon-heart-empty"></i> by Bootply</a> </li> </ul> </div> <!-- /sidebar --> <!-- main --> <div class="column col-sm-9" id="main"> <div class="padding"> <div class="full col-sm-9"> <!-- content --> <div class="col-sm-12" id="featured"> <div class="page-header text-muted"> Featured </div> </div> <!--/top story--> <div class="row"> <div class="col-sm-10"> <h3>This is Some Awesome Featured Content</h3> <h4><span class="label label-default">techvisually.com</span></h4><h4> <small class="text-muted">1 hour ago • <a href="#" class="text-muted">Read More</a></small> </h4> </div> <div class="col-sm-2"> <a href="#" class="pull-right"><img src="/assets/example/bg_sailboat.jpg" class="img-circle"></a> </div> </div> <div class="col-sm-12" id="stories"> <div class="page-header text-muted divider"> Top Stories </div> </div> <!--/stories--> <div class="row"> <div class="col-sm-10"> <h3>Dramatically Raise the Value of Any Piece of Content</h3> <h4><span class="label label-default">searchenginewatch.com</span></h4><h4> <small class="text-muted">1 hour ago • <a href="#" class="text-muted">Read More</a></small> </h4> </div> <div class="col-sm-2"> <a href="#" class="pull-right"><img src="https://si0.twimg.com/profile_images/2184974868/Fh1LUkrI_bigger" class="img-circle"></a> </div> </div> <div class="row divider"> <div class="col-sm-12"><hr></div> </div> <div class="row"> <div class="col-sm-10"> <h3>14 Useful Sites for Designers</h3> <h4><span class="label label-default">devgarage.com</span></h4><h4> <small class="text-muted">2 days ago • <a href="#" class="text-muted">Read More</a></small> </h4> </div> <div class="col-sm-2"> <a href="#" class="pull-right"><img src="/assets/example/bg_suburb.jpg" class="img-circle"></a> </div> </div> <div class="row divider"> <div class="col-sm-12"><hr></div> </div> <div class="row"> <div class="col-sm-10"> <h3>Bootstrap Builders Get Their Own Playground</h3> <h4><span class="label label-default">bootply.com</span></h4><h4> <small class="text-muted">3 days ago • <a href="#" class="text-muted">Read More</a></small> </h4> </div> <div class="col-sm-2"> <a href="#" class="pull-right"><img src="https://si0.twimg.com/profile_images/3663020003/d09fae59ab68605a7973043e0267b905.jpeg" class="img-circle"></a> </div> </div> <div class="row divider"> <div class="col-sm-12"><hr></div> </div> <div class="row"> <div class="col-sm-10"> <h3>How to: Another Fantastical Article</h3> <h4><span class="label label-default">bootply.com</span></h4><h4> <small class="text-muted">4 days ago • <a href="#" class="text-muted">Read More</a></small> </h4> </div> <div class="col-sm-2"> <a href="#" class="pull-right"><img src="//placehold.it/100" class="img-circle"></a> </div> </div> <div class="row divider"> <div class="col-sm-12"><hr></div> </div> <div class="row"> <div class="col-sm-9"> <h3>Another Fantastical Article of Interest</h3> <h4><span class="label label-default">bootply.com</span></h4><h4> <small class="text-muted">4 days ago • <a href="#" class="text-muted">Read More</a></small> </h4> </div> <div class="col-sm-3"> <a href="#" class="pull-right"><img src="//placehold.it/100" class="img-circle"></a> </div> </div> <div class="col-sm-12"> <div class="page-header text-muted divider"> Up Next </div> </div> <div class="row"> <div class="col-sm-4 text-center"> <h4>Related 1</h4> <a href="#"><img src="//placehold.it/100" class="img-circle"></a> </div> <div class="col-sm-4 text-center"> <h4>Related 2</h4> <a href="#"><img src="//placehold.it/100" class="img-circle"></a> </div> <div class="col-sm-4 text-center"> <h4>Related 3</h4> <a href="#"><img src="//placehold.it/100" class="img-circle"></a> </div> </div> <div class="col-sm-12"> <div class="page-header text-muted divider"> Connect with Us </div> </div> <div class="row"> <div class="col-sm-6"> <a href="#">Twitter</a> <small class="text-muted">|</small> <a href="#">Facebook</a> <small class="text-muted">|</small> <a href="#">Google+</a> </div> </div> <hr> <div class="row" id="footer"> <div class="col-sm-6"> </div> <div class="col-sm-6"> <p> <a href="#" class="pull-right">©Copyright 2013</a> </p> </div> </div> <hr> <h3 class="text-center"> <a href="http://bootply.com/86704" target="ext">Download this Template</a> </h3> <hr> </div><!-- /col-9 --> </div><!-- /padding --> </div> <!-- /main --> </div> </div> </div>
/* move special fonts to HTML head for better performance */ @import url('http://fonts.googleapis.com/css?family=Open+Sans:200,300,400,600,700'); /* custom template */ html, body { height: 100%; font-family:'Open Sans',arial,sans-serif; } a { color:#222222; } .wrapper, .row { height: 100%; margin-left:0; margin-right:0; } .wrapper:before, .wrapper:after, .column:before, .column:after { content: ""; display: table; } .wrapper:after, .column:after { clear: both; } .column { height: 100%; overflow: auto; *zoom:1; } .column .padding { padding: 20px; } .box { bottom: 0; /* increase for footer use */ left: 0; position: absolute; right: 0; top: 0; background-image:url('http://bootply.com/assets/example/bg_suburb.jpg'); background-size:cover; background-attachment:fixed; } .divider { margin-top:32px; } #main { background-color:#fefefe; } #main .img-circle { margin-top:18px; height:70px; width:70px; } #sidebar, #sidebar a { color:#ffffff; background-color:transparent; text-shadow:1px 0 1px #888888; } #sidebar a.logo { display:block; padding:3px; background-color:#fff; color:#777777; height:40px; width:40px; margin:15px; font-size:26px; font-weight:700; text-align:center; text-decoration:none; text-shadow:0 0 0; } #sidebar-footer { position:absolute;bottom:5px; } #footer { margin-bottom:20px; } /* center and adjust the sidebar contents on smaller devices */ @media (max-width: 768px) { #sidebar,#sidebar a.logo { text-align:center; margin:0 auto; margin-top:30px; font-size:26px; } #sidebar a.logo { font-size:50px; height:75px; width:75px; margin-bottom:30px; } } /* bootstrap overrides */ h1,h2,h3 { font-weight:800; font-family:'Open Sans',arial,sans-serif; } .jumbotron { background-color:transparent; } .label-default { background-color:#dddddd; } .page-header { margin-top: 55px; padding-top: 9px; border-top:1px solid #eeeeee; font-weight:700; text-transform:uppercase; letter-spacing:2px; } .col-sm-9.full { width: 100%; } small.text-muted { font-family:courier,courier-new,monospace; }

Related: See More


Questions / Comments: