Bulma | Image

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.




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.