Bulma is a responsive open-source framework for CSS based on Flexbox and its completely free. The main features of this framework are, it is very compatible, well documented, and rich in components. For design purposes, Bulma uses classes.
The panel element is simply a container for compact controls. We can use this in many places in the design of the project. It gives an interactive user interface to the project. The Panel component includes several other components that we have to add exclusively to design our content nicely. These components are listed below.
- panel-heading: It is the first child of the panel and responsible for styling panel heading.
- panel-tabs: It is responsible for creating panel tabs.
- panel-block: Panel-block is a kind of container which can contain other elements like input controls, buttons, icons, forms, etc.
Example 1:
html
<!DOCTYPE html><html lang="en">
<head>
<link rel='stylesheet' href=
<style>
div.container {
margin-top: 80px;
}
</style>
</head>
<body>
<!-- font-awesome cdn -->
<script src=
</script>
<div class='container'>
<div class="columns is-centered">
<div class="column is-5">
<nav class="panel">
<p class="panel-heading">
<span class='title is-4'>Movies</span>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input"
type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search"
aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Romentic</a>
<a>Comedy</a>
<a>Action</a>
<a>Drama</a>
</p>
<a class="panel-block is-active">
M.S.Dhoni The Untold story
</a>
<a class="panel-block">
Raabta
</a>
<a class="panel-block">
Shuddh Desi Romance
</a>
<a class="panel-block">
URI The Surgical Strike
</a>
<a class="panel-block">
P.K.
</a>
<a class="panel-block">
3 Idiots
</a>
<a class="panel-block">
Kai Po Che
</a>
<div class="panel-block">
<button class="button
is-link is-fullwidth">
Sort By IMDB Ratings
</button>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: Panel with images.
html
<!DOCTYPE html><html lang="en">
<head>
<link rel='stylesheet' href=
<style>
div.container {
margin-top: 80px;
}
.image {
margin-right: 10px;
position: relative;
bottom: 4px;
}
</style>
</head>
<body>
<!-- font-awesome cdn -->
<script src=
</script>
<div class='container'>
<div class="columns is-centered">
<div class="column is-5">
<nav class="panel">
<p class="panel-heading">
<span class='title is-4'>
Movies
</span>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input"
type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search"
aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Romentic</a>
<a>Comedy</a>
<a>Action</a>
<a>Drama</a>
</p>
<a class="panel-block is-active">
<figure class='image is-24x24'>
<img src=
</figure>
M.S.Dhoni The Untold story
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20200622155044/Raabta_poster.jpg" alt="">
</figure>
Raabta
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20200622155118/Shuddh_Desi_Romance.jpg"
alt="">
</figure>
Shuddh Desi Romance
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20200622155201/URI_-_New_poster.jpg" alt="">
</figure>
URI The Surgical Strike
</a>
<a class="panel-block">
<figure class='image is-24x24'>
</figure>
P.K.
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20200622154621/220px-3_idiots_poster.jpg"
alt="">
</figure>
3 Idiots
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20200622154805/Kai_Poche_film_poster.jpg"
alt="">
</figure>
Kai Po Che
</a>
<div class="panel-block">
<button class="button is-link is-fullwidth">
Sort By IMDB Ratings
</button>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 3: Colored Panel components.
html
<!DOCTYPE html><html lang="en">
<head>
<link rel='stylesheet' href=
<style>
div.container {
margin-top: 80px;
}
.image {
margin-right: 10px;
position: relative;
bottom: 4px;
}
</style>
</head>
<body>
<!-- font-awesome cdn -->
<script src=
</script>
<div class='container'>
<div class="columns is-centered">
<div class="column is-5">
<article class="panel">
<p class="panel-heading
has-background-info">
<span class='title is-4'>Movies</span>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input is-info"
type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search"
aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Romentic</a>
<a>Comedy</a>
<a>Action</a>
<a>Drama</a>
</p>
<a class="panel-block is-active">
<figure class='image is-24x24'>
<img
src=
alt="">
</figure>
M.S.Dhoni The Untold story
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
</figure>
Raabta
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
alt="">
</figure>
Shuddh Desi Romance
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
</figure>
URI The Surgical Strike
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
</figure>
P.K.
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
alt="">
</figure>
3 Idiots
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
alt="">
</figure>
Kai Po Che
</a>
<div class="panel-block">
<button class="button is-info is-fullwidth">
Sort By IMDB Ratings
</button>
</div>
</article>
</div>
<div class="column is-5">
<article class="panel">
<p class="panel-heading has-background-success">
<span class='title is-4'>Movies</span>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input is-success"
type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search"
aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Romentic</a>
<a>Comedy</a>
<a>Action</a>
<a>Drama</a>
</p>
<a class="panel-block is-active">
<figure class='image is-24x24'>
<img
src=
alt="">
</figure>
M.S.Dhoni The Untold story
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
</figure>
Rabta
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
alt="">
</figure>
Shuddh Desi Romance
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
</figure>
URI The Surgical Strike
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
</figure>
P.K.
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
alt="">
</figure>
3 Idiots
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
alt="">
</figure>
Kai Po Che
</a>
<div class="panel-block">
<button class="button
is-success is-fullwidth">
Sort By IMDB Ratings
</button>
</div>
</article>
</div>
</div>
</div>
</body>
</html>
|
Output: