About Lesson
In Bootstrap 5, buttons are an essential component used for user interaction and triggering actions. They come in various styles and sizes. Here are examples of how to use buttons in Bootstrap 5:
- Basic Button:
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>- Button with Icon:
<button type="button" class="btn btn-primary">
<i class="bi bi-heart-fill"></i> Like
</button>- Button Sizes:
<button type="button" class="btn btn-primary btn-lg">Large Button</button>
<button type="button" class="btn btn-primary">Default Button</button>
<button type="button" class="btn btn-primary btn-sm">Small Button</button>- Outline Button:
<button type="button" class="btn btn-outline-primary">Primary Button</button>
<button type="button" class="btn btn-outline-secondary">Secondary Button</button>- Disabled Button:
<button type="button" class="btn btn-primary" disabled>Disabled Button</button>- Button with Dropdown Menu:
<div class="btn-group">
<button type="button" class="btn btn-primary">Dropdown</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another Action</a></li>
<li><a class="dropdown-item" href="#">Something Else</a></li>
</ul>
</div>These examples demonstrate some common use cases for buttons in Bootstrap 5. You can customize buttons further by combining classes, using different colors, or incorporating other Bootstrap components. Remember to consult the official Bootstrap documentation for more details and options related to buttons in Bootstrap 5.
Join the conversation