Bulma | Panel

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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.