Bootstrap Shapes
Flexible component for creating shaped elements
Overview
A flexible component that allows to create circle and square shaped elements in any size. It’s useful especially for building avatars, media objects, circle indicators, person profiles, etc. The main advantage is that it can contain image in any dimension and it will still maintain the same height and width and keep the aspect ratio for that image. Choose between sm, md and lg sizes that are sized according the Bootstrap .btn classes, or add any .p-* padding class to it.
Inner content has to be wrapped in some HTML tag to preserve right behavior and vertical and horizontal centering.
.square and .circle class has default padding: 50%, so it's automatically scaled to its parent. Use <square|circle>-<sm|md|lg> or .p-* padding utility to properly size it.
Square
Create a square-shaped element by using a .square class with .square-<sm|md|lg>. Inner content is size-independent and it’s automatically centered.
Basic example
This example shows the basic .square with background color and the one with the image.
<div class="square square-lg bg-secondary">
<small>Square</small>
</div>
<div class="square square-lg">
<img src="..." class="w-h-100" alt="...">
</div>Sizing
Add .square-<sm|md|lg> to use predefined sizes or add any of .p-* padding utility class to .square class.
<!-- Predefined sizes -->
<div class="square square-sm">...</div>
<div class="square square-md">...</div>
<div class="square square-lg">...</div>
<!-- Using padding utility -->
<div class="square p-1">...</div>
<div class="square p-3">...</div>
<div class="square p-6">...</div>Image inside
Just wrap any <img> image with element that has .square class. It’ll be automatically resized and centered.
<div class="square square-sm">
<img src="..." class="w-h-100" alt="...">
</div>
<div class="square square-md">
<img src="..." class="w-h-100" alt="...">
</div>
<div class="square square-lg">
<img src="..." class="w-h-100" alt="...">
</div>Round corners
Use [Border radius]/docs/utilities/borders/#border-radius) utility to create nice rounded corners with .square.
<div class="square rounded p-5">...</div>Circle
Create a circle-shaped element by using a .circle class with .circle-<sm|md|lg>. Inner content is size-independent and it’s automatically centered.
Basic example
This example shows the basic .circle-* with background color and the one with the image.
<div class="circle circle-lg bg-secondary">
<small>circle</small>
</div>
<div class="circle circle-lg">
<img src="..." class="w-h-100" alt="...">
</div>Sizing
Use .circle-<sm|md|lg> to use predefined sizes or add any of .p-* [padding utility]/docs/utilities/spacing/) class to .circle class.
<!-- Predefined sizes -->
<div class="circle circle-sm">...</div>
<div class="circle circle-md">...</div>
<div class="circle circle-lg">...</div>
<!-- Using padding utility -->
<div class="circle p-1">...</div>
<div class="circle p-3">...</div>
<div class="circle p-6">...</div>Image inside
Just wrap any <img> image with element that has .circle class. It’ll be automatically resized and centered.
<div class="circle circle-sm">
<img src="..." class="w-h-100" alt="...">
</div>
<div class="circle circle-md">
<img src="..." class="w-h-100" alt="...">
</div>
<div class="circle circle-lg">
<img src="..." class="w-h-100" alt="...">
</div>