Buttons with icons
Bootstrap 5 Buttons with icons component
Responsive buttons with icons built with Bootstrap 5. Enhance your web design with stylish, intuitive buttons that include icons for improved user experience.
Floating
Use .btn-floating
class to make a circle button.
To make it works properly you have to put an icon inside. The text will not fit in. You can find hundreds of available icons in our icons docs.
You can apply almost all the same classes and attributes to the floating buttons as to the regular buttons - colors, ripples, sizes, outline, etc.
Text
You don't need to use only an icon. You can add text to the button. Remember to add some
spacing classes (for example .me-2
) to provide a proper space between icon and
text.
Only icon
By removing button classes and replacing background-color
with
color
you can create minimalistic, clickable icons.
Notifications
By using a badge you can create a button with a notification to provide a counter.