Buttons
Default Button
Create buttons in Bootstrap by adding the .btn
class along with contextual classes like .btn-primary
, .btn-secondary
, or .btn-success
to style the button.
Use the .btn
class to create buttons in Bootstrap. Add the .rounded-pill
class to give the button rounded edges, creating a pill-shaped button.
Light Button
Create light-themed buttons in Bootstrap by using the .btn-light
class. You can also add variations like .btn-light-primary
or .btn-light-secondary
for different color accents.
Create light-themed, pill-shaped buttons in Bootstrap by combining the .btn-light-*
class with .rounded-pill
. This gives the button a light color and rounded edges for a sleek look.
Outline Buttons
Create outline buttons in Bootstrap using the .btn-outline-*
class. This gives the button a border and transparent background, with color variations like .btn-outline-primary
or .btn-outline-secondary
.
Create outline buttons with rounded edges in Bootstrap by using the .btn-outline-*
class along with .rounded-pill
. This combines a transparent button with a sleek, pill-shaped design.
Text Button
Create text-only buttons in Bootstrap using the .btn-text-*
class. This removes the background and border, leaving only the text styled as a button.
Buttons Size
Adjust button sizes in Bootstrap by using the size classes .btn-sm
for smaller buttons and .btn-lg
for larger buttons. The default size is applied when no size class is used.
Social Buttons
Create social media buttons in Bootstrap by using the .btn
class along with custom color classes for each platform, such as .btn-facebook
, .btn-light-facebook
,.btn-twitter
or .btn-light-twitter
, to match the respective brand styles.
Create social media outline buttons in Bootstrap using the .btn btn-outline-youtube
class. This gives the button a transparent background with a colored border, styled for the YouTube brand.
Icon Buttons
Create icon buttons in Bootstrap by combining the .btn
class with an icon, such as using an icon from a library like Remix Icon. This allows you to add visual elements alongside button text.
Create icon buttons in Bootstrap by using the .icon-btn
class along with an icon from an icon library. This class styles the button to incorporate an icon, making it visually appealing and functional.
Icon Button Size
Create icon buttons in Bootstrap using the .icon-btn
class. Adjust the size with .icon-btn-sm
for smaller buttons, allowing for a compact design while incorporating icons.
Custom Toggle Buttons
Create custom toggle buttons in Bootstrap using the .btn-loader
class to show a loading state. By default, use .indicator-label
for button text, which changes to .indicator-progress
after clicking to indicate the loading process.
Loading Animations
Add loading animations in Bootstrap using the .btn-loader
class. Incorporate .spinner-grow
or .spinner-border
classes to show different types of spinners, providing visual feedback during loading processes.
Full width button
Create a full-width button in Bootstrap by using the .w-100
class along with the .btn
class. This makes the button stretch to fill its container, ensuring it occupies the entire width available.