Skip to main content
codeFork me on GitHub favoriteMade by Daemon & djibe

Buttons - Floating action button

A floating action button (FAB) represents the primary action of a screen.

A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in three types: regular, mini, and extended.

Only use a FAB if it is the most suitable way to present a screen’s primary action.

Bootstrap documentation: Buttons Most of the details have been covered here Material Design guidelines: Buttons: floating action button Material Design guidelines: Applying density Material Components for the web: Floating Action Button

Floating action buttons

A floating action button represents the primary action in an application, it is used for a promoted action.

<button class="btn btn-secondary btn-float" type="button"><i class="material-icons">favorite_border</i></button>

Positioning

For a bottom right placement, wrap your floating button in a <div class="fab-container">...</div>.

The demo is at the bottom right of the screen.

<p class="font-weight-bold text-center">The demo is at the bottom right of the screen.</p>

<div class="fab-actions">
  <button class="d-none d-lg-flex btn btn-primary btn-float btn-float-extended" type="button" data-toggle="modal" data-target="#">
    <span class="material-icons">message</span>Comment</button>
  <button class="d-lg-none btn btn-primary btn-float" type="button" data-toggle="modal" data-target="#">
    <span class="material-icons">message</span></button>
</div>

Colors

<button class="btn btn-float my-1" type="button"><i class="material-icons">favorite_border</i></button>

<button class="btn btn-float btn-primary my-1" type="button"><i class="material-icons">favorite_border</i></button>

<button class="btn btn-float btn-secondary my-1" type="button"><i class="material-icons">favorite_border</i></button>

<button class="btn btn-float btn-danger my-1" type="button"><i class="material-icons">favorite_border</i></button>

<button class="btn btn-float btn-info my-1" type="button"><i class="material-icons">favorite_border</i></button>

<button class="btn btn-float btn-success my-1" type="button"><i class="material-icons">favorite_border</i></button>

<button class="btn btn-float btn-warning my-1" type="button"><i class="material-icons">favorite_border</i></button>

<button class="btn btn-float btn-dark my-1" type="button"><i class="material-icons">favorite_border</i></button>

<button class="btn btn-float btn-light my-1" type="button"><i class="material-icons">favorite_border</i></button>

Floating action buttons can also work with dropdown menus to fling out related actions:

<div class="btn-float-dropdown dropdown">
  <button aria-expanded="false" aria-haspopup="true" class="btn btn-float btn-primary" data-toggle="dropdown" type="button"><i class="material-icons">add</i></button>
  <div class="dropdown-menu">
    <button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
    <button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
    <button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
  </div>
</div>

Or flinging them upwards:

<div class="btn-float-dropdown dropup">
  <button aria-expanded="false" aria-haspopup="true" class="btn btn-float btn-primary" data-toggle="dropdown" type="button"><i class="material-icons">add</i></button>
  <div class="dropdown-menu">
    <button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
    <button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
    <button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
  </div>
</div>

Sizes

A smaller sized, i.e. mini floating action button, is also available.

<button class="btn btn-secondary btn-float btn-sm" type="button"><i class="material-icons">favorite_border</i></button>

Extended FAB

A larger FAB button has been introduced in recent Material guidelines. Add btn-float-extended class to your actual FAB.

To place icon after the label, use Bootstrap’s flex utily order-2.

<button class="btn btn-secondary btn-float btn-float-extended" type="button"><i class="material-icons">add</i>Create</button>
<button class="btn btn-secondary btn-float btn-float-extended" type="button"><i class="material-icons order-2">add</i>Create</button>

Extended FAB (without Icon)

<button class="btn btn-secondary btn-float btn-float-extended" type="button">Create</button>