Bulma is a modern CSS framework based on flexbox. It has its own pre-styled components which make it easier to create responsive and beautiful websites. In this article, we will be seeing how to change navbar color in Bulma using any one of the 9 color modifier classes provided by Bulma.
Navbar Color Classes:
- is-primary: This class is used to change the background color of the navbar to the primary color.
- is-link: This class is used to change the background color of the navbar to the link color.
- is-info: This class is used to change the background color of the navbar to the info color.
- is-success: This class is used to change the background color of the navbar to the success color.
- is-warning: This class is used to change the background color of the navbar to the warning color.
- is-danger: This class is used to change the background color of the navbar to the danger color.
- is-black: This class is used to change the background color of the navbar to the black color.
- is-dark: This class is used to change the background color of the navbar to a dark color.
- is-light: This class is used to change the background color of the navbar to a light color.
- is-white: This class is used to change the background color of the navbar to the white color.
Syntax:
<nav class="navbar is-link"> ... </nav>
Example: The below example shows how to change the background color of the navbar using the color modifier classes discussed above.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bulma Navbar Colors</title>
<link rel='stylesheet' href=
<style>
.navbar {
margin-top: 20px;
padding: 10px;
border-radius: 10px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>Bulma Navbar Colors</b>
<div class="container">
<!-- Danger Background -->
<nav class="navbar is-danger">
<div class="navbar-brand">
<a class="navbar-item" <img src=
</a>
<div class="navbar-burger" data-target="navBackgroundDemo1">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navBackgroundDemo1" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">
Home
</a>
<a class="navbar-item" href="#">
Courses
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<button class="button is-primary">
Algorithms
</button>
</p>
<p class="control">
<button class="button is-primary is-outlined">
Data Structures
</button>
</p>
</div>
</div>
</div>
</div>
</nav>
<!-- Link Background -->
<nav class="navbar is-link">
<div class="navbar-brand">
<a class="navbar-item"
<img src=
</a>
<div class="navbar-burger" data-target="navBackgroundDemo1">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navBackgroundDemo1" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">
Home
</a>
<a class="navbar-item" href="#">
Courses
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<button class="button is-primary">
Algorithms
</button>
</p>
<p class="control">
<button class="button is-white">
Data Structures
</button>
</p>
</div>
</div>
</div>
</div>
</nav>
<!-- Info Background -->
<nav class="navbar is-info">
<div class="navbar-brand">
<a class="navbar-item" <img src=
</a>
<div class="navbar-burger" data-target="navBackgroundDemo1">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navBackgroundDemo1" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">
Home
</a>
<a class="navbar-item" href="#">
Courses
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<button class="button is-primary">
Algorithms
</button>
</p>
<p class="control">
<button class="button is-white">
Data Structures
</button>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
|
Output:
Reference: https://bulma.io/documentation/components/navbar/#colors