Bulma - Image

Previous
Quiz
Next

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 −

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

<!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
Print Page
Previous
Next
Advertisements