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
The navbar-expand-sm and navbar-expand-md classes in Bootstrap control the behavior of the navigation bar based on screen size. When navbar-expand-sm is used, the navbar collapses into a toggleable button when the screen width is less than 576 pixels, making it suitable for smaller devices like smartphones. In contrast, navbar-expand-md causes the navbar to collapse only when the screen width is less than 768 pixels, typically for medium-sized devices like tablets.
Example: The example below shows how to change the Bootstrap navbar collapse breakpoint using navbar-expand-sm and navbar-expand-md.
<!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-sm for collapsing below 576px -->
<div class="approach-title">
Using navbar-expand-sm for
collapsing below 576px
</div>
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Navbar content -->
<a class="navbar-brand text-success
fw-bold"
href="#">
GeeksforGeeks
</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent1">
<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-md for collapsing below 768px -->
<div class="approach-title pt-4">
Using navbar-expand-md for collapsing below 768px
</div>
<nav class="navbar navbar-expand-md bg-light">
<!-- Navbar content -->
<a class="navbar-brand text-success
fw-bold" href="#">
GeeksforGeeks
</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent2"
aria-controls="navbarSupportedContent2"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent2">
<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:
Using navbar-expand-lg and navbar-expand-xl
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="#">
GeeksforGeeks
</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="#">GeeksforGeeks</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: