Bootstrap 5 Navbar Brand Image and Text
Last Updated :
10 Jan, 2023
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.
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-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:
Bootstrap 5 Navbar Brand Image and text
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.
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-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:
Bootstrap 5 Navbar Brand Image and text
Reference: https://getbootstrap.com/docs/5.0/components/navbar/#image-and-text
Share your thoughts in the comments
Please Login to comment...