Pro

Bootstrap Shapes

Flexible component for creating shaped elements

Torus Kit new features for Shapes
Square Circle

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.

Square
Image
<div class="square square-lg bg-black bg-a-30">
  <small>Square</small>
</div>

<div class="square square-lg">
  <img src="/assets/img/img-media-01.jpg" alt="Image">
</div>

Sizing

Add .square-{sm|md|lg} to use predefined sizes or add any of .p-* padding utility class to .square class.

sm
md
lg
.p-1
.p-3
.p-6
<!-- 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.

Image
Image
Image
<div class="square square-sm">
  <img src="/assets/img/img-media-01.jpg" alt="Image">
</div>

<div class="square square-md">
  <img src="/assets/img/img-media-01.jpg" alt="Image">
</div>

<div class="square square-lg">
  <img src="/assets/img/img-media-01.jpg" alt="Image">
</div>

Round corners

Use Border radius utility to create nice rounded corners with .square.

Rounded
<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.

circle
Image
<div class="circle circle-lg bg-black bg-a-30">
  <small>circle</small>
</div>

<div class="circle circle-lg">
  <img src="/assets/img/img-media-01.jpg" alt="Image">
</div>

Sizing

Use .circle-{sm|md|lg} to use predefined sizes or add any of .p-* padding utility class to .circle class.

sm
md
lg
.p-1
.p-3
.p-6
<!-- 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.

Image
Image
Image
<div class="circle circle-sm">
  <img src="/assets/img/img-media-01.jpg" alt="Image">
</div>

<div class="circle circle-md">
  <img src="/assets/img/img-media-01.jpg" alt="Image">
</div>

<div class="circle circle-lg">
  <img src="/assets/img/img-media-01.jpg" alt="Image">
</div>