Circles are used to add visual interest to body text, they often help to represent steps in a process or to accompany a set of discrete points. Circles may contain images, iconography or letters, and are generally central in their column, or used as avatars, left-aligned in lists.

{% highlight html %}

{% endhighlight %}

Size variations

Add any of the below modifier classes to change the size of a circle. Nest circles in links to gain hover states.

{% highlight html %} ...

... ... {% endhighlight %}

Inverse circles

There are two styling variants. If you are using a circle on a white background use the .circle-inverse class to apply a contrasting background.

{% highlight html %} ... {% endhighlight %}

Responsive circles

The responsive circle variant decreases in size on smaller screen widths, the md circle takes the size of an sm, and the lg variant takes on the size of an md. Simply add the .circle-responsive class.

{% highlight html %}

...

{% endhighlight %}