Bulma Cards

Bulma cards components are used to display the content inside the box for best user experience. It has the following inner elements.

card: - It is a main container of the card.
card-header: - It is a horizontal bar with a shadow.
card-header-title: - It is a left-aligned bold text inside the card header section.
card-header-icon: - It is a placeholder for an icon section.
card-image: - It is a full width container for a responsive image.
card-content: - It is a multi-purpose container that contains other elements.
card-footer: - It is a horizontal list of controls.
card-footer-item: - It is a repeatable list item.

Card With Header

The card header might have a title and a Bulma icon. The title can be centered using the .is-centerd modifier.

General Syntax

      
        <div class="card">
  <header class="card-header">
    <p class="card-header-title">
      Card Header
    </p>
  </header>
</div>

Try it now

Source Code

          
            <div class="card">
  <header class="card-header">
    <p class="card-header-title">
      Card header
    </p>
    <button class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </header>
</div>

Try it now

Source Code : Output

Card header

Card With Image

The card-image is a container for a Bulma image element.

General Syntax

      
        <div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="flower.jpg" alt="Placeholder image">
    </figure>
  </div>
</div>

Try it now

Source Code

          
            <div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://placehold.co/600x400" alt="Placeholder image" rel="nofollow">
    </figure>
  </div>
</div>

Try it now

Source Code : Output

Card With Content

It is the main part of the card that contains mainly text content. It might contain other elements.

General Syntax

      
        <div class="card">
  <div class="card-content">
    <div class="content">
       Write card content
    </div>
  </div>
</div>

Try it now

Source Code

          
            <div class="card">
  <div class="card-content">
    <div class="content">
      sudhakarinfotech is world one of the best learning platform for web development.
    </div>
  </div>
</div>

Try it now

Source Code : Output

      sudhakarinfotech is world one of the best learning platform for web development.
    

Card With Footer

The card-footer might contain several card-footer-item elements.

General Syntax

      
        <div class="card">
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Card Link</a>
  </footer>
</div>

Try it now

Source Code

          
            <div class="card">
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Save</a>
    <a href="#" class="card-footer-item">Edit</a>
    <a href="#" class="card-footer-item">Delete</a>
  </footer>
</div>

Try it now

Source Code : Output

Complete Card

General Syntax

      
        <div class="card">
    <header class="card-header"></header>  
    <div class="card-content"></div>
    <footer class="card-footer"> </footer>
</div>

Try it now

Source Code

          
            <div class="card">
  <div class="card-content">
    <p class="title">sudhakarinfotech</p>
    <p class="subtitle">
      Providing web development tutorials for beginners and professionals.
    </p>
  </div>
  <footer class="card-footer">
    <p class="card-footer-item">
      <span>
        View on <a href="#">Twitter</a>
      </span>
    </p>
    <p class="card-footer-item">
      <span>
        Share on <a href="#">Facebook</a>
      </span>
    </p>
  </footer>
</div>

Try it now

Source Code : Output

sudhakarinfotech

Providing web development tutorials for beginners and professionals.

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4