Open In App

Bulma | Image

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.
The image class is kind of a container since images took few minutes to load, an image container is reserved space for that image so that website’s layout not going to break while image loading or even in image errors.

Example 1: This example using Bulma to display the image.




<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Image</title>
  <link rel='stylesheet' href=
  
  <!-- font-awesome cdn -->
  <script src=
  </script>
  
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 20px;
    }
  
    h1 {
      margin-top: 10px;
      margin-bottom: 20px;
      color: green !important
    }
  
    p {
      font-family: calibri;
      font-size: 16px;
      text-align: justify;
    }
  
    div p {
      margin-top: 10px;
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-6'>
        <div>
          <h1 class='title has-text-centered'>
            Display image
          </h1>
        </div>
        <div class='box'>
          <div>
            <figure class="image is-5by3">
              <img src=
            </figure>
          </div>
          <div>
            <p>
              A computer is a machine that can be
              instructed to carry out sequences 
              of arithmetic or logical operations
              automatically via computer 
              programming. Modern computers have 
              the ability to follow generalized 
              sets of operations, called programs.
              These programs enable computers to 
              perform an extremely wide range of 
              tasks.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
  
</html>


Output:

Example 2: This example using Bulma to display loading error or image error.




<html>
  
<head>
  <title>Bulma Image</title>
  <link rel='stylesheet' href=
  
  <!-- font-awesome cdn -->
  <script src=
  </script>
  
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 20px;
    }
  
    h1 {
      margin-top: 10px;
      margin-bottom: 20px;
      color: green !important
    }
  
    p {
      font-family: calibri;
      font-size: 16px;
      text-align: justify;
    }
  
    div p {
      margin-top: 10px;
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-6'>
        <div>
          <h1 class='title has-text-centered'>
            Image Error
          </h1>
        </div>
        <div class='box'>
          <div>
            <figure class="image is-5by3">
  
              <!-- image url does not exist -->
              <img src="https://false/image">
            </figure>
          </div>
          <div>
            <p>
              A computer is a machine that can be 
              instructed to carry out sequences 
              of arithmetic or logical operations
              automatically via computer programming. 
              Modern computers have the ability to 
              follow generalized sets of operations,
              called programs. These programs enable 
              computers to perform an extremely wide 
              range of tasks.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
  
</html>


Output:

Explanation: Bulma image class acts as a container that reserved space for the image so that website layout is not going to break even when image error occurs. Here we provide a false image URL but in spite of that space is reserved for the image to load.

Example 3: This example using Bulma to create a rounded Image.




<html>
  
<head>
  <title>Bulma Image</title>
  <link rel='stylesheet' href=
  
  <!-- font-awesome cdn -->
  <script src=
  </script>
    
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 80px;
    }
  
    .buttons {
      margin-top: 15px;
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-5'>
        <div class="box">
          <article class="media">
            <div class="media-left">
              <figure class="image is-128x128">
                <img class='is-rounded'
                  src=
              </figure>
            </div>
            <div class="media-content">
              <div class="content">
                <p>
                  <strong>Bill Gates</strong
                  <small>@BillGates</small
                  <small>36m</small>
                  <br>
                  The horrifying killings of 
                  George Floyd, Ahmaud Arbery, 
                  Breonna Taylor and far too 
                  many other Black people—and 
                  the protests they sparked—are
                  shining a light on the brutal 
                  injustices that Black people 
                  experience every day...
                </p>
              </div>
              <nav class="level is-mobile">
                <div class="level-left">
                  <a class="level-item">
                    <span class="icon is-small">
                      <i class="fas fa-reply"></i>
                    </span>
                  </a>
                  <a class="level-item">
                    <span class="icon is-small">
                      <i class="fas fa-retweet"></i>
                    </span>
                  </a>
                  <a class="level-item">
                    <span class="icon is-small">
                      <i class="fas fa-heart"></i>
                    </span>
                  </a>
                </div>
              </nav>
            </div>
          </article>
        </div>
      </div>
    </div>
  </div>
</body>
  
</html>


Output:

Example 4: This example using Bulma to create different size of images.




<html>
  
<head>
  <title>Bulma Image</title>
  <link rel='stylesheet' href=
  
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 80px;
    }
  
    p {
      font-size: 20px
    }
  
    th {
      font-size: 20px;
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-6'>
        <div class="box">
          <table class='table is-fullwidth'>
            <thead>
              <tr>
                <th>Size</th>
                <th>Image</th>
              </tr>
            </thead>
  
            <tbody>
              <tr>
                <td>
                  <p>24x24px</p>
                </td>
  
                <td>
                  <figure class='image is-24x24'>
                    <img src=
                  </figure>
                </td>
              </tr>
  
              <tr>
                <td>
                  <p>32x32px</p>
                </td>
  
                <td>
                  <figure class='image is-32x32'>
                    <img src=
                  </figure>
                </td>
              </tr>
  
              <tr>
                <td>
                  <p>48x48px</p>
                </td>
  
                <td>
                  <figure class='image is-48x48'>
                    <img src=
                  </figure>
                </td>
              </tr>
  
              <tr>
                <td>
                  <p>64x64px</p>
                </td>
  
                <td>
                  <figure class='image is-64x64'>
                    <img src=
                  </figure>
                </td>
              </tr>
  
              <tr>
                <td>
                  <p>96x96px</p>
                </td>
  
                <td>
                  <figure class='image is-96x96'>
                    <img src=
                  </figure>
                </td>
              </tr>
  
              <tr>
                <td>
                  <p>128x128px</p>
                </td>
  
                <td>
                  <figure class='image is-128x128'>
                    <img src=
                  </figure>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>
  
</html>


Output:

Example 5: This example uses Bulma to create a responsive image with aspect ratio.




<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Image</title>
  <link rel='stylesheet' href=
  
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 20px;
    }
  
    p {
      font-size: 20px
    }
  
    th {
      font-size: 20px;
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-6'>
        <div class="box">
          <table class='table is-fullwidth'>
            <thead>
              <tr>
                <th>Size</th>
                <th>Image</th>
              </tr>
            </thead>
  
            <tbody>
              <tr>
                <td>
                  <p>1by1</p>
                </td>
  
                <td>
                  <figure class='image is-1by1'>
                    <img src=
                  </figure>
                </td>
              </tr>
  
              <tr>
                <td>
                  <p>5by4</p>
                </td>
  
                <td>
                  <figure class='image is-5by4'>
                    <img src=
                  </figure>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>
  
</html>


Output:

Example 6: This example uses Bulma to create a responsive image with aspect ratio.




<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Image</title>
  <link rel='stylesheet' href=
  
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 20px;
    }
  
    p {
      font-size: 20px
    }
  
    th {
      font-size: 20px;
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-6'>
        <div class="box">
          <table class='table is-fullwidth'>
            <thead>
              <tr>
                <th>Size</th>
                <th>Image</th>
              </tr>
            </thead>
  
            <tbody>
              <tr>
                <td>
                  <p>4by3</p>
                </td>
  
                <td>
                  <figure class='image is-4by3'>
                    <img src=
                  </figure>
                </td>
              </tr>
  
              <tr>
                <td>
                  <p>3by2</p>
                </td>
  
                <td>
                  <figure class='image is-3by2'>
                    <img src=
                  </figure>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>
  
</html>


Output:

Example 7: This example uses Bulma to create a responsive image with aspect ratio.




<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Image</title>
  <link rel='stylesheet' href=
  
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 5px;
    }
  
    p {
      font-size: 20px
    }
  
    th {
      font-size: 20px;
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-6'>
        <div class="box">
          <table class='table is-fullwidth'>
            <thead>
              <tr>
                <th>Size</th>
                <th>Image</th>
              </tr>
            </thead>
  
            <tbody>
              <tr>
                <td>
                  <p>5by3</p>
                </td>
  
                <td>
                  <figure class='image is-5by3'>
                    <img src=
                  </figure>
                </td>
              </tr>
  
              <tr>
                <td>
                  <p>16by9</p>
                </td>
                <td>
                  <figure class='image is-16by9'>
                    <img src=
                  </figure>
                </td>
              </tr>
  
              <tr>
                <td>
                  <p>2by1</p>
                </td>
  
                <td>
                  <figure class='image is-2by1'>
                    <img src=
                  </figure>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>
  
</html>


Output:

Note: Here in all the above examples, we use some extra Bulma classes like container, column, title, table, etc. to design the content well.



Last Updated : 18 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads