Blog

Bulma – Image

Bulma image

In this guide, we will discuss Image in Bulma.

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-16×16
  • is-24×24
  • is-32×32
  • is-48×48
  • is-64×64
  • is-96×96
  • is-128×128

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://adglob.in/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               16x16
            </span>
            <br>
            <br>
            
            <figure class = "image is-24x24">
               <img src = "https://adglob.in/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               24x24
            </span>
            <br>
            <br>
            
            <figure class = "image is-32x32">
               <img src = "https://adglob.in/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               32x32
            </span>
            <br>
            <br>
            
            <figure class = "image is-48x48">
               <img src = "https://adglob.in/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               48x48
            </span>
            <br>
            <br>
            
            <figure class = "image is-64x64">
               <img src = "https://adglob.in/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               64x64
            </span>
            <br>
            <br>
            
            <figure class = "image is-96x96">
               <img src = "https://adglob.in/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               96x96
            </span>
            <br>
            <br>
            
            <figure class = "image is-128x128">
               <img src = "https://adglob.in/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://adglob.in/bootstrap/images/64.jpg">
            </figure>
            
         </div>
      </section>
      
   </body>
</html>

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://adglob.in/bootstrap/images/64.jpg">
            </figure>    
         </div>
      </section>
   </body>
   
</html>

To make use of remaining ratio modifiers, replace the above modifier with your ratio modifier in the figure tag.

Next Topic : Click Here

This Post Has 2 Comments

Leave a Reply