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:




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

Output:

Example 2: Panel with images.






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

Output:

Example 3: Colored Panel components.




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

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :