Twitter Bootstrap Component
1. Dropdowns
Dropdown Component creates contextual menus with list of links using dropdown plug-in. Dropdown is triggered by dropdown class. Dropdown automatically aligned left top of the screen. .dropdown-menu-right class aligns menu to right side of the screen.
Code
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">Dropdown header</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Dropdown list 1</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Dropdown list 2</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">Dropdown header 1</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Dropdown list 3</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Dropdown list 4</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Dropdown list 5</a></li> </ul> </div>
Output
2. Button Group
Button Group merges series of buttons on a single line using .btn and .btn-group classes. We can adjust size of button by using btn-group-lg, btn-group-sm and btn-group-xs classes. .btn-group allows nesting properties that means a btn.group class inserted into anoter .btn-group. .btn-group vertically aligned by btn-group-vertical class and justified by btn-group-justified class.
Code
<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <button type="button" class="btn btn-default">Button 3</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <button type="button" class="btn btn-default">Button 3</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <button type="button" class="btn btn-default">Button 3</button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <button type="button" class="btn btn-default">Button 3</button> </div> <b>Nesting</b> <div class="btn-group"> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <div class="btn-group"> <button type="button" class="btn btn-default">Button 3</button> <button type="button" class="btn btn-default">Button 4</button> </div> </div> <b>Justified Button Groups</b> <div class="btn-group btn-group-justified"> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <button type="button" class="btn btn-default">Button 3</button> </div> <b>Vertical Button Groups</b> <div class="btn-group btn-group-vertical"> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <button type="button" class="btn btn-default">Button 3</button> </div>
Output
Nesting
Justified Button Groups
Vertical Button Groups
3. Button Dropdown
Button dropdown is created by btn-group and dropdown plugins.
Code
<b>Single Button Dropdowns</b> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown 1</a></li> <li><a href="#">Dropdown 2</a></li> </ul> </div> <b>Split Button Dropdowns</b> <div class="btn-group"> <button type="button" class="btn btn-default">Dropdown</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown 1</a></li> <li><a href="#">Dropdown 2</a></li> </ul> </div> <b> Button Dropup</b> <div class="btn-group dropup"> <button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </div>
Output
Single Button DropdownsSplit Button Dropdowns
Button Dropup
4. Navs
Navs are used to create navigation frome one page to another using .nav class.
4.1. Tabs
Tab element is created by using .nav-tabs class.
Code
<ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#panel1" data-toggle="tab">Tab1</a></li> <li><a href="#panel2" data-toggle="tab">Tab2</a></li> <li><a href="#panel3" data-toggle="tab">Tab3</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane active" id="panel1"> <p>Content of Panel1.........</p> </div> <div class="tab-pane" id="panel2"> <p>Content of Panel2.........</p> </div> <div class="tab-pane" id="panel3"> <p>Content of Panel3.........</p> </div> </div>
Output
Content of Panel1.........
Content of Panel2.........
Content of Panel3.........
4.2. Pills
Pills are designed by using .nav-pills class.
Code
<ul class="nav nav-pills"> <li class="active"><a href="#panel1" data-toggle="pill">pill1</a></li> <li><a href="#panel2" data-toggle="pill">pill2</a></li> <li><a href="#panel3" data-toggle="pill">pill3</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="panel1"> <p>Content of Panel1.........</p> </div> <div class="tab-pane" id="panel2"> <p>Content of Panel2.........</p> </div> <div class="tab-pane" id="panel3"> <p>Content of Panel3.........</p> </div> </div>
Output
Content of Panel1.........
Content of Panel2.........
Content of Panel3.........
4.3. NavBar
Default Navbar creates horizontal navigation headers for your site.
Code
<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#exampleNavbarCollapse"> <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="#">Brand</a> </div> <div class="collapse navbar-collapse" id="exampleNavbarCollapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="#"><a href="#">About Us</a></li> <li class="#"><a href="#">Contact Us</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Login</a></li> </ul> </div> </div> </nav>
Output
4.4 Inverted NavBar
Default Navbar creates horizontal navigation headers with different look for your site.
Code
<nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#exampleNavbarCollapse"> <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="#">Brand</a> </div> <div class="collapse navbar-collapse" id="exampleNavbarCollapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="#"><a href="#">About Us</a></li> <li class="#"><a href="#">Contact Us</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Login</a></li> </ul> </div> </div> </nav>
Output
4.5 Breadcrumbs
Breadcrumbs represent current page's location using navigational hierarchy.
Code
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Html Tutorial</a></li> <li class="active">Html Table</li> </ol>
Output
4.6 Pagination and Pager
Pagination navigate multi-pages using pagination links. Pager used to navigate previous and next links.
Code
<b>Pagination</b> <ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><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> <b>Pager</b> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul>
Output
Pagination Pager5. Thumbnails
Thumbnail component used to show grids of images, videos, text, and more.
6. Progress Bars
Bootstrap offers feedback on the progress of a workflow with simple flexible progress bars.
Code
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">80% Complete</span> </div> </div>
Output
7. List Group
List group displays styled list of elements with complex content.
Code
<ul class="list-group"> <li class="list-group-item list-group-item-success">List Group Item Success</li> <li class="list-group-item list-group-item-info">List Group Item Info</li> <li class="list-group-item list-group-item-warning">List Group Item Warning</li> <li class="list-group-item list-group-item-danger">List Group Item Danger</li> <li class="list-group-item active">List Group Item Active</li> <li class="list-group-item disabled">List Group Item Active</li> </ul>
Output
- List Group Item Success
- List Group Item Info
- List Group Item Warning
- List Group Item Danger
- List Group Item Active
- List Group Item Active
8. Panel
List group displays styled list of elements with complex content.
Code
<div class="panel panel-default"> <div class="panel-heading">Panel heading</div> <div class="panel-body">Panel content</div> <div class="panel-footer">Panel footer</div> </div>