-
BS Grid Basic
-
BS Typography
-
BS Tables
-
BS Images
-
BS Jumbotron
-
BS Alerts
-
BS Forms
-
BS Floating Labels
-
BS Form Validation
-
BS Buttons
-
BS Button Groups
-
BS Badges
-
BS Progress Bars
-
BS Spinnier
-
BS Pagination
-
BS List Groups
-
BS Cards
-
BS Dropdowns
-
BS Collapse
-
BS Navs
-
BS Navbar
-
BS Carousel
-
BS Modal
-
BS Tooltip
-
BS Panels
-
BS Popover
-
BS Toast
-
BS Scrollspy
-
BS OffCanvas
-
BS Utilities
-
BS Flex
Navbar
The Bootstrap Navbar is a powerful, responsive navigation header that is used for branding, navigation links, and other actions. It’s one of the most versatile and useful components in the Bootstrap framework, often used as the primary means of navigation on a website. The Navbar can be expanded or collapsed depending on the screen size, making it highly suitable for responsive web design.
Key Classes and Components of Bootstrap Navbar
Here’s an overview of the primary classes and components used in Bootstrap Navbars:
- .navbar: The base class for the navbar component.
- .navbar-brand: Used for the title, logo, or brand of the site placed in the navbar.
- .navbar-nav: Wraps the navigation links in the navbar.
- .nav-item and .nav-link: Used for individual items and links within the .navbar-nav.
- .navbar-toggler: The button used to toggle the navbar’s responsive collapse feature.
- .navbar-collapse: Contains the collapsible content in the navbar.
- .collapse and .navbar-collapse: Used together to control the collapsible aspect of the navbar, especially in responsive layouts.
1.Basic Navbar Structure
Objective: Create the basic structure of a responsive navbar.
Steps:
– Begin with a `<nav>` element, applying the `.navbar` class for basic styling.
– Add `.navbar-expand-lg` for a responsive collapsing behavior at the ‘lg’ (large) breakpoint.
– Use `.navbar-light` and `.bg-light` for light-themed styling (alternatively, `.navbar-dark` and `.bg-dark` for dark-themed navbars).
Example:
<ul class=”nav”>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link 1</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link 2</a>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>Disabled Link</a>
</li>
</ul>
2. Adding Navigation Links
Objective: Include navigation links within the navbar.
Steps:
– Inside the `<nav>`, after the `.navbar-brand`, add a button for toggling the navbar on small screens, with classes `.navbar-toggler` and `.navbar-toggler-icon`.
– Create a `<div>` with `.collapse` and `.navbar-collapse` to contain the navigation items.
– Inside this div, add a `<ul>` with `.navbar-nav` for horizontal nav items.
– For individual nav items, use `<li>` with `.nav-item` and include links with `.nav-link`.
Example:
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<a class=”navbar-brand” href=”#”>Navbar</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNav” aria-controls=”navbarNav” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNav”>
<ul class=”navbar-nav”>
<li class=”nav-item active”>
<a class=”nav-link” href=”#”>Home</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Features</a>
</li>
<!– More nav items here –>
</ul>
</div>
</nav>
3. Integrating Dropdown Menus
Objective: Add dropdown menus to the navbar for more complex navigation requirements.
Steps:
– In the `.navbar-nav`, add a `.nav-item` with a nested `.nav-link` that will act as the dropdown toggle. Add `.dropdown-toggle` to this link and set `data-toggle=”dropdown”`.
– Immediately following the toggle link, add a `.dropdown-menu` with `.dropdown-item`s for each dropdown link.
Example:
<li class=”nav-item dropdown”>
<a class=”nav-link dropdown-toggle” href=”#” id=”navbarDropdown” role=”button” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
Dropdown
</a>
<div class=”dropdown-menu” aria-labelledby=”navbarDropdown”>
<a class=”dropdown-item” href=”#”>Action</a>
<a class=”dropdown-item” href=”#”>Another action</a>
<!– More dropdown items –>
</div>
</li>
4. Making the Navbar Responsive
Objective: Ensure the navbar is responsive and adapts to different screen sizes.
Steps:
– The `.navbar-expand-lg` class already sets up the navbar to be responsive, collapsing on small screens.
– The toggler button added earlier will be visible only on small screens, allowing users to expand and collapse the navbar items.
By following these steps, you can create a versatile and responsive Bootstrap navbar suited for various applications, from simple websites to complex web applications. The navbar can easily be customized further with additional styles, links, or components as needed.
Example: Basic Bootstrap Navbar
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bootstrap Navbar Example</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<a class=”navbar-brand” href=”#”>Navbar</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNav” aria-controls=”navbarNav” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNav”>
<ul class=”navbar-nav”>
<li class=”nav-item active”>
<a class=”nav-link” href=”#”>Home <span class=”sr-only”>(current)</span></a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Features</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Pricing</a>
</li>
</ul>
</div>
</nav>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
</body>
</html>
Explanation
- The navbar starts with the <nav> tag using the .navbar, .navbar-expand-lg, and .navbar-light classes. .navbar-expand-lg indicates that the navbar items will be collapsed into a menu on smaller screens (less than large, or lg).
- The .navbar-brand represents the brand or title of the website and is typically used for the logo or name.
- The .navbar-toggler is used to add a button that toggles the visibility of the menu items on smaller screens. The data-toggle and data-target attributes link it to the collapsible part of the navbar.
- .navbar-collapse wraps the navigational structure, which is made up of .navbar-nav, .nav-item, and .nav-link.
- JavaScript includes for Bootstrap, Popper.js, and jQuery enable the interactive features of the navbar, such as the collapsible functionality.
This example demonstrates a basic yet functional Bootstrap navbar suitable for a wide range of websites. The navbar is responsive, ensuring it works well on devices of all sizes, from mobile phones to desktops.
