Bulma - Image

Description

This chapter covers the Bulma support for images. The Bulma uses .image class to display the images in the page.

Fixed Square and Rounded Images

Bulma provides 7 types of dimensions to display the images −

  • is-16x16

  • is-24x24

  • is-32x32

  • is-48x48

  • is-64x64

  • is-96x96

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

Live Demo 
<!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 −

Responsive Images with Ratios

Bulma provides below 16 ratio modifiers for the images.

  • is-square

  • is-1by1

  • is-5by4

  • is-4by3

  • is-3by2

  • is-5by3

  • is-16by9

  • is-2by1

  • is-3by1

  • is-4by5

  • is-3by4

  • is-2by3

  • is-3by5

  • is-9by16

  • is-1by2

  • 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) −

Live Demo 
<!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.

bulma_elements.htm
Advertisements