Bootstrap 5 Floating Action Button

This code snippet adds a set of floating action buttons to your Bootstrap 5 project. Placed in the bottom right corner, a primary button expands to reveal secondary action buttons for quick access to various functions. Helpful for enhancing user interaction and navigation.

You can use this code in your Bootstrap 5 projects to create a sleek floating action button menu. The code is easy to integrate and customize, making it a valuable addition to your web applications.

How to Create Bootstrap 5 Floating Action Button

1. First, in the <head> section of your HTML file, include the Material Icons and Bootstrap 5 CSS dependencies using the provided CDN links. This ensures that the required styles and icons are loaded.

<!-- Material Icons -->
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

2. Inside your HTML body, create a container for the floating action button (FAB) and its sub-buttons. You can customize the content and links within the sub-buttons to suit your project’s needs.

<h2> Look at Bottom Right Corner </h2>
<p> This page demonstrate floating action buttons for Bootstrap 5 projects. </p>

<div class="fab-container">
  <div class="fab shadow">
    <div class="fab-content">
      <span class="material-icons">support_agent</span>
    </div>
  </div>
  <div class="sub-button shadow">
    <a href="google.com" target="_blank">
      <span class="material-icons">phone</span>
    </a>
  </div>
  <div class="sub-button shadow">
    <a href="google.com" target="_blank">
      <span class="material-icons">mail_outline</span>
    </a>
  </div>
  <div class="sub-button shadow">
    <a href="google.com" target="_blank">
      <span class="material-icons">language</span>
    </a>
  </div>
  <div class="sub-button shadow">
    <a href="google.com" target="_blank">
      <span class="material-icons">help_outline</span>
    </a>
  </div>
</div>

3. Include the following CSS code in your project. This CSS code is responsible for the positioning and animation of the FAB and its sub-buttons. It ensures that the FAB expands when hovered, revealing the sub-buttons.

.fab-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  user-select: none;
  position: absolute;
  bottom: 30px;
  right: 30px;
}
.fab-container:hover {
  height: 100%;
}
.fab-container:hover .sub-button:nth-child(2) {
  transform: translateY(-80px);
}
.fab-container:hover .sub-button:nth-child(3) {
  transform: translateY(-140px);
}
.fab-container:hover .sub-button:nth-child(4) {
  transform: translateY(-200px);
}
.fab-container:hover .sub-button:nth-child(5) {
  transform: translateY(-260px);
}
.fab-container:hover .sub-button:nth-child(6) {
  transform: translateY(-320px);
}
.fab-container .fab {
  position: relative;
  height: 70px;
  width: 70px;
  background-color: #4ba2ff;
  border-radius: 50%;
  z-index: 2;
}
.fab-container .fab::before {
  content: " ";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 35px;
  width: 35px;
  background-color: inherit;
  border-radius: 0 0 10px 0;
  z-index: -1;
}
.fab-container .fab .fab-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.fab-container .fab .fab-content .material-icons {
  color: white;
  font-size: 48px;
}
.fab-container .sub-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 10px;
  right: 10px;
  height: 50px;
  width: 50px;
  background-color: #4ba2ff;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.fab-container .sub-button:hover {
  cursor: pointer;
}
.fab-container .sub-button .material-icons {
  color: white;
  padding-top: 6px;
}

Customize the FAB icons, colors, and links as per your project requirements. You can change the icons by modifying the <span class="material-icons"> tags and adjust the colors by updating the background-color properties in the CSS.

That’s it! You’ve successfully implemented the “Bootstrap 5 Floating Action Button” in your project. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Code Snippet:	FAB - Floating Action Button - CSS with bootstrap
Author:	florent
Published:	January 20, 2024
Last Updated:	January 22, 2024
Downloads:	4,746

License:	MIT
Edit Code online:	View on CodePen

How to Create Bootstrap 5 Floating Action Button

Similar Code Snippets:

Leave a Comment Cancel reply