Bulma | Image - GeeksforGeeks

18 Jun, 2020
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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- font-awesome cdn -->  <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>  </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="https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">            </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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- font-awesome cdn -->  <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>  </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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- font-awesome cdn -->  <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>  </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="https://media.geeksforgeeks.org/wp-content/uploads/20200617121759/bill-gates.jpg">              </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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- 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="https://media.geeksforgeeks.org/wp-content/uploads/20200617121933/24x241.png">                  </figure>                </td>              </tr>                <tr>                <td>                  <p>32x32px</p>                </td>                  <td>                  <figure class='image is-32x32'>                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200617122005/32x32.png">                  </figure>                </td>              </tr>                <tr>                <td>                  <p>48x48px</p>                </td>                  <td>                  <figure class='image is-48x48'>                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200617122245/48x48.png">                  </figure>                </td>              </tr>                <tr>                <td>                  <p>64x64px</p>                </td>                  <td>                  <figure class='image is-64x64'>                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200617122039/64x64.png">                  </figure>                </td>              </tr>                <tr>                <td>                  <p>96x96px</p>                </td>                  <td>                  <figure class='image is-96x96'>                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200617122433/96x96.png">                  </figure>                </td>              </tr>                <tr>                <td>                  <p>128x128px</p>                </td>                  <td>                  <figure class='image is-128x128'>                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200617122510/128x128.png">                  </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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- 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="https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">                  </figure>                </td>              </tr>                <tr>                <td>                  <p>5by4</p>                </td>                  <td>                  <figure class='image is-5by4'>                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">                  </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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- 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="https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">                  </figure>                </td>              </tr>                <tr>                <td>                  <p>3by2</p>                </td>                  <td>                  <figure class='image is-3by2'>                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">                  </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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- 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="https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">                  </figure>                </td>              </tr>                <tr>                <td>                  <p>16by9</p>                </td>                <td>                  <figure class='image is-16by9'>                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">                  </figure>                </td>              </tr>                <tr>                <td>                  <p>2by1</p>                </td>                  <td>                  <figure class='image is-2by1'>                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">                  </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.
Bulma
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?