brandv1.0
Utilities
Data Display
Data Entry

Shapes

Change the shape using rounded-* classes

Image Shapes

Change the shape of an image using .rounded or .circle modifier classes. In addition use .img-thumbnail to give an image 1px border appearance.

img
img
img
img
							
                                
<template>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
        </div>
    </div>
</template>
Shapes

Change the shape of an image using .rounded or .circle.rounded-1,2,3

							
                                
<template>
    <div class="d-17 bg-gray-light-4"></div>
    <div class="d-17 bg-gray-light-4 circle"></div>
    <div class="d-17 bg-gray-light-4 rounded-15"></div>
    <div class="d-17 bg-gray-light-4 rounded-10"></div>
    <div class="d-17 bg-gray-light-4 rounded-5"></div>
</template>
Class Values
class="rounded-[value]" 1 / 2 / 3 / 4 / 5 ... / 34 (step of 1)
Jump to