Bootstrap 5 Navbar Responsive Behaviors Last Updated : 30 Dec, 2022 Comments Improve Suggest changes Like Article Like Report 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= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </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= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </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 Comment More infoAdvertise with us Next Article Bootstrap 5 Navbar Brand Image and Text H harshil99 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads Bootstrap 5 Navbar Supported Content Bootstrap 5 Navbar Supported content contains Navbar which supports various sub-components like .navbar-brand, .navbar-nav, .navbar-text, .navbar-toggler, and .navbar-scroll. Brand: It is a company, project, or product name. We add .navbar-brand to various components like a heading or a link. We can 2 min read Bootstrap 5 Navbar Brand Bootstrap 5 Navbar brand is applied to the typical branding logo that sees in the top navigation bar. It may contain an image logo or text, etc. A Navbar helps readers in selecting topics, links, or sub-topics of their interest. Bootstrap 5 Navbar Brand: Text: The text in the user interface is added 3 min read Bootstrap 5 Navbar Brand Text A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. Navbar Brand Text is used to add text in place of the brand logo. We can write text or links using the nav 2 min read Bootstrap Navbar Brand Image Bootstrap Navbar Brand Image is used to put the image inside of a navbar, a navigation bar component in the Bootstrap framework. It typically appears at the top of a webpage, serving as a visual identifier for the website or application and linking back to the homepage. Pre-requisite: To use images 2 min read Bootstrap 5 Navbar Brand Image and Text Bootstrap 5 Navbar Brand Image and text are used to create a navbar that holds the image and text within it. A navbar can have only text, only image or both a few times you can see buttons on navbar to navigate things. Bootstrap 5 Navbar Brand Image and text used classes: There are no specific class 2 min read Bootstrap 5 Navbar Nav Bootstrap 5 Navbar Nav simplifies navigation creation by grouping navigation links within a container element with the nav class. Use nav-item for each link and nav-link for styling. Customize with optional classes like "active" for the current page. Bootstrap 5 Navbar Nav class: There is no specifi 2 min read Bootstrap 5 Navbar Forms Bootstrap 5 Navbar Forms are used to create the components like a search bar, or login within a navbar. Bootstrap 5 Navbar Forms Classes: No special classes are used in Navbar Forms. You can customize the form using Navbar and Form classes Syntax: <nav class="navbar"> <form> <input cl 2 min read Bootstrap 5 Navbar Text Navbar Text is used to put some text on the navbar. To do so Bootstrap 5 brings the Bootstrap 5 Navbar Text features. Creating a navbar is obvious when we are creating a website, and putting text on the navbar is required to guide the visitors to the right destination. Navbar Text Class: navbar-text 2 min read Bootstrap 5 Navbar Color Schemes Bootstrap 5 Navbar Color schemes is used to customize a navbar using navbar light and dark themes, along with background color utilities. Bootstrap 5 Navbar Color schemes Classes: No special classes are used in Navbar Color schemes. We have an article on the Background colors that can be used to giv 2 min read Bootstrap 5 Navbar Containers The container layout can define the main frame of the page using header, content, sidebar, and footer components. We can also add a navbar at the top of the webpage using the container navbar component. This is not that important but you can wrap up the nav bar in a container to center it on a page 2 min read Like