Circle Buttons

Create your own circle buttons with icons in Bootstrap 4. Bootstrap snippet by Bootstrapious

Small circle buttons

Regular circle buttons

Large circle buttons

XL circle buttons

Circle Button Code at:
https://jsfiddle.net/bootstrapious/g6bt8v9z/

Use cards as radio buttons for Bootstrap 4 - Advanced Components

by djibe.

(thx to BS4 + Daemonite Material Design)

Tutorial

  1. Wrap a standard radio input within a label:
    <label> <input type="radio" name="organization" class="card-input-element d-none" id="demo"> </label>
  2. Set CSS property display: none to this radio input. Here I use Bootstrap 4 utility d-none class.
  3. Within this label, just after the input type="radio", now add a simple div styled as a card:
    <div class="card card-body d-flex flex-row justify-content-between align-items-center"> Organization 1 </div>
  4. Add some CSS (refer to this fiddle CSS) for a better look.
  5. Et voilà

Demo

Click on those cards to play with radios styled as cards.
You can remove the animated check icon effect.

Choose your Organization:

Cards as Radio Button Code at:
https://jsfiddle.net/djibe89/at2cv9q1/