Bootstrap List Group

Bootstrap List Group

<ul class="list-group"> <li class="list-group-item">Free Domain Name Registration</li> <li class="list-group-item">Free Window Space hosting</li> <li class="list-group-item">Number of Images</li> <li class="list-group-item">24*7 support</li> <li class="list-group-item">Renewal cost per year</li> </ul>

Adding Badges to List Group

<ul class="list-group"> <li class="list-group-item">Free Domain Name Registration</li> <li class="list-group-item">Free Window Space hosting</li> <li class="list-group-item">Number of Images</li> <li class="list-group-item"> <span class="badge">New</span> 24*7 support </li> <li class="list-group-item">Renewal cost per year</li> <li class="list-group-item"> <span class="badge">New</span> Disocunt Offer </li> </ul>

Linking List Group Items

<a href="#" class="list-group-item active"> Free Domain Name Registration </a> <a href="#" class="list-group-item">24*7 support</a> <a href="#" class="list-group-item">Free Window Space hosting</a> <a href="#" class="list-group-item">Number of Images</a> <a href="#" class="list-group-item">Renewal cost per year</a>


Add Custom Content to List Group

<div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading"> Starter Website Package </h4> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> Free Domain Name Registration </h4> <p class="list-group-item-text"> You will get a free domain registration with website pages. </p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> 24*7 support </h4> <p class="list-group-item-text"> We provide 24*7 support. </p> </a> </div> <div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading"> Business Website Package </h4> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> Free Domain Name Registration </h4> <p class="list-group-item-text"> You will get a free domain registration with website pages. </p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> 24*7 support</h4> <p class="list-group-item-text"> We provide 24*7 support.</p> </a> </div>

Bootstrap Media Object

Bootstrap Media Object

<div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="img/faceless.jpg" alt="Media Object"> </a> <div class="media-body"> <h4 class="media-heading"> Media heading</h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </div> </div> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="img/faceless.jpg" alt="Media Object"> </a> <div class="media-body"> <h4 class="media-heading"> Media heading</h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="img/faceless.jpg" alt="Media Object"> </a> <div class="media-body"> <h4 class="media-heading"> Media heading</h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </div> </div> </div> </div>

Bootstrap Media Object 2nd-example

<ul class="media-list"> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src="img/faceless.jpg" alt="Generic placeholder image"> </a> <div class="media-body"> <h4 class="media-heading"> Media heading</h4> <p> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p> <!-- Nested media object --> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="img/faceless.jpg" alt="Generic placeholder image"> </a> <div class="media-body"> <h4 class="media-heading"> Nested media heading</h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. <!-- Nested media object --> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="img/faceless.jpg" alt="Generic placeholder image"> </a> <div class="media-body"> <h4 class="media-heading"> Nested media heading</h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </div> </div> </div> </div> <!-- Nested media object --> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="img/faceless.jpg" alt="Generic placeholder image"> </a> <div class="media-body"> <h4 class="media-heading"> Nested media heading</h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </div> </div> </div> </li> <li class="media"> <a class="pull-right" href="#"> <img class="media-object" src="img/faceless.jpg" alt="Generic placeholder image"> </a> <div class="media-body"> <h4 class="media-heading"> Media heading</h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </div> </li> </ul>

Bootstrap Progress Bars

Bootstrap Progress Bars

<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span class="sr-only">40% Complete</span> </div> </div>

Alternate Progress Bar

<div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"> <span class="sr-only">30% Complete (info)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> <span class="sr-only">20%Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"> <span class="sr-only">10% Complete (danger)</span> </div> </div>

Striped Progress Bar

<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> <span class="sr-only">90% Complete (Sucess)</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" role="progressbar"aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> <span class="sr-only">90% Complete (Sucess)</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"> <span class="sr-only">30% Complete (info)</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> <span class="sr-only">20%Complete (warning)</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"> <span class="sr-only">10% Complete (danger)</span> </div> </div>

Animated Progress Bar

<div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span class="sr-only">40% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span class="sr-only">40% Complete</span> </div> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"> <span class="sr-only">30% Complete (info)</span> </div> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> <span class="sr-only">20%Complete (warning)</span> </div> </div>

Bootstrap Alerts

Bootstrap Alerts

<div class="alert alert-success"> Success! Well done its submitted.</div> <div class="alert alert-info"> Info! take this info.</div> <div class="alert alert-warning"> Warning ! Dont submit this.</div> <div class="alert alert-danger"> Error ! Change few things.</div>

Dismissal Alerts

<div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> Success! Well done its submitted. </div> <div class="alert alert-info alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> Info! take this info. </div> <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> Warning ! Dont submit this. </div> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> Error ! Change few things. </div>

Links in Alerts

<div class="alert alert-success"> <a href="#" class="alert-link">Success! Well done its submitted.</a> </div> <div class="alert alert-info"> <a href="#" class="alert-link">Info! take this info.</a> </div> <div class="alert alert-warning"> <a href="#" class="alert-link">Warning ! Dont submit this.</a> </div> <div class="alert alert-danger"> <a href="#" class="alert-link">Error ! Change few things.</a> </div>

Bootstrap Thumbnails

Bootstrap Thumbnails

<div class="row"> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="img/pool.jpg" alt="Generic placeholder thumbnail"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="img/pool.jpg" alt="Generic placeholder thumbnail"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="img/pool.jpg" alt="Generic placeholder thumbnail"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="img/pool.jpg" alt="Generic placeholder thumbnail"> </a> </div> </div>

Adding Custom Content

<div class="row"> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="img/pool.jpg" alt="Generic placeholder thumbnail"> </div> <div class="caption"> <h3> Thumbnail label</h3> <p> Some sample text. Some sample text.</p> <p> <a href="#" class="btn btn-primary" role="button"> Button </a> <a href="#" class="btn btn-default" role="button"> Button </a> </p> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="img/pool.jpg" alt="Generic placeholder thumbnail"> </div> <div class="caption"> <h3> Thumbnail label</h3> <p> Some sample text. Some sample text.</p> <p> <a href="#" class="btn btn-primary" role="button"> Button </a> <a href="#" class="btn btn-default" role="button"> Button </a> </p> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="img/pool.jpg" alt="Generic placeholder thumbnail"> </div> <div class="caption"> <h3> Thumbnail label</h3> <p> Some sample text. Some sample text.</p> <p> <a href="#" class="btn btn-primary" role="button"> Button </a> <a href="#" class="btn btn-default" role="button"> Button </a> </p> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="img/pool.jpg" alt="Generic placeholder thumbnail"> </div> <div class="caption"> <h3> Thumbnail label</h3> <p> Some sample text. Some sample text.</p> <p> <a href="#" class="btn btn-primary" role="button"> Button </a> <a href="#" class="btn btn-default" role="button"> Button </a> </p> </div> </div> </div>

Bootstrap Labels

Bootstrap Labels
Simple-Labels

<h1> Example Heading <span class="label label-default">Label</span></h1> <h2> Example Heading <span class="label label-default">Label</span></h2> <h3> Example Heading <span class="label label-default">Label</span></h3> <h4> Example Heading <span class="label label-default">Label</span></h4>

Label-with-color

<span class="label label-default">Default Label</span> <span class="label label-primary">Primary Label</span> <span class="label label-success">Success Label</span> <span class="label label-info">Info Label</span> <span class="label label-warning">Warning Label</span> <span class="label label-danger">Danger Label</span>

Bootstrap Badges

Badges are similar to labels; the primary difference is that the corners are more rounded.
 Badges are mainly used to highlight new or unread items.

 To use badges just add <span class="badge"> to links, Bootstrap navs, and more.

<a href="#">Mailbox <span class="badge">50</span></a>

Active nav states

<h4> Example for Active State in Pill </h4> <ul class="nav nav-pills"> <li class="active"><a href="#">Home <span class="badge">42</span></a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages <span class="badge">3</span></a></li> </ul> <br> <h4> Example for Active State in navigations</h4> <ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span> Home </a> </li> <li><a href="#">Profile</a></li> <li> <a href="#"> <span class="badge pull-right">3</span> Messages</a> </li> </ul>

Bootstrap Jumpotron

<div class="container"> <div class="jumbotron"> <h1> Welcome to landing page!</h1> <p> This is an example for jumbotron.</p> <p> <a class="btn btn-primary btn-lg" role="button"> Learn more</a> </p> </div> </div>


Bootstrap Page Header

<div class="page-header"> <h1> Example page header <small>Subtext for header</small> </h1> </div> <p> This is a sample text.This is a sample text.This is a sample text. This is a sample text.</p>

Pager

Pager
DEFAULT PAGER

<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul>

ALIGNED LINKS

<ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>

STATES

<ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>