How to use navbar-expand-lg and navbar-expand-xl In Bootstrap
In this approach, With navbar-expand-lg, the navigation bar will collapse i.e., the menu items will be hidden behind a menu button when the screen width is less than 992 pixels, typically around the size of a tablet or smaller laptops. On the other hand, navbar-expand-xl will collapse the navigation bar when the screen width is less than 1200 pixels, which is usually for larger desktop screens.
Example: The below example shows how to change Bootstrap navbar collapse breakpoint using navbar-expand-lg and navbar-expand-xl.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<!-- Link to Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet" />
</head>
<body>
<!-- Using navbar-expand-lg for collapsing below 992px -->
<div class="approach-title">
Using navbar-expand-lg for
collapsing below 992px
</div>
<nav class="navbar navbar-expand-lg
bg-light">
<!-- Navbar content -->
<a class="navbar-brand text-success
fw-bold" href="#">
w3wiki
</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent3"
aria-controls="navbarSupportedContent3"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent3">
<ul class="navbar-nav mr-auto">
<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="#">
Courses
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
tabindex="-1"
aria-disabled="true">
About
</a>
</li>
</ul>
</div>
</nav>
<!-- Using navbar-expand-xl for collapsing below 1200px -->
<div class="approach-title">
Using navbar-expand-xl for
collapsing below 1200px
</div>
<nav class="navbar navbar-expand-xl
bg-light">
<!-- Navbar content -->
<a class="navbar-brand text-success fw-bold"
href="#">w3wiki</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent4"
aria-controls="navbarSupportedContent4"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent4">
<ul class="navbar-nav mr-auto">
<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="#">
Courses
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#" tabindex="-1"
aria-disabled="true">
About
</a>
</li>
</ul>
</div>
</nav>
<!-- Bootstrap JS bundle (optional) -->
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Output:
How to Change Bootstrap Navbar Collapse Breakpoint?
Bootstrap navbar component collapses into a mobile-friendly menu when the viewport width reaches a certain breakpoint. By default, this breakpoint is set to 768 pixels, meaning the navbar collapses into a mobile menu on screens smaller than 768 pixels wide. However, we can customize this breakpoint to better suit our design or accommodate different screen sizes.
Table of Content
- Using navbar-expand-sm and navbar-expand-md
- Using navbar-expand-lg and navbar-expand-xl