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 using the navbar-brand class.
- Image: The texts created with the navbar-brand class can be placed inside an image element using the <img> tag.
- Image and Text: Both image and text can be put together at the same time by using the d-inline-block class and align-text-top on the <img> element in the UI.
Syntax:
<nav class="navbar ..."> <div class="container-fluid"> <span class="navbar-brand"> .... </span> </div> </nav>
Example 1: In this example, we illustrate the text inside the navbar using .navbar-brand class.
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/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body class = "m-4" > < div class = "container text-center" > < h1 class = "text-success" >w3wiki</ h1 > < h5 >Bootstrap 5 Navbar Brand text</ h5 > </ div > < nav class = "navbar mb-3 navbar-light bg-primary" > < div class = "container-fluid" > < span class = "navbar-brand mb-2 h3" > A Computer Science portal for Beginner. </ span > </ div > </ nav > < nav class = "navbar navbar-light bg-secondary" > < div class = "container-fluid" > < span class = "navbar-brand mb-2 " > Platform to practice programming problems </ span > </ div > </ nav > </ body > </ html > |
Output:
Example 2: In this example, we set an image inside the navbar by replacing the image using .navbar-brand classes.
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" > < title >Bootstrap 5-w3wiki </ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body class = "m-4" > < div class = "container text-center " > < h1 class = "text-success" >w3wiki</ h1 > < h5 >Bootstrap 5 Navbar Brand Image</ h5 > </ div > < nav class="navbar navbar-expand-lg navbar-dark bg-success"> < div class = "container-fluid" > < a class = "navbar-brand" href = "#" > < img src = "https://media.w3wiki.net/wp-content/uploads/20221129215205/gfg.png" height = "60" > </ a > </ div > </ nav > </ body > </ html > |
Output:
Example 3: In this example, we set the image and text inside the navbar, text is set on the right side of the image.
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" > < title >Bootstrap 5-w3wiki </ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body class = "m-4" > < div class = "container text-center " > < h1 class = "text-success" >w3wiki</ h1 > < h5 >Bootstrap 5 Navbar Brand Image and text</ h5 > </ div > < nav class = "navbar navbar-expand-lg navbar-dark bg-primary" > < div class = "container-fluid" > < a class = "navbar-brand" href = "#" > < img src = "https://media.w3wiki.net/wp-content/uploads/20221129215205/gfg.png" height = "60" > </ a > < button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarText" > < span class = "navbar-toggler-icon" ></ span > </ button > < div class = "collapse navbar-collapse" id = "navbarText" > < ul class = "navbar-nav me-auto" > < li class = "nav-item" > < a class = "nav-link active" href = "https://write.w3wiki.net" > Write </ a > </ li > < li class = "nav-item" > < a class = "nav-link" href = "https://write.w3wiki.net/my-posts/" > My post </ a > </ li > </ ul > </ div > </ div > </ nav > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/navbar/#brand