Bulma - Image

This chapter covers the Bulma support for images. The Bulma uses .image class to display the images in the page.
Bulma provides 7 types of dimensions to display the images −
is-16x16
is-16x16
is-24x24
is-24x24
is-32x32
is-32x32
is-48x48
is-48x48
is-64x64
is-64x64
is-96x96
is-96x96
is-128x128
is-128x128
Bulma provides .is-rounded class to make the rounded images.
The below example describes usage of above 7 dimensions and displaying of rounded image −
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <link href = "https://unpkg.com/ionicons@4.3.0/dist/css/ionicons.min.css" rel = "stylesheet">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
      <script src = "https://unpkg.com/ionicons@4.3.0/dist/ionicons.js"></script>
      <link rel = "stylesheet" href = "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css">
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "is-size-5">
               Fixed Square Images
            </span>
            <br>
            <br>
            
            <figure class = "image is-16x16">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               16x16
            </span>
            <br>
            <br>
            
            <figure class = "image is-24x24">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               24x24
            </span>
            <br>
            <br>
            
            <figure class = "image is-32x32">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               32x32
            </span>
            <br>
            <br>
            
            <figure class = "image is-48x48">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               48x48
            </span>
            <br>
            <br>
            
            <figure class = "image is-64x64">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               64x64
            </span>
            <br>
            <br>
            
            <figure class = "image is-96x96">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               96x96
            </span>
            <br>
            <br>
            
            <figure class = "image is-128x128">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               128x128
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Rounded Image
            </span>
            <br>
            <br>
            
            <figure class = "image is-128x128">
               <img class = "is-rounded" src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
         </div>
      </section>
      
   </body>
</html>
Execute the above code and it will display the below output −
Bulma provides below 16 ratio modifiers for the images.
is-square
is-square
is-1by1
is-1by1
is-5by4
is-5by4
is-4by3
is-4by3
is-3by2
is-3by2
is-5by3
is-5by3
is-16by9
is-16by9
is-2by1
is-2by1
is-3by1
is-3by1
is-4by5
is-4by5
is-3by4
is-3by4
is-2by3
is-2by3
is-3by5
is-3by5
is-9by16
is-9by16
is-1by2
is-1by2
is-1by3
is-1by3
The below example specifies displaying of an image with ratio modifier (here, we are using is-2by1 ratio modifier in the figure tag) −
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <link href = "https://unpkg.com/ionicons@4.3.0/dist/css/ionicons.min.css" rel = "stylesheet">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
      <script src = "https://unpkg.com/ionicons@4.3.0/dist/ionicons.js"></script>
      <link rel = "stylesheet" href = "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css">
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "is-size-5">
               Images with Ratio
            </span>
            <br>
            <br>
            
            <figure class = "image is-2by1">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>    
         </div>
      </section>
   </body>
   
</html>
It displays the below output −
To make use of remaining ratio modifiers, replace the above modifier with your ratio modifier in the figure tag.
 Print
 Add Notes
 Bookmark this page