it('should not use "static" Popper in navbar', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
- '<nav class="navbar navbar-expand-md navbar-light bg-light">',
+ '<nav class="navbar navbar-expand-md bg-light">',
' <div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
it('should manage bs attribute `data-bs-popper`="static" when dropdown is in navbar', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
- '<nav class="navbar navbar-expand-md navbar-light bg-light">',
+ '<nav class="navbar navbar-expand-md bg-light">',
' <div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
<div class="container">
<h1>Dropdown <small>Bootstrap Visual Test</small></h1>
- <nav class="navbar navbar-expand-md navbar-light bg-light">
+ <nav class="navbar navbar-expand-md bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
{{< /example >}}
{{< example >}}
-<nav class="navbar sticky-bottom navbar-light bg-light">
+<nav class="navbar sticky-bottom bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky bottom</a>
</div>
Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.
<div class="bd-example">
- <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
+ <nav id="navbar-example2" class="navbar bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
</div>
```html
-<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
+<nav id="navbar-example2" class="navbar bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<div class="bd-example">
<div class="row">
<div class="col-4">
- <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
+ <nav id="navbar-example3" class="navbar bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
</div>
```html
-<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
+<nav id="navbar-example3" class="navbar bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
Have a look at our table documentation for some [insight into how we're using CSS variables]({{< docsref "/content/tables#how-do-the-variants-and-accented-tables-work" >}}). Our [navbars also use CSS variables]({{< docsref "/components/navbar#css" >}}) as of v5.2.0. We're also using CSS variables across our grids—primarily for gutters the [new opt-in CSS grid]({{< docsref "/layout/css-grid" >}})—with more component usage coming in the future.
-Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and it's sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.
+Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.
## Prefix
<div>
{{< example show_markup="false" >}}
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
+ <nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
<div>
<div class="bd-example">
- <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
+ <nav id="navbar-example2" class="navbar bg-light px-3">
<a class="navbar-brand" href="#">شريط التنقل</a>
<ul class="nav nav-pills">
<li class="nav-item">
<div>
{{< example show_markup="false" >}}
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
+ <nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
<div>
<div class="bd-example">
- <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
+ <nav id="navbar-example2" class="navbar bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">