Bootstrap4C

A selection of lightweight Bootstrap 4 UI components.

Buttons

bootstrap4c-buttons

<button type="button" class="btn btn-primary btn-pill">Pill button</button>

<button type="button" class="btn btn-white">White button</button>
<button type="button" class="btn btn-outline-white">White outline button</button>

On Off

<div class="btn-group btn-group-toggle btn-group-pill" data-toggle="buttons">
  <label class="btn btn-outline-secondary btn-switch-on active">
    <input type="radio" name="options" id="on" autocomplete="off" checked=""> On
  </label>
  <label class="btn btn-outline-secondary btn-switch-off">
    <input type="radio" name="options" id="off" autocomplete="off"> Off
  </label>
</div>

Try responsive!

<div class="btn-toolbar btn-toolbar-row" role="toolbar" aria-label="A11Y">
  <div class="btn-group btn-group-pill btn-group-xs-6 btn-group-md-reset" role="group" aria-label="A11Y">
    <button type="button" class="btn btn-primary btn-block">Save</button>
  </div>
  <div class="btn-group btn-group-pill btn-group-xs-6 btn-group-md-reset" role="group" aria-label="A11Y">
    <button type="button" class="btn btn-secondary btn-block">Cancel</button>
  </div>
</div>

Try responsive!

<div class="btn-toolbar btn-toolbar-row" role="toolbar" aria-label="a11y">
  <div class="btn-group btn-group-xs-4 btn-group-lg-reset" role="group" aria-label="a11y">
    <button type="button" class="btn btn-primary btn-block">Save</button>
  </div>
  <div class="btn-group btn-group-xs-4 btn-group-lg-reset" role="group" aria-label="a11y">
    <button type="button" class="btn btn-secondary btn-block">Cancel</button>
  </div>
  <div class="btn-group btn-group-xs-4 btn-group-lg-reset pull-xs-right" role="group" aria-label="a11y">
    <button type="button" class="btn btn-outline-danger btn-block">Delete</button>
  </div>
</div>