Skip to content
Related Articles

Related Articles

Bulma | Panel
  • Last Updated : 10 Jul, 2020

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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">
            Rabta
          </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>

chevron_right


Output:

Example 2: Panel with images.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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'>
            </figure>
            Rabta
          </a>
          <a class="panel-block">
            <figure class='image is-24x24'>
                alt="">
            </figure>
            Shuddh Desi Romance
          </a>
          <a class="panel-block">
            <figure class='image is-24x24'>
            </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'>
                alt="">
            </figure>
            3 Idiots
          </a>
          <a class="panel-block">
            <figure class='image is-24x24'>
                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>

chevron_right


Output:

Example 3: Colored Panel components.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
            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-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>

chevron_right


Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :