Bootstrap provides three button sizes. The default size is used without a modifier. .btn-lg and .btn-sm provide larger and smaller variants respectively.
Full-width buttons are achieved with the .d-grid utility on the parent and .w-100 on the button, or simply wrapping in <div class="d-grid">. For responsive block buttons, combine with breakpoint utilities.
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small Button</button>
<hr>
<!-- Full-width block button -->
<div class="d-grid gap-2">
<button class="btn btn-success btn-lg">Sign Up Free</button>
<button class="btn btn-outline-secondary">Learn More</button>
</div>
<!-- Responsive block: full-width on mobile, auto on md+ -->
<div class="d-grid d-md-block">
<button class="btn btn-primary me-md-2">Button 1</button>
<button class="btn btn-secondary">Button 2</button>
</div>On mobile, use .d-grid to make call-to-action buttons full-width — larger touch targets improve conversion on small screens.