The navbar, Bootstrap's strong, responsive navigation header, has documentation and examples. Includes branding, navigation, and other features, as well as compatibility for our collapse plugin.
How does it work?
Before you start using the navbar, here's what you should know:
- For responsive collapsing and color scheme classes, navbars require a wrapping .navbar with .navbar-expand-sm|-md|-lg|-xl.
- By default, navbars and their contents are fluid. To limit their horizontal width, use optional containers.
- To modify the spacing and alignment of navbars, use our spacing and flex utility classes.
- When printing, the navbars are concealed by default. By adding .d-print to the .navbar, you may force them to be printed. See the show utility class for further information.
- Ensure accessibility by using an <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
A few sub-components are supported by default in navbars. As needed, select from the following options:
- .navbar-nav for a full-height and lightweight navigation.
- .navbar-brand for your company, product, or project name (including support for dropdowns).
- .navbar-toggler is a class that may be used with our collapse plugin and other toggling navigation actions.
- For all form controls and actions, use .form-inline.
- .navbar-text allows you to add vertically centered text strings to your navigation bar.
- For grouping and hiding navbar contents by a parent breakpoint, use .collapse .navbar-collapse.
Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.
Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for .nav-item and .nav-link as shown below.
Place various form controls and components within a navbar with .form-inline.
Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.
To place navbars in non-static places, use our position tools. Fastened to the top, fixed to the bottom, or stickied to the top are the options (scrolls with the page until it reaches the top, then stays there). Fixed navbars employ position: fixed, which means they're taken out of the DOM's usual flow and may require additional CSS (e.g., padding-top on the body>) to avoid overlapping with other elements.
By default, navbar togglers are left-aligned, but if they follow a sibling element like.navbar-brand, they'll be positioned to the far right. The toggler's position will be reversed if your markup is reversed. Here are some instances of various toggle styles.
In the lowest breakpoint, there is no .navbar-brand:
You may want to use the collapse plugin to reveal content that is buried elsewhere on the page. That's simple with our plugin because it works with id and data-target matching.
ATutorialHub Related Guide
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website