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/[email protected]/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:
Bootstrap 5 Alert Auto Close
Portfolio Filter Gallery Bootstrap 5
Product Card Using Bootstrap 5
Simple Landing Page Using Bootstrap 5
Bootstrap 5 Password Strength Meter
Bootstrap 5 Notification Bell Dropdown
Bootstrap Collapsible Sidebar With Icons
Bootstrap 5 Sidebar Menu with Submenu Collapse/Hover Tutorial Demo
Bootstrap 5 Floating Label input Group
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.