"Bootsnipp - Rework"
Bootstrap 3.1.0 Snippet by msurguy

Post to Facebook Tweet this

<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 ----------> <!-- Head tags to include FontAwesome --> <head> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> </head> <nav class="navbar navbar-default" role="navigation" style="margin-bottom: 0;"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-bootsnipp-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="animbrand"><a class="navbar-brand" href="http://bootsnipp.com">Bootsnipp</a></div> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-bootsnipp-collapse"> <ul class="nav navbar-nav"> <li class=""><a href="http://bootsnipp.com"><span class="glyphicon glyphicon-home"></span> Home</a></li> <li class="dropdown active"> <a href="http://bootsnipp.com/snippets" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-list"></span> Snippets <b class="caret"></b></a> <ul class="dropdown-menu"> <li class="active"><a href="http://bootsnipp.com/snippets/featured"><span class="glyphicon glyphicon-star"></span> Featured</a></li> <li class="divider"></li> <li class=""><a href="http://bootsnipp.com/tags"><span class="glyphicon glyphicon-tags"></span> Tags</a></li> <li class="divider"></li> <li class="dropdown-header">By Bootstrap version:</li> <li><a href="http://bootsnipp.com/tags/3.1.0"><span class="label label-info tip" data-original-title="" title="">3.1.0</span></a></li> <li><a href="http://bootsnipp.com/tags/3.0.3"><span class="label label-info tip" data-original-title="" title="">3.0.3</span></a></li> <li><a href="http://bootsnipp.com/tags/3.0.1"><span class="label label-info tip" data-original-title="" title="">3.0.1</span></a></li> <li><a href="http://bootsnipp.com/tags/3.0.0"><span class="label label-info tip" data-original-title="" title="">3.0.0</span></a></li> <li><a href="http://bootsnipp.com/tags/2.3.2"><span class="label label-info tip" data-original-title="" title="">2.3.2</span></a></li> </ul> </li> <li class="dropdown "> <a href="http://bootsnipp.com/resources" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-book"></span> Resources <b class="caret"></b></a> <ul class="dropdown-menu"> <li class=""><a href="http://bootsnipp.com/blog"><span class="glyphicon glyphicon-pencil"></span> Blog</a></li> <li class=""><a href="http://bootsnipp.com/resources"><span class="glyphicon glyphicon-align-justify"></span> List of resources</a></li> <li><a href="http://getbootstrap.com" target="_blank"><span class="glyphicon glyphicon-cloud-download"></span> Download bootstrap</a></li> <li class="divider"></li> <li class="dropdown-header">Bootstrap Templates</li> <li class=""><a href="http://bootsnipp.com/templates"><span class="glyphicon glyphicon-shopping-cart"></span> Browse templates</a></li> <li class="divider"></li> <li class="dropdown-header">Builders</li> <li class=""><a href="http://bootsnipp.com/forms"><span class="glyphicon glyphicon-tasks"></span> Form Builder</a></li> <li class=""><a href="http://bootsnipp.com/buttons"><span class="glyphicon glyphicon-edit"></span> Button builder</a></li> </ul> </li> <li class=""><a href="http://bootsnipp.com/about"><span class="glyphicon glyphicon-info-sign"></span> About</a></li> </ul> <div class="col-sm-3 col-md-3"> <form class="navbar-form" role="search" action="http://bootsnipp.com/search" method="GET" id="search-form"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search featured snippets" name="q" style="padding:6px 6px;"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> <ul class="nav navbar-nav navbar-right"> <li id="nav-register-btn" class=""><a href="http://bootsnipp.com/register">Register</a></li> <li id="nav-login-btn" class=""><a href="http://bootsnipp.com/login"><i class="icon-login"></i>Login</a></li> </ul> </div><!-- /.navbar-collapse --> </div> </nav> <div class="container" style="margin-top:10px;"> <div class="row"> <div class="col-md-8"> <div class="title-bar"> <a class="avatar-sm-container pull-left" href= "http://bootsnipp.com/mrmccormack" title= "Bootstrap snippets by mrmccormack"><img class= "user-avatar-sm" src= "http://bootsnipp.com/img/avatars/ae924cc6268e5d9141a772778f0a21354efb85e1.jpg"> </a> <button href="#" class="btn btn-lg pull-right" /><i class="fa fa-facebook fa-2x" ></i></button> <button href="#" class="btn btn-lg pull-right" /><i class="fa fa-twitter fa-2x" ></i></button> <h4>"Light-weight spinner indicator (ASCII)"<br> <small>Bootstrap 3.1.0 Snippet by <a href= "http://bootsnipp.com/mrmccormack" title= "Bootstrap snippets by mrmccormack">mrmccormack</a> </small> </h4> <div class="clearfix"></div> </div> <div id="tags" class="pull-right"> <span>Tags</span> <a href="http://bootsnipp.com/tags/3.1.0"><span class="label label-primary">3.1.0</span></a> <a href="http://bootsnipp.com/tags/lists" title="lists"><span class="label label-primary">lists</span></a> <a href="http://bootsnipp.com/tags/layouts" title="layouts"><span class="label label-primary">layouts</span></a> <a href="http://bootsnipp.com/tags/user-interface" title="user interface"><span class="label label-primary">user interface</span></a> </div> <div class="pull-left"> <a href="#" class="btn btn-default tip disabled" title="" data-original-title="Count of views"><i class="fa fa-eye"></i> 8.2K Views</a> <a href="#comments" class="btn btn-default tip" title="" data-original-title="View comments"><i class="fa fa-comments"></i> Comments</a> <a href="#" class="btn btn-default tip fav ladda-button" title="" data-style="expand-right" data-spinner-color="#428bca" data-original-title="Favorite this snippet"><i class="fa fa-heart"></i> Fav</a> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-cog"></span> <span class="caret"></span> </button> <ul class="dropdown-menu pull-right" role="menu"> <li><a href="http://bootsnipp.com/fork/OjQ8" id="reboot" title="" data-original-title="Copy this snippet"><i class="fa fa-code-fork"></i> Fork this</a></li> <li><a href="http://bootsnipp.com/user/snippets/download/OjQ8" target="_blank">Download snippet <span class="glyphicon glyphicon-cloud-download"></span> </a></li> </ul> </div> </div> </div> <div class="col-md-4"> <div id="carbonads-container"> <div class="carbonad pull-right"> <div id="azcarbon"><span class= "carbonad-image"><a href="http://engine.carbonads.com/r?e=eyJhdiI6NTg5MDYsImF0IjoxLCJjbSI6OTI0NjAsImNoIjoxMjA0LCJjciI6MjU5NTYwLCJkaSI6IjVmOTJiMWViYzU0NTQ2N2Y4Yzg1NGY3NDA5MGFmMDBiIiwiZG0iOjEsImZjIjozMjExOTUsImZsIjoxNjYzODMsIm53IjozOSwicGMiOjAuOSwicHIiOjQ0ODIsInJ0IjozLCJzdCI6MTk2MjQsInpuIjowLCJ0cyI6MTM5NTg2Mjc4MzY3MCwidXIiOiJodHRwOi8vc2VuZC5nZXRhcHAuY29tL1NIQnAifQ&s=A8mRAbntKguCDwPAIbTtydG4wmc" target="_blank" title=""><img alt="" border="0" class= "carbonad-image carbonad-img" height="90" src= "http://static.carbonads.com/Advertisers/2c3be4655c7f44c3a08fe50a8b4a18c4.png" title="" width="120"></a></span><span class= "carbonad-text">Custom application metrics and dashboards for <a href= "http://engine.carbonads.com/r?e=eyJhdiI6NTg5MDYsImF0IjoxLCJjbSI6OTI0NjAsImNoIjoxMjA0LCJjciI6MjU5NTYwLCJkaSI6IjVmOTJiMWViYzU0NTQ2N2Y4Yzg1NGY3NDA5MGFmMDBiIiwiZG0iOjEsImZjIjozMjExOTUsImZsIjoxNjYzODMsIm53IjozOSwicGMiOjAuOSwicHIiOjQ0ODIsInJ0IjozLCJzdCI6MTk2MjQsInpuIjowLCJ0cyI6MTM5NTg2Mjc4MzY3MCwidXIiOiJodHRwOi8vc2VuZC5nZXRhcHAuY29tL1NIQnAifQ&s=A8mRAbntKguCDwPAIbTtydG4wmc"> full stack visibility</a>.<img height="1" src= "http://send.getapp.com/aff_i?offer_id=211&aff_id=1097&tiny_url=1" width="1"></span><span class="carbonad-tag">ads via <a href= "http://carbonads.com">Carbon</a></span><img border="0" height="0px" src= "http://engine.carbonads.com/i.gif?e=eyJhdiI6NTg5MDYsImF0IjoxLCJjbSI6OTI0NjAsImNoIjoxMjA0LCJjciI6MjU5NTYwLCJkaSI6IjVmOTJiMWViYzU0NTQ2N2Y4Yzg1NGY3NDA5MGFmMDBiIiwiZG0iOjEsImZjIjozMjExOTUsImZsIjoxNjYzODMsIm53IjozOSwicGMiOjAuOSwicHIiOjQ0ODIsInJ0IjozLCJzdCI6MTk2MjQsInpuIjowLCJ0cyI6MTM5NTg2Mjc4MzY3Mn0&s=nmvaZcrsdMNtRITAqkGZs2E9mX8" width="0px"></div><script type="text/javascript"> var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/19624/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s); </script> </div> </div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="btn-group"> <button href="http://bootsnipp.com/fullscreen/OjQ8" class= "btn btn-info" target="_blank">View Full Screen <span class="glyphicon glyphicon-fullscreen"></span></button> <button class="active btn btn-info" id="show-preview" type="button">Preview</button> <button class= "btn btn-info" id="show-html" type= "button">HTML</button> <button class="btn btn-info" id= "show-css" type="button">CSS</button> <button class= "btn btn-info" id="show-js" type="button">JS</button> </div> </div> <div class="col-md-3"> <div class="row"> <div class="col-md-4 text-right" style="padding-top:5px;"> <p>Theme <a class="tip" data-original-title= "You can preview snippets using a theme from Bootswatch" data-placement="bottom" data-toggle="tooltip" href="#" title=""></a>:</p> </div> <div class="col-md-8"> <select class="form-control" id="theme_chooser" name= "bootstrap-theme"> <option value=""> Plain Bootstrap </option> <option value= "//netdna.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css"> Amelia </option> <option value= "//netdna.bootstrapcdn.com/bootswatch/3.1.1/cerulean/bootstrap.min.css"> Cerulean </option> <option value= "//netdna.bootstrapcdn.com/bootswatch/3.1.1/cosmo/bootstrap.min.css"> Cosmo </option> <option value= "//netdna.bootstrapcdn.com/bootswatch/3.1.1/cyborg/bootstrap.min.css"> Cyborg </option> <option value= "//netdna.bootstrapcdn.com/bootswatch/3.1.1/flatly/bootstrap.min.css"> Flatly </option> <option value= "//netdna.bootstrapcdn.com/bootswatch/3.1.1/journal/bootstrap.min.css"> Journal </option> <option value= "//netdna.bootstrapcdn.com/bootswatch/3.1.1/lumen/bootstrap.min.css"> Lumen </option> <option value= "//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css"> Readable </option> <option value= "//netdna.bootstrapcdn.com/bootswatch/3.1.1/simplex/bootstrap.min.css"> Simplex </option> <option value= "//netdna.bootstrapcdn.com/bootswatch/3.1.1/slate/bootstrap.min.css"> Slate </option> <option value= "//netdna.bootstrapcdn.com/bootswatch/3.1.1/spacelab/bootstrap.min.css"> Spacelab </option> <option value= "//netdna.bootstrapcdn.com/bootswatch/3.1.1/superhero/bootstrap.min.css"> Superhero </option> <option value= "//netdna.bootstrapcdn.com/bootswatch/3.1.1/united/bootstrap.min.css"> United </option> <option value= "//netdna.bootstrapcdn.com/bootswatch/3.1.1/yeti/bootstrap.min.css"> Yeti </option> <option value= "//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css"> Darkly </option> </select> </div> </div> </div> </div> </div>
.navbar-default { background-color: #A2A5A9; color: #fff; } .navbar-default .navbar-brand { color: #fff; } .navbar-default .navbar-nav>li>a { color: #FFFFFF; } .user-avatar-sm { width: 40px; height: 40px; border-radius: 20%; border: 2px #fff solid; } .title-bar { background-color: #f5f5f5; padding: 0px; margin-bottom: 10px; } .title-bar > h4, .title-bar > a { padding: 10px; margin: 0px; } .title-bar button { border-radius: 0px; position: relative; vertical-align: center; margin: 0px; height: 60px; min-width:60px; padding: 10px; font-size: 22px; color: #62b1d0; text-align: center; background: #e4e4e4; border: 0; cursor: pointer; } .title-bar button:hover { color: white; background: #62b1d0; }

Related: See More

Navbar With Icons
Simple login form - Bootsnipp style colorgraph
Thumbnails like Bootsnipp

Questions / Comments:

Looks good :) A little polishing and BAM!

Brian Moeller () - 10 years ago - Reply 0

Thank you so much for this! I already hear some positive feedback about the redesign and I like it a lot. What's your Twitter handle/website (if you have one)? I'd like to give you some credit :)

maxsurguy () - 10 years ago - Reply 0

My twitter handle is @theBrianMoeller, but I must confess I don't use it all that often :) Thanks for the shout out though, just glad you liked it and helped improve the site usability.

Brian Moeller () - 10 years ago - Reply 0

Cool, the redesign is long overdue and I've been quite busy with publishing a book about back end framework so this is some real help you've done for Bootsnipp. I've sent you a DM with a coupon for Bootsnipp sticker :) feel free to use it if you like having stickers.

maxsurguy () - 10 years ago - Reply 0

Sweet! Thanks

Brian Moeller () - 10 years ago - Reply 0