Ask any question about Bootstrap here... and get an instant response.
Post this Question & Answer:
How can I customize Bootstrap's default navbar breakpoint for my project?
Asked on Jan 31, 2026
Answer
To customize Bootstrap's default navbar breakpoint, you need to override the default CSS media queries with your own custom CSS. This allows you to control when the navbar collapses based on your specific needs.
<!-- BEGIN COPY / PASTE -->
<style>
@media (max-width: 992px) { /* Change 992px to your desired breakpoint */
.navbar-expand-custom {
flex-wrap: wrap;
justify-content: space-between;
}
.navbar-expand-custom .navbar-collapse {
display: none;
}
.navbar-expand-custom .navbar-toggler {
display: block;
}
}
@media (min-width: 993px) { /* Adjust according to your breakpoint */
.navbar-expand-custom .navbar-collapse {
display: flex !important;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
</style>
<nav class="navbar navbar-expand-custom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<a class="nav-link active" aria-current="page" href="#">Home</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>
</div>
</nav>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- Use the `.navbar-expand-custom` class to apply your custom breakpoint settings.
- Modify the `max-width` and `min-width` values in the media queries to set your desired breakpoint.
- Ensure that your custom CSS is loaded after Bootstrap's CSS to properly override the defaults.
Recommended Links:
