How do i change the Navigation bar color with bootstrap5
Published October 20, 2021In this bootstrap5 example we will learn how to change the color of navigation bar. There are two ways to change the color of navigation bar with bootstrap5
- Using inbuilt bootstrap properties
- Using Custom class with CSS
Let's get started
Using inbuilt bootstrap properties
To change the text color we have two properties
- navbar-light: This class property will set the color of the text to dark. This is used when using a light background color.
- navbar-dark: This class property will set the color of the text to light. This is used when using a dark background color
Change the background color
Bootstrap5 has builtin color properties to set the background colors for any component. With these properties we can change the navigation bar background color.
- .bg-primary: This property sets the color to the primary color.
- .bg-secondary: This property sets the color to the secondary color.
- .bg-success: This property sets the color to the success color.
- .bg-danger: This property sets the color to the danger color.
- .bg-warning: This property sets the color to the warning color.
- .bg-info: This property sets the color to the info color.
- .bg-light: This property sets the color to the light color.
- .bg-dark: This property sets the color to the dark color.
- .bg-white: This property sets the color to the white color.
- .bg-transparent: This property sets the navbar to be transparent
Example code to set the Navigation Bar background color with bootstrap5
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Change Navigationbar color</title> </head> <body style="padding:10px;"> <!-- Navbar text is dark and background is light --> <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#"> Light color background </a> </nav> <nav class="navbar navbar-light bg-warning"> <a class="navbar-brand" href="#"> Warning color background </a> </nav> <!-- Navbar text is light and background is dark --> <nav class="navbar navbar-dark bg-dark"> <a class="navbar-brand" href="#"> Dark color background </a> </nav> <nav class="navbar navbar-dark bg-primary"> <a class="navbar-brand" href="#"> Primary color background </a> </nav> <nav class="navbar navbar-dark bg-secondary"> <a class="navbar-brand" href="#"> Secondary color background </a> </nav> <nav class="navbar navbar-dark bg-success"> <a class="navbar-brand" href="#"> Success color background </a> </nav> <div class="container" > <h1 style="color: green">Bootstrap5</h1> <b> How to change navigation bar color in Bootstrap ? </b> <p>The above color properties are available in bootstrap5 </p> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> </html> |
Using Custom Class with CSS Properties
We can change the background color and text color by create different custom class and apply css color properties on that class.
Let's create Custom CSS properties
<style> /* Modify the background color */ .navbar-custom { background-color: red; } /* Modify brand and text color */ .navbar-custom .navbar-brand, .navbar-custom .navbar-text { color: white; } </style> |
Complete code to change the Navigation bar background color
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Change Navigationbar color</title> <style> /* Modify the background color */ .navbar-custom { background-color: red; } /* Modify brand and text color */ .navbar-custom .navbar-brand, .navbar-custom .navbar-text { color: white; } </style> </head> <body style="padding:10px;"> <!-- Navbar text is dark and background is light --> <nav class="navbar navbar-custom"> <a class="navbar-brand" href="#"> Custom color background navbar </a> </nav> <div class="container"> <h1 style="color: green">Navigation Bar color</h1> <b>How to change navigation bar color in Bootstrap with custom CSS color properties?</b> <p>The above navigation bar uses a custom class for changing the colors.</p> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> </html> |
Article Contributed By :
|
|
|
|
1481 Views |