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>

Bootstrap Pagination

Bootstrap Pagination

---DEFAULT PAGINATION--

<ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul>


STATES

<ul class="pagination"> <li><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li class="disabled"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul>

SIZING

<ul class="pagination pagination-lg"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> <br> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> <br> <ul class="pagination pagination-sm"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul>

Bootstrap Breadcrumb

Bootstrap Breadcrumb:-

Breadcrumbs are a great way to show hierarchy-based information for a site.
In the case of blogs, breadcrumbs can show the dates of publishing, categories, or tags.
 They indicate the current page's location within a navigational hierarchy.
 A breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb.

The separator is automatically added by CSS (bootstrap.min.css) through the following class:

<ol class="breadcrumb"> <li><a href="#">Dashboard</a></li> <li><a href="#">2015</a></li> <li class="active">Jan</li> </ol>

Component alignment

Component alignment

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web design</a> </div> <div> <!--Left Align--> <ul class="nav navbar-nav navbar-left"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> UI <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">UX</a></li> <li><a href="#">Images</a></li> <li><a href="#">GUI</a></li> <li class="divider"></li> <li><a href="#">Images</a></li> <li class="divider"></li> <li><a href="#">Colors</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <button type="submit" class="btn btn-default"> Left align-Submit Button </button> </form> <p class="navbar-text navbar-left"> Left align-Text</p> <!--Right Align--> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Design <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Image</a></li> <li><a href="#">Design</a></li> <li><a href="#">Pattern</a></li> <li class="divider"></li> <li><a href="#">Looks</a></li> <li class="divider"></li> <li><a href="#">Frontend</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <button type="submit" class="btn btn-default"> Right align-Submit Button </button> </form> <p class="navbar-text navbar-right"> Right align-Text</p> </div> </nav>

Fixed to top

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">UI</a></li> <li><a href="#">UX</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Images <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Cursor</a></li> <li><a href="#">Points</a></li> <li><a href="#">Colors</a></li> <li class="divider"></li> <li><a href="#">Alignments</a></li> <li class="divider"></li> <li><a href="#">Objects</a></li> </ul> </li> </ul> </div> </nav>

Fixed to bottom

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Icons</a></li> <li><a href="#">Images</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Objects <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Points</a></li> <li><a href="#">Actions</a></li> <li><a href="#">Events</a></li> <li class="divider"></li> <li><a href="#">Animations</a></li> <li class="divider"></li> <li><a href="#">Effects</a></li> </ul> </li> </ul> </div> </nav>

Static top

<nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Icons</a></li> <li><a href="#">Images</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Fonts <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Colors</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Alignments</a></li> <li class="divider"></li> <li><a href="#">Contents</a></li> <li class="divider"></li> <li><a href="#">Seo</a></li> </ul> </li> </ul> </div> </nav>

Inverted navbar

<nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Icons</a></li> <li><a href="#">Fonts</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Colors <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Alignments</a></li> <li><a href="#">Images</a></li> <li><a href="#">Colors</a></li> <li class="divider"></li> <li><a href="#">Mark</a></li> <li class="divider"></li> <li><a href="#">All Contents</a></li> </ul> </li> </ul> </div> </nav>

Bootstrap Navbar

Bootstrap Navbar

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Design</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">GUI</a></li> <li><a href="#">UI</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> UX <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Colors</a></li> <li><a href="#">Images</a></li> <li><a href="#">Code</a></li> <li class="divider"></li> <li><a href="#">frontend</a></li> <li class="divider"></li> <li><a href="#">Backend</a></li> </ul> </li> </ul> </div> </nav>

Responsive navbar

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">Web Design</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">UI</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">UX</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Images <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Colors</a></li> <li><a href="#">Alignments</a></li> <li><a href="#">Design</a></li> <li class="divider"></li> <li><a href="#">Frontend</a></li> <li class="divider"></li> <li><a href="#">Backends</a></li> </ul> </li> </ul> </div> </nav>

Forms in navbar

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <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> </div> </nav>


Buttons in navbar

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <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</button> </form> <button type="button" class="btn btn-default navbar-btn"> Navbar Button </button> </div> </nav>

Text in navbar

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <p class="navbar-text"> Welcome Web</p> </div> </nav>

Non-nav links

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <p class="navbar-text navbar-right"> Signed in as <a href="#" class="navbar-link">Web</a> </p> </div> </div>

Bootstrap Input Groups

Bootstrap Input Groups

<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="twitterhandle"> </div> <br> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <br> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span>

Input Group Sizing

<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="input-group input-group-lg"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Twitterhandle"> </div> <br> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Twitterhandle"> </div> <br> <div class="input-group input-group-sm"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Twitterhandle"> </div> </form> </div>


Checkboxes and radio addons

<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input type="text" class="form-control"> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --><br> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="radio"> </span> <input type="text" class="form-control"> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --> </div> <!-- /.row --> </form> </div>


Button addons

<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button"> Go! </button> </span> <input type="text" class="form-control"> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --> <br> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button"> Go! </button> </span> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --> </div> <!-- /.row --> </form> </div>

Buttons with dropdowns

<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> DropdownMenu <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <!-- /btn-group --> <input type="text" class="form-control"> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --> <br> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> DropdownMenu <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <!-- /btn-group --> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --> </div> <!-- /.row --> </form> </div>

Segmented buttons

<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default" tabindex="-1">Dropdwon Menu </button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <!-- /btn-group --> <input type="text" class="form-control"> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --><br> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-default" tabindex="-1">Dropdwon Menu </button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <!-- /btn-group --> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --> </div> <!-- /.row --> </form> </div>

Bootstrap Navigation Elements

<p> Tabs</p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li><a href="#">UX</a></li> <li><a href="#">GUI</a></li> <li><a href="#">Alignment</a></li> <li><a href="#">Colors</a></li> </ul>

Pills Navigation-------BASIC PILLS

<ul class="nav nav-pills"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li><a href="#">UX</a></li> <li><a href="#">GUI</a></li> <li><a href="#">Alignment</a></li> <li><a href="#">Colors</a></li> </ul>

VERTICLE PILLS

<p> Vertical Pills </p> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Design</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Objects</a></li> <li><a href="#">Colors</a></li> <li><a href="#">Alignment</a></li> <li><a href="#">Works</a></li> </ul>

Justified Nav

<p> Justified Nav Elements</p> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li><a href="#">UX</a></li> <li><a href="#">GUI</a></li> <li><a href="#">Colors</a></li> <li><a href="#">Alignment</a></li> </ul> <br> <br> <br> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li><a href="#">UX</a></li> <li><a href="#">GUI</a></li> <li><a href="#">Colors</a></li> <li><a href="#">Alignment</a></li> </ul>

Disabled Links

<p> Disabled Link </p> <ul class="nav nav-pills"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li class="disabled"><a href="#">UX(disabled link)</a></li> <li><a href="#">GUI</a></li> <li><a href="#">Alignment</a></li> <li><a href="#">Colors</a></li> </ul> <br> <br> <ul class="nav nav-tabs"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li><a href="#">UX</a></li> <li class="disabled"><a href="#">Alignment(disabled link)</a></li> <li><a href="#">GUI</a></li> <li><a href="#">Colors</a></li> </ul>

-------------DROPDOWNS-------------------------TABS WITH DROPDOWNS-------------------------

<p> Tabs With Dropdown </p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li><a href="#">UX</a></li> <li><a href="#">GUI</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">WEB</a></li> <li><a href="#">Design</a></li> <li><a href="#">Images</a></li> <li class="divider"></li> <li><a href="#">Icons</a></li> </ul> </li> <li><a href="#">Code</a></li> </ul>

PILLS WITH DROPDOWNS

<p> Pills With Dropdown </p> <ul class="nav nav-pills"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li><a href="#">iOS</a></li> <li><a href="#">UX</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> GUI <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Images</a></li> <li><a href="#">Icons</a></li> <li><a href="#">Colors</a></li> <li class="divider"></li> <li><a href="#">Frontend</a></li> </ul> </li> <li><a href="#">code</a></li> </ul>