Bootstrap Tutorial
Bootstrap with CSS
Bootstrap Layout Components
Bootstrap Plugins
Bootstrap Demos
Bootstrap Useful Resources
Selected Reading
Bootstrap with CSS
- Bootstrap - Responsive utilities
- Bootstrap - Helper Classes
- Bootstrap - Images
- Bootstrap - Buttons
- Bootstrap - Forms
- Bootstrap - Tables
- Bootstrap - Code
- Bootstrap - Typography
- Bootstrap - CSS Overview
- Bootstrap - Grid System
Bootstrap Layout Components
- Bootstrap - Wells
- Bootstrap - Panels
- Bootstrap - List Group
- Bootstrap - Media Object
- Bootstrap - Progress Bars
- Bootstrap - Alerts
- Bootstrap - Thumbnails
- Bootstrap - Page Header
- Bootstrap - Jumbotron
- Bootstrap - Badges
- Bootstrap - Labels
- Bootstrap - Pagination
- Bootstrap - Breadcrumb
- Bootstrap - Navbar
- Bootstrap - Navigation Elements
- Bootstrap - Input Groups
- Bootstrap - Button Dropdowns
- Bootstrap - Button Groups
- Bootstrap - Dropdowns
- Bootstrap - Glyphicons
Bootstrap Plugins
- Bootstrap - Affix Plugin
- Bootstrap - Carousel Plugin
- Bootstrap - Collapse Plugin
- Bootstrap - Button Plugin
- Bootstrap - Alert Plugin
- Bootstrap - Popover Plugin
- Bootstrap - Tooltip Plugin
- Bootstrap - Tab Plugin
- Bootstrap - Scrollspy Plugin
- Bootstrap - Dropdown Plugin
- Bootstrap - Modal Plugin
- Bootstrap - Transition Plugin
- Bootstrap - Plugins Overview
Bootstrap Demos
- Bootstrap - featured Demo
- Bootstrap - Icons Demo
- Bootstrap - Social Icons Demo
- Bootstrap - Calendar Demo
- Bootstrap - Map Demo
- Bootstrap - Caption Demo
- Bootstrap - Tabbed slider Demo
- Bootstrap - Ajax Demo
- Bootstrap - Admin Interface Demo
- Bootstrap - Alert Demo
- Bootstrap - Time line Demo
- Bootstrap - Slider Demo
- Bootstrap - Material Design Demo
- Bootstrap - Blog Demo
- Bootstrap - Navigation Demo
- Bootstrap - Responsive Demo
- Bootstrap - Images Demo
- Bootstrap - Buttons Demo
- Bootstrap - Form Demo
- Bootstrap - Table Demo
- Bootstrap - Grid Demo
Bootstrap Useful Resources
- Bootstrap - Discussion
- Bootstrap - Useful Resources
- Bootstrap - Quick Guide
- Bootstrap - Questions and Answers
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Bootstrap - Navbar
Bootstrap - Navbar
The navbar is one of the prominent features of Bootstrap sites. Navbars are responsive meta components that serve as navigation headers for your apppcation or site. Navbars collapse in mobile views and become horizontal as the available viewport width increases. At its core, the navbar includes stypng for site names and basic navigation.
Default Navbar
To create a default navbar −
Add the classes .navbar, .navbar-default to the <nav> tag.
Add role = "navigation" to the above element, to help with accessibipty.
Add a header class .navbar-header to the <span> element. Include an <a> element with class navbar-brand. This will give the text a spghtly larger size.
To add pnks to the navbar, simply add an unordered pst with the classes of .nav, .navbar-nav.
The following example demonstrates this −
<nav class = "navbar navbar-default" role = "navigation">
<span class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</span>
<span>
<ul class = "nav navbar-nav">
<p class = "active"><a href = "#">iOS</a></p>
<p><a href = "#">SVN</a></p>
<p class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<p><a href = "#">jmeter</a></p>
<p><a href = "#">EJB</a></p>
<p><a href = "#">Jasper Report</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
<p class = "spanider"></p>
<p><a href = "#">One more separated pnk</a></p>
</ul>
</p>
</ul>
</span>
</nav>
Responsive Navbar
To add responsive features to the navbar, the content that you want to be collapsed needs to be wrapped in a <span> with classes .collapse, .navbar-collapse. The collapsing nature is tripped by a button that has the class of .navbar-toggle and then features two data- elements. The first, data-toggle, is used to tell the JavaScript what to do with the button, and the second, data-target, indicates which element to toggle. Then
The following example demonstrates this −
<nav class = "navbar navbar-default" role = "navigation">
<span class = "navbar-header">
<button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#example-navbar-collapse">
<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 = "#">TutorialsPoint</a>
</span>
<span class = "collapse navbar-collapse" id = "example-navbar-collapse">
<ul class = "nav navbar-nav">
<p class = "active"><a href = "#">iOS</a></p>
<p><a href = "#">SVN</a></p>
<p class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<p><a href = "#">jmeter</a></p>
<p><a href = "#">EJB</a></p>
<p><a href = "#">Jasper Report</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
<p class = "spanider"></p>
<p><a href = "#">One more separated pnk</a></p>
</ul>
</p>
</ul>
</span>
</nav>
Forms in Navbar
Instead of using the default class-based forms from Chapter , forms that are in the navbar, use the .navbar-form class. This ensures that the form’s proper vertical apgnment and collapsed behavior in narrow viewports. Use the apgnment options (explained in Component apgnment section) to decide where it resides within the navbar content.
The following example demonstrates this −
<nav class = "navbar navbar-default" role = "navigation">
<span class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</span>
<span>
<form class = "navbar-form navbar-left" role = "search">
<span class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</span>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>
</span>
</nav>
Buttons in Navbar
You can add buttons using class .navbar-btn to <button> elements not residing in a <form> to vertically center them in the navbar. .navbar-btn can be used on <a> and <input> elements.
Do not use .navbar-btn nor the standard on <a> elements within .navbar-nav.
The following example demonstrates this −
<nav class = "navbar navbar-default" role = "navigation">
<span class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</span>
<span>
<form class = "navbar-form navbar-left" role = "search">
<span class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</span>
<button type = "submit" class = "btn btn-default">Submit Button</button>
</form>
<button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
</span>
</nav>
Text in Navbar
To wrap strings of text in an element use the class .navbar-text. This is usually used with <p> tag for proper leading and color. The following example demonstrates this −
<nav class = "navbar navbar-default" role = "navigation">
<span class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</span>
<span>
<p class = "navbar-text">Signed in as Thomas</p>
</span>
</nav>
Non-nav Links
If you want to use the standard pnks that are not within the regular navbar navigation component, then use the class navbar-pnk to add proper colors for the default and inverse navbar options as shown in the following example −
<nav class = "navbar navbar-default" role = "navigation">
<span class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</span>
<span>
<p class = "navbar-text navbar-right">
Signed in as
<a href = "#" class = "navbar-pnk">Thomas</a>
</p>
</span>
</nav>
Component Apgnment
You can apgn the components pke nav pnks, forms, buttons, or text to left or right in a navbar using the utipty classes .navbar-left or .navbar-right. Both classes will add a CSS float in the specified direction. The following example demonstrates this −
<nav class = "navbar navbar-default" role = "navigation">
<span class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</span>
<span>
<!--Left Apgn-->
<ul class = "nav navbar-nav navbar-left">
<p class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<p><a href = "#">jmeter</a></p>
<p><a href = "#">EJB</a></p>
<p><a href = "#">Jasper Report</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
<p class = "spanider"></p>
<p><a href = "#">One more separated pnk</a></p>
</ul>
</p>
</ul>
<form class = "navbar-form navbar-left" role = "search">
<button type = "submit" class = "btn btn-default">Left apgn-Submit Button</button>
</form>
<p class = "navbar-text navbar-left">Left apgn-Text</p>
<!--Right Apgn-->
<ul class = "nav navbar-nav navbar-right">
<p class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<p><a href = "#">jmeter</a></p>
<p><a href = "#">EJB</a></p>
<p><a href = "#">Jasper Report</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
<p class = "spanider"></p>
<p><a href = "#">One more separated pnk</a></p>
</ul>
</p>
</ul>
<form class = "navbar-form navbar-right" role = "search">
<button type = "submit" class = "btn btn-default">
Right apgn-Submit Button
</button>
</form>
<p class = "navbar-text navbar-right">Right apgn-Text</p>
</span>
</nav>
Fixed to Top
The Bootstrap navbar can be dynamic in its positioning. By default, it is a block-level element that takes its positioning based on its placement in the HTML. With a few helper classes, you can place it either on the top or bottom of the page, or you can make it scroll statically with the page.
If you want the navbar fixed to the top, add class .navbar-fixed-top to the .navbar class. The following example demonstrates this −
To prevent the navbar from sitting on top of other content in the body of the page, add at least 50 pixels of padding to the <body> tag or try your own values.
<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
<span class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</span>
<span>
<ul class = "nav navbar-nav">
<p class = "active"><a href = "#">iOS</a></p>
<p><a href = "#">SVN</a></p>
<p class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<p><a href = "#">jmeter</a></p>
<p><a href = "#">EJB</a></p>
<p><a href = "#">Jasper Report</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
<p class = "spanider"></p>
<p><a href = "#">One more separated pnk</a></p>
</ul>
</p>
</ul>
</span>
</nav>
Fixed to Bottom
If you want the navbar fixed to the bottom of the page, add class .navbar-fixed-bottom to the .navbar class. The following example demonstrates this −
<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
<span class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</span>
<span>
<ul class = "nav navbar-nav">
<p class = "active"><a href = "#">iOS</a></p>
<p><a href="#">SVN</a></p>
<p class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class ="caret"></b>
</a>
<ul class = "dropdown-menu">
<p><a href = "#">jmeter</a></p>
<p><a href = "#">EJB</a></p>
<p><a href = "#">Jasper Report</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
<p class = "spanider"></p>
<p><a href = "#">One more separated pnk</a></p>
</ul>
</p>
</ul>
</span>
</nav>
Static Top
To create a navbar that scrolls with the page, add the .navbar-static-top class. This class does not require adding the padding to the <body>.
<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
<span class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</span>
<span>
<ul class = "nav navbar-nav">
<p class = "active"><a href = "#">iOS</a></p>
<p><a href = "#">SVN</a></p>
<p class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<p><a href = "#">jmeter</a></p>
<p><a href = "#">EJB</a></p>
<p><a href = "#">Jasper Report</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
<p class = "spanider"></p>
<p><a href = "#">One more separated pnk</a></p>
</ul>
</p>
</ul>
</span>
</nav>
Inverted Navbar
To create an inverted navbar with a black background and with white text, simply add the .navbar-inverse class to the .navbar class as demonstrated in the following example −
To prevent the navbar from sitting on top of other content in the body of the page, add at least 50 pixels of padding to the <body> tag or try your own values.
<nav class = "navbar navbar-inverse" role = "navigation">
<span class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</span>
<span>
<ul class = "nav navbar-nav">
<p class = "active"><a href = "#">iOS</a></p>
<p><a href = "#">SVN</a></p>
<p class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<p><a href = "#">jmeter</a></p>
<p><a href = "#">EJB</a></p>
<p><a href = "#">Jasper Report</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
<p class = "spanider"></p>
<p><a href = "#">One more separated pnk</a></p>
</ul>
</p>
</ul>
</span>
</nav>
Advertisements