Bootstrap button: class, colors and advanced examples

This is the first part of the Boost your Bootstrap series where I’m going to explain Bootstrap basics, how to use Bootstrap components and utilities, and how to get more from its features using Torus Kit.

Bootstrap button class

Use the main .btn class on <button>, <a> or <input> element. This removes the default button styling and replaces it with the new Bootstrap button CSS. Then add one of the Bootstrap button colors to add semantic meaning and further stylings such as size, glow, or indicators. Buttons with .btn class get pointer cursor automatically when hovered.

Default .btn class without any further styling:

<button type="button" class="btn">Default button</button>

Bootstrap button color

To set the color to your button, add .btn-* class to the existing .btn. Bootstrap buttons comes in several colors, each with different meaning.

A list of Bootstrap button colors:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-gray">Gray</button>

Bootstrap button size

You can change the Bootstrap button size with two predefined classes: .btn-sm, to make the button smaller and .btn-lg to make it larger. If this is not enough, use Sizing utilities such as .p-* to add a padding.

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary p-4">Custom sized button</button>

Bootstrap button style

Change the default look of the buttons with some handy Torus Kit button utilities. Make the buttons as an outline, add glow, create circular-shaped buttons, or create advanced button interactions.

Outline

If you prefer more gentle buttons, add .btn-outline-* class to the .btn element to make it outlined. This will add a 1px border and set the background color to transparent. Outline style is great when you have several buttons together, but you need to indicate that this button is not so important as others.

<button type="button" class="btn btn-outline-primary">Outline button</button>

Soft style button

If you need to create a gentle button that nicely merges into your design, but the outline style is not in the case, use Torus Kit’s Soft buttons style. This makes the button background lighter but keeps sufficient contrast for correct accessibility.

<button type="button" class="btn btn-soft-primary">Primary</button>
<button type="button" class="btn btn-soft-secondary">Secondary</button>
<button type="button" class="btn btn-soft-success">Success</button>

Glow

Need a cool Bootstrap button? Make it glow. With the help of Torus Kit Shadow color utility, you can create a nice glowing button that stands out from the rest of the content.

<button type="button" class="btn shadow-lg shadow-intensity-lg shadow-primary btn-primary">Primary</button>
<button type="button" class="btn shadow-lg shadow-intensity-lg shadow-secondary btn-secondary">Secondary</button>
<button type="button" class="btn shadow-lg shadow-intensity-lg shadow-danger btn-danger">Danger</button>

Bootstrap button examples

Here are a couple of real examples of how to create advanced button styling and interactions with Torus Kit utilities.

Button with icon

Buttons do not have to be text-only. You can add some icons to convey meaning and make the navigation more clear and intuitive. This example shows how to create the “Add to basket” button used across e-commerce sites. We’re using Bootstrap icons here, but any icon pack could be used.

To create a nicely aligned button content, wrap the button text into the <span> element. Then add your icon before or after this text wrapper. This places the icon on the left or right side. And finally, add .has-icon class the .btn element. It’s a Torus Kit small utility class that aligns the button content and adds a small margin to the icon to make the button visually more appealing.

<button type="button" class="btn btn-primary has-icon">
  <i class="bi bi-basket2-fill"></i>
  <span>Add to basket</span>
</button>

<button type="button" class="btn btn-outline-primary has-icon">
  <span>Add to basket</span>
  <i class="bi bi-basket2-fill"></i>
</button>

You can also use whole <svg> icon code inside a button.

<button type="button" class="btn btn-primary has-icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-basket2-fill" viewBox="0 0 16 16">
    <path d="M5.929 1.757a.5.5 0 1 0-.858-.514L2.217 6H.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h.623l1.844 6.456A.75.75 0 0 0 3.69 15h8.622a.75.75 0 0 0 .722-.544L14.877 8h.623a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1.717L10.93 1.243a.5.5 0 1 0-.858.514L12.617 6H3.383L5.93 1.757zM4 10a1 1 0 0 1 2 0v2a1 1 0 1 1-2 0v-2zm3 0a1 1 0 0 1 2 0v2a1 1 0 1 1-2 0v-2zm4-1a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1z"/>
  </svg>
  <span>Add to basket<span>
</button>

It’s also easy to create search button with icon using Bootstrap button group.

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="button-addon2">
  <button class="btn btn-primary text-white has-icon" type="button" id="button-addon2">
    <i class="bi bi-search"></i>
  </button>
</div>

Circle button

To make a circular Bootstrap button, add .circle class to .btn element with appropriate .circle-* size utility class. You can also define the circle button size using p-* padding utilities.

Circle buttons can contain icons and can be used to create notification buttons, avatars, paginations, and so on. The button content is automatically centered on the horizontal and vertical axis.

Something went wrong!

<button type="button" class="btn btn-primary circle circle-md">
  <i class="bi bi-basket2-fill"></i>
</button>

<button class="btn btn-secondary position-relative">
  Something went wrong!
  <span class="circle bg-danger text-white p-3 position-absolute" data-tor="place.right place.top shift.right(50%) shift.up(50%) loop:radiate.danger">
    <i class="bi bi-exclamation-circle-fill"></i>
  </span>
</button>

<button type="button" class="btn circle p-5">
  <img class="h-100" src="..." alt="...">
</button>

Button indicators

Torus Kit comes with built-in support for button arrows and chevrons. Just use .btn-arrow or .btn-arrow-left to add an arrow indicator and .btn-chevron or .btn-chevron-left to add an chevron indicator. This makes the creation of navigations super easy. It can be also used to create pagination, read-more buttons, and so on.

<button type="button" class="btn btn-primary btn-arrow">Arrow button</button>
<button type="button" class="btn btn-primary btn-arrow-left">Arrow button</button>

<button type="button" class="btn btn-primary btn-chevron">Chevron button</button>
<button type="button" class="btn btn-primary btn-chevron-left">Chevron button</button>

Loading button

To indicate the loading state on the button, you can use the built-in animated Spinner component. With the Torus Kit Effects and Class actions you can easily create Bootstrap loading button on click.

Using data-tor="click:class.toggle(p-2 ms-2, {target: #button-spinner})" will toggle the #button-spinner padding and margin from 0rem to value defined by .p-2 and ms-2 classes and makes it grow and shrink together with the button width.

<button class="btn btn-primary has-icon" type="button">
  <span>Button</span>
  <span class="spinner p-2 ms-2" role="status">
    <svg viewBox="0 0 40 40"><circle r="15"/></svg>
    <span class="visually-hidden">Loading...</span>
  </span>
</button>

<!-- Bootstrap loading button on click -->
<button class="btn btn-primary has-icon" type="button" data-tor="click:class.toggle(p-2 ms-2, {target: #button-spinner})">
  <span>Toggle spinner</span>
  <span id="button-spinner" class="spinner p-0" role="status" data-tor="">
    <svg viewBox="0 0 40 40"><circle r="15"/></svg>
    <span class="visually-hidden">Loading...</span>
  </span>
</button>

Button hover effects

Add multiple effects to Bootstrap buttons using Torus Kit powerful Effects tool to create advanced hover interactions. No need to write any CSS styles or JS scripts. Everything is defined right in the HTML. These are couple of examples how to apply some effects on Bootstrap buttons.

<!-- Scale and rotate -->
<button type="button" class="btn btn-primary" data-tor="hover:[scale.to(125%) rotate.to(5deg)]">Effect 1</button>

<!-- Move up with sticky shadow -->
<button type="button" class="btn btn-danger shadow" data-tor="hover:[push.up(sm) shadow-offset.down(md)]">Effect 2</button>

<!-- Toggle hamburger navigation -->
<button id="btn" type="button" class="btn btn-secondary circle circle-md" data-tor="click:class.toggle(active)">
  <i class="bi bi-list" data-tor="active(#btn):reveal.hide(left)"></i>
  <i class="bi bi-x position-absolute" data-tor="active(#btn):[scale.from(0%) rotate.from(90deg)] slow"></i>
</button>

<!-- Flip Bootstrap button -->
<div class="tor-flip d-inline-block" data-tor="hover:rotateX.to(180deg) exponential">
  <div class="tor-flip-front" data-tor-parent="hover">
    <button type="button" class="btn btn-secondary">Hover me</button>
  </div>
  <div class="tor-flip-back center-h">
    <button type="button" class="btn btn-primary btn-arrow-left">Back</button>
  </div>
</div>

Wrapping up

Bootstrap adds custom style to the default <button> element with a couple of handy utilities. You can use the Bootstrap button for actions in forms, dialogs, navigations, paginations, and so on.

The main .btn class, that adds a default Bootstrap button style, should be combined with the .btn-* color variations to set a button style and add a semantic meaning. Using .btn-sm and .btn-lg you can create a smaller or larger button. It’s also possible to set button size with .p-* padding utilities.

Torus Kit extends the Bootstrap button styles and adds new ones such as Soft style, Glow button or Circle button.

You can also easily create Bootstrap button with icon by adding the .has-icon class to the button and placing the icon element inside. This adds a small space between the icon and the button text. Bootstrap circle button can be quickly done with the use of the .circle class.

And finally, Torus Kit Effects adds interactivity to your buttons. You can create advanced hover effects or use the button to toggle the classes using Torus Kit’s Class actions.