Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap navbar component

Suggested Video Tutorials
Part 25 - Bootstrap input groups
Part 26 - Bootstrap button in input group
Part 27 - Bootstrap nav component

Bootstrap navbar component is useful for creating responsive navigation header for a website. By responsive, we mean that the navbar is collapsed on small screen size devices like mobile phones. When the toggle button is clicked the navbar expands. However, on large screen devices like laptops and desktops, where we have enough room to display the entire navbar, it appears normal.

Creating responsive navbar : The navbar appears normal on a large screen size devices like laptops, desktops etc.
bootstrap navbar examples

The navbar appears collapsed on a small screen size devices like mobile phones, portrait tablets etc. The navbar expands when the toggle button is clicked.
bootstrap 3 navbar examples

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search" />
            <button type="submit" class="btn btn-default">Submit</button>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Subscribe</a></li>

Useful nvabar classes
Class Purpose
navbar-inverse Modifies the look of the navbar by creating an inverted variation of it
navbar-fixed-top Creates navbar that is fixed on the top of the page
navbar-fixed-bottom Creates navbar that is fixed at the bottom of the page

Please note : 
1. To center and pad navbar content use container or container-fluid classes. 
2. The fixed navbar may cause some of the page content on the top or bottom invisible. To push the content up or down add padding to the top or bottom of the <body> element.

bootstrap tutorial for beginners

1 comment:

  1. World is still beautiful because of some people like you.


If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.