Free Advanced Web Design Tutorials

Twitter Bootstrap Component

Content
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 Dropdowns

Split Button Dropdowns

Button Dropup


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.........

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

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
  1. Home
  2. Html Tutorial
  3. Html Table
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 Pager
5. Thumbnails

Thumbnail component used to show grids of images, videos, text, and more.

...
Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Button Button

...
Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Button Button

...
Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Button Button

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
80% Complete
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>
Output
Panel heading
Panel content
Panel footer