Open In App

Bulma Rounded images

Bulma is a free and open-source CSS framework which ships with premade components and elements. It makes the development of websites very fast as you do not have to style everything from scratch.  In this article, we will be using Bulma is-rounded class to make an image round.

Bulma Rounded Images Class:



Syntax:

<figure class="image is-64x64">
    <img class="is-rounded" src="./link-to-image">
</figure>

Below example illustrate the Bulma Rounded images:



Example: The below example illustrates the use of the Bulma is-rounded class to make an image round.




<!DOCTYPE html>
<html>
 
<head>
    <title>Bulma Rounded Images</title>
    <link rel='stylesheet' href=
 
    <style>
        figure {
            margin: 20px auto;
        }
    </style>
</head>
 
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
     
    <b>Bulma Rounded Images</b>
     
    <div class="container">
        <figure class="image is-64x64">
            <img class="is-rounded"
                src=
                alt="Gfg logo">
        </figure>
    </div>
</body>
 
</html>

Output:

Bulma Rounded images

Reference: https://bulma.io/documentation/elements/image/#rounded-images


Article Tags :