Bulma is a CSS framework based on flexbox. It makes it easier and faster to make websites using its pre-styled components. In this article, we will be seeing the various colors with which the panel component can be styled in Bulma.
Panel Color Classes:
- is-primary: This class is used to change the color of the panel to the primary color.
- is-link: This class is used to change the color of the panel to the link color.
- is-info: This class is used to change the color of the panel to the info color.
- is-success: This class is used to change the color of the panel to the success color.
- is-warning: This class is used to change the color of the panel to the warning color.
- is-danger: This class is used to change the color of the panel to the danger color.
- is-black: This class is used to change the color of the panel to the black color.
- is-dark: This class is used to change the color of the panel to a dark color.
- is-light: This class is used to change the color of the panel to a light color.
- is-white: This class is used to change the color of the panel to the white color.
Syntax:
<nav class="panel is-primary">
...
</nav>
Example: The below example shows how to change the color of the panel using the classes listed above.
<!DOCTYPE html>
<html>
<head>
<title>
Bulma Panel Colors
</title>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.container {
display: flex;
align-items: center;
flex-direction: column;
}
.panel {
max-width: 400px;
margin-top: 25px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">
Bulma Panel Colors
</b>
<div class="container">
<!-- Primary Color -->
<nav class="panel is-primary">
<p class="panel-heading">
Primary Color Panel
</p>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Data Structures</a>
<a>Algorithms</a>
<a>DBMS</a>
<a>C++</a>
</p>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
How to generate triangle pattern in C++?
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
Tree Data Structure
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
What is a foreign key in SQL?
</a>
</nav>
<!-- Link Color -->
<nav class="panel is-link">
<p class="panel-heading">
Link Color Panel
</p>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Data Structures</a>
<a>Algorithms</a>
<a>DBMS</a>
<a>C++</a>
</p>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
How to generate triangle pattern in C++?
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
Tree Data Structure
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
What is a foreign key in SQL?
</a>
</nav>
<!-- Danger Color -->
<nav class="panel is-danger">
<p class="panel-heading">
Danger Color Panel
</p>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Data Structures</a>
<a>Algorithms</a>
<a>DBMS</a>
<a>C++</a>
</p>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
How to generate triangle pattern in C++?
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
Tree Data Structure
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true"></i>
</span>
What is a foreign key in SQL?
</a>
</nav>
</div>
</body>
</html>
Output:
Reference: https://bulma.io/documentation/components/panel/#colors
