Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Block Buttons in Bootstrap 5
Block Buttons: Full-width buttons that span the entire width of their parent container.
What are Block Buttons?
Block buttons extend to fill the full width of their parent container. They're created using the .d-grid or .btn-block utility classes.
Regular Button
.w-100 makes button full width
Block Button Container
.d-grid container with button
Creating Block Buttons
Block Button Methods
Method 1: Using .d-grid (Recommended)
Method 2: Using .w-100
Method 3: Responsive Block Buttons
<!-- Method 1: Using .d-grid (Recommended) -->
<div class="d-grid gap-2">
<button class="btn btn-primary">Primary Block Button</button>
<button class="btn btn-secondary">Secondary Block Button</button>
</div>
<!-- Method 2: Using .w-100 -->
<button class="btn btn-success w-100">Full Width Button</button>
<button class="btn btn-outline-danger w-100">Full Width Outline</button>
<!-- Method 3: Responsive Block -->
<div class="d-grid gap-2 col-md-8 mx-auto">
<button class="btn btn-warning">Centered Block</button>
</div>Block Button Variations
Different Block Button Styles
<!-- Block Button Variations -->
<div class="d-grid gap-2">
<!-- Large Block Button with Icon -->
<button class="btn btn-primary btn-lg">
<i class="bi bi-rocket-takeoff me-2"></i>
Large Block Button
</button>
<!-- Outline Block Button -->
<button class="btn btn-outline-success">
<i class="bi bi-check-circle me-2"></i>
Outline Block Button
</button>
<!-- Small Block Button -->
<button class="btn btn-danger btn-sm">
<i class="bi bi-trash me-2"></i>
Small Block Button
</button>
<!-- Disabled Block Button -->
<button class="btn btn-dark" disabled>
<i class="bi bi-lock me-2"></i>
Disabled Block Button
</button>
</div>Responsive Block Buttons
Create block buttons that only appear as blocks on specific screen sizes.
Responsive Behavior
On mobile: Buttons stack vertically (block)
On desktop: Buttons appear inline
<!-- Responsive Block Buttons -->
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary">Responsive Button</button>
<button class="btn btn-secondary">Stacked on Mobile</button>
</div>
<!-- Block only on mobile -->
<div class="d-grid d-sm-block gap-2">
<button class="btn btn-warning">Mobile Block</button>
</div>
<!-- Block on all screens except large -->
<div class="d-grid d-lg-block gap-2">
<button class="btn btn-info">Mostly Block</button>
</div>Block Button Grid System
Grid Integration
<!-- Block Buttons in Grid System -->
<div class="row g-3">
<!-- Half width blocks -->
<div class="col-md-6">
<div class="d-grid">
<button class="btn btn-primary">Half Width Block</button>
</div>
</div>
<div class="col-md-6">
<div class="d-grid">
<button class="btn btn-secondary">Half Width Block</button>
</div>
</div>
<!-- Third width blocks -->
<div class="col-md-4">
<div class="d-grid">
<button class="btn btn-success">Third Width</button>
</div>
</div>
<div class="col-md-4">
<div class="d-grid">
<button class="btn btn-warning">Third Width</button>
</div>
</div>
<div class="col-md-4">
<div class="d-grid">
<button class="btn btn-danger">Third Width</button>
</div>
</div>
</div>Use Cases for Block Buttons
Mobile Forms
Perfect for mobile form submissions
Call-to-Action Sections
Ready to Get Started?
Join thousands of satisfied customers
Great for landing page CTAs
Accessibility Best Practices
Block Button Accessibility
- ✅ Ensure sufficient spacing between stacked buttons
- ✅ Maintain minimum touch target size (44×44px)
- ✅ Use clear, descriptive text for each button
- ✅ Test keyboard navigation through stacked buttons
- ✅ Ensure visual focus indicators are clearly visible
- ✅ Consider screen reader announcements for button groups
