Bootstrap 5 Navbar Responsive Behaviors
Last Updated :
30 Dec, 2022
Bootstrap 5 Navbar Responsive behaviors help us determine when the content will hide behind a button. For this, we use .navbar-toggler, .navbar-collapse, .navbar-expand{-sm|-md|-lg|-xl|-xxl} classes. Add .navbar-expand class so that the navbar never collapses and for the navbar to collapse never add .navbar-expand class.
Bootstrap 5 Navbar Responsive behaviors:
- Toggler: The navbar toggler is left-aligned by default but by reversing our code, the placement of togglers will also be reversed. Toggler and brand name positions can be interchanged.
- External Content: Sometimes you need to collapse the button to access some content that is outside of the container. With the help of id and data-bs-target matching, we can easily do it. Including additional JavaScript is recommended for moving focus on the navbar when it is opened.
Example 1: In this example brand name is shown on the left and the toggle on right.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link href =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body >
< div >
< div class = "text-center" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h2 >Bootstrap 5 Navbar Responsive behaviors</ h2 >
</ div >
< br >< br >
< nav class = "navbar navbar-expand-lg" >
< div class = "container-fluid text-success" >
< h4 >GFG</ h4 >
< button class = "navbar-toggler"
data-bs-toggle = "collapse"
data-bs-target = "#gfgnavbar" >
< span class = "navbar-toggler-icon" >
</ span >
</ button >
< div class = "collapse navbar-collapse ps-3"
id = "gfgnavbar" >
< ul class = "navbar-nav" >
< li class = "nav-item" >
< a class = "nav-link" href = "#" >
Jobs
</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" >
Practice
</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" >
Contests
</ a >
</ li >
</ ul >
</ div >
</ div >
</ nav >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Navbar Responsive Behaviors
Example 2: In this example, Bootstrap 5 Navbar external content is shown.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link href =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body class = "m-2" >
< div class = "text-center" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h2 >Bootstrap 5 Navbar Responsive behaviors</ h2 >
</ div >
< br >< br >
< div class = "collapse" id = "gfgExternal" >
< div class = "p-3 text-center" >
< h4 >GFG</ h4 >
< p >A computer science portal for geeks</ p >
</ div >
</ div >
< nav class = "navbar bg-light" >
< button class = "navbar-toggler col-12"
type = "button"
data-bs-toggle = "collapse"
data-bs-target = "#gfgExternal" >
< span class = "navbar-toggler-icon text-center" >
</ span >
</ button >
</ nav >
</ body >
</ html >
|
Output:
Bootstrap 5 Navbar Responsive Behaviors
References: https://getbootstrap.com/docs/5.0/components/navbar/#responsive-behaviors
Share your thoughts in the comments
Please Login to comment...