Bulma - Panel

Bulma - panel is a container for several types such as panel-heading,panel-tabs,panel-block,control,input,button & panel-icon.

Panel component descriptions:

panel-heading - It is a first child element of the panel.
panel-tabs - It is used to make panel navigation.
panel-block - It might contains other elements such as: control, input, button, panel-icon

Panel block might contain an anchor tag <a> or label <label> with a checkbox inside.

Example

General Syntax

      
        <nav class="panel">
  <element class="panel-heading"></element>
  <element class="block"></element>
  <element class="panel-tabs"></element>
</nav>

Try it now

Source Code

          
            <nav class="panel">
  <p class="panel-heading">Learn Web Development</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>Web Design</a>
    <a>Graphics Design</a>
    <a>App Design</a>
    <a>App Development</a>
  </p>
  <a class="panel-block is-active">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    Web Design
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    Graphics Design
  </a>
</nav>

Try it now

Source Code : Output

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4