Bootstrap Navbar - Bootstrap Material

11.11 Bootstrap Navbar

Example:

<button type="button" data-target="#navbarCollapse" data-toggle="collapse"

class="navbar-toggle">

<span class="sr-only">Toggle navigation</span>

</button>

<a href="#" class="navbar-brand">Brand</a>

</div>

<li><a href="#">Profile</a></li>

<li><a href="#">Messages</a></li>

</ul>

<li><a href="#">Login</a></li>

</ul>

</div>

</nav>

OUTPUT:

You can also include dropdowns and search form within navbars.

Example:

<button type="button" data-target="#navbarCollapse" data-toggle="collapse"

class="navbar-toggle">

<span class="sr-only">Toggle navigation</span>

</button>

<a href="#" class="navbar-brand">Brand</a>

</div>

<li><a href="#">Profile</a></li>

<a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages

<li><a href="#">Inbox</a></li>

<li><a href="#">Drafts</a></li>

<li><a href="#">Sent Items</a></li>

<li><a href="#">Trash</a></li>

</ul>

</li>

</ul>

</div>

</form>

<li><a href="#">Login</a></li>

</ul>

</div>

</nav>

OUTPUT:

Note:To create navbars that is not fixed on the top, place it anywhere within a.container, which sets the width of your site and content.

Creating Navbar Fixed to Top

Add an extra class .navbar-fixed-top in addition to the .navbar and .navbardefaultbase class to create navbars that is fixed on the top.

Example:

<button type="button" data-target="#navbarCollapse" data-toggle="collapse"

class="navbar-toggle">

Tip:Place the fixed .navbar content inside the .container or .container-fluidfor proper

padding and alignment with the rest of the content.

Bootstrap Inverted Navbar

Example:

<button type="button" data-target="#navbarCollapse" data-toggle="collapse"

class="navbar-toggle">

<span class="sr-only">Toggle navigation</span>

</button>

<a href="#" class="navbar-brand">Brand</a>

</div>

<li><a href="#">Profile</a></li>

<a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages

Introducing Bootstrap 3 Panels

Panels with Heading

You can also add a heading to your panel with .panel-heading class.

Example:

<div class="panel-heading">This Page is Disabled</div>

<div class="panel-body">This page is temporarily disabled by the site administrator for some reason.<br> <a href="#">Click here</a> to enable the page.</div> </div>

OUTPUT:

You can also include heading elements from <h1> to <h6> with a .panel-title class.

Example:

<h1 class="panel-title">Panel Title</h1>

</div>

<div class="panel-body">Panel content…</div>

</div>

OUTPUT:

Panels with Contextual States

Example:

<h3 class="panel-title">301 Moved Permanently</h3>

</div>

<div class="panel-body">The requested page has been permanently moved to a new location.</div>

</div>

</div>

<div class="panel-body">The server successfully processed the request.</div>

</div>

<h3 class="panel-title">100 Continue</h3>

</div>

<div class="panel-body">The client should continue with its request.</div> </div>

<h3 class="panel-title">400 Bad Request</h3>

</div>

<div class="panel-body">The request cannot be fulfilled due to bad syntax.</div>

</div>

<h3 class="panel-title">503 Service Unavailable</h3>

</div>

<div class="panel-body">The server is temporarily unable to handle the request.</div>

</div>

OUTPUT:

Placing Tables and List Groups inside Panels

You can add any non-bordered table within a panel to create more informative tables.

Example:

<div class="panel-heading">User Information</div>

<p>The following table contains some personal information about users.</p>

</div>

<thead>

<tr>

<th>First Name</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>Carter</td>

<td>[email protected]</td>

</tr>

<tr>

<td>Peter</td>

<td>Parker</td>

<td>[email protected]</td>

</tr>

<tr>

<td>Rambo</td>

<td>[email protected]</td>

</tr>

</tbody>

</table>

</div>

OUTPUT:

Similarly you can include full-width list groups within any panel.

Example:

<div class="panel-heading">Products</div>

<p>The following products are currently available on our store.</p>

</div>

<a href="#" class="list-group-item">Mobile Phones <span class="badge">50</span>

</a>

<a href="#" class="list-group-item">Laptops & Desktops <span class="badge">145</span>

</a>

<a href="#" class="list-group-item">Tablets <span class="badge">30</span>

</a>

<a href="#" class="list-group-item">Audio & Video Players <span class="badge">65</span>

</a>

<a href="#" class="list-group-item">Camera <span class="badge">8</span>

</a>

</div>

OUTPUT:

11.12 Breadcrumbs

Example

Try this code »

<li><a href="#">Products</a></li>

<li class="active">Accessories</li>

</ul>

OUTPUT

11.12 Pagination

Pagination with Disabled and Active States Example:

</ul>

</ul>

</ul>

</ul>

OUTPUT:

Note: The .disabled class only displays links as it disabled it doesn't remove the click functionality, to do this you can swap active or disabled anchors with spans.

Changing the Sizes of Pagination Example:

Bootstrap Pager Alignment of Pager

By default pager are aligned horizontally center but you align previous link to left and next link right using the class .previous and .next respectively.

Example

Try this code »

<li class="previous"><a href="#">← Previous</a></li>

</ul>

OUTPUT:

You can also apply the same pagination classes .disabled and .active to the pager.

Example

Try this code »

<li class="previous disabled"><a href="#">← Previous</a></li>

</ul>

OUTPUT:

11.13 Labels and Badges

Example

Try this code »

<span class="label label-default">Default</span>

<span class="label label-primary">Primary</span> <span class="label label-success">Success</span>

<span class="label label-warning">Warning</span>

<span class="label label-danger">Danger</span>

OUTPUT:

Creating Inline Badges

Similarly you can create inline badges to provide important notification to the user such as number received or unread messages, number of friend requests etc. They're most commonly found in email client and social networking websites.

Example

Try this code »

<li><a href="#">Profile</a></li>

<li class="active"><a href="#">Messages <span class="badge">24</span></a></li>

<li><a href="#">Notification <span class="badge">5</span></a></li> </ul>

OUTPUT:

11.14 Progress Bar

Creating Stripped Progress Bar Example:

In document Bootstrap Material (Page 34-48)