How to create block button in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Block Button in Bootstrap Quickly

To create a block button in Bootstrap, add the btn class along with btn-primary (or any style) and the d-block w-100 classes to make the button full width. This makes the button stretch across the container as a block element.

📐

Syntax

Use a button element with Bootstrap classes:

btn: base button styling
btn-primary: button color style (can be replaced with other variants like btn-success)
d-block: makes the button a block element so it takes full width
w-100: sets the width to 100% of the parent container

html

<button type="button" class="btn btn-primary d-block w-100">Block Button</button>

Output

A blue button that stretches across the full width of its container.

💻

Example

This example shows a block button inside a container. The button fills the container's width and is styled with Bootstrap's primary color.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Block Button Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4" style="max-width: 300px;">
    <button type="button" class="btn btn-primary d-block w-100">Block Button</button>
  </div>
</body>
</html>

Output

A blue button labeled 'Block Button' that fills the 300px wide container horizontally.

⚠️

Common Pitfalls

Common mistakes when creating block buttons include:

Using only btn and btn-primary without d-block w-100, which results in a normal inline button.
Using btn-block class which was used in Bootstrap 4 but is deprecated in Bootstrap 5.
Not placing the button inside a container with a set width, so the button stretches too wide on large screens.

html

<!-- Wrong (Bootstrap 5) -->
<button type="button" class="btn btn-primary btn-block">Wrong Block Button</button>

<!-- Right -->
<button type="button" class="btn btn-primary d-block w-100">Correct Block Button</button>

Output

The first button will not be full width in Bootstrap 5; the second button will fill the container width.

📊

Quick Reference

Class	Purpose
btn	Base button style
btn-primary	Primary color style (can be replaced)
d-block	Makes element display as block
w-100	Sets width to 100% of parent container

✅

Key Takeaways

Use d-block w-100 classes with btn to create a full-width block button in Bootstrap 5.

Avoid using the deprecated btn-block class from Bootstrap 4.

Place the button inside a container with a set width for better control over button size.

Bootstrap buttons need both display and width classes to behave as block elements.

You can change the button color by swapping btn-primary with other Bootstrap button variants.