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 classes for Navbar brand image and text, We make a combination of navbar and navbar-brand classes with <img> tag and some text inserted in any element. The d-inline-block class with the align-text-top class is used to add an image and text at the same time in the <img> tag.
Syntax:
<nav class="navbar ..."> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="..." height="..." class="d-inline-block align-text-top"> </a> </div> </nav>
Example 1: In this example, we set the image and button inside the navbar for styling using .btn class and .navbar classes.
<!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-3" >
< div class = "container text-center" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h5 >Bootstrap 5 Navbar Brand Image and text</ h5 >
</ div >
< nav class="navbar navbar-expand-lg
navbar-dark bg-success">
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" >
< img src =
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" GeeksforGeeks
</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" Practice
</ a >
</ li >
</ ul >
</ div >
</ div >
</ nav >
</ body >
</ html >
|
Output:
Example 2: In this example, we set the image and text both in the navbar, with text set on the right side of the image.
<!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-GeeksforGeeks </ title >
< link href =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body class = "m-3" >
< div class = "container text-center" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h5 >Bootstrap 5 Navbar Brand Image and text</ h5 >
</ div >
< nav class="navbar navbar-expand-lg
navbar-dark bg-success">
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" >
< img src =
height = "60"
class = "d-inline-block align-text-top" >
A Computer Science portal for geeks.
</ a >
</ div >
</ nav >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/navbar/#image-and-text