In 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
Let's get started
Using inbuilt bootstrap properties
To change the text color we have two properties
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.
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 :
|
|
|
|
1305 Views |