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.
<!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 --> </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.
Please Login to comment...