Bootstrap 5 Buttons Block buttons

Last Updated : 5 Aug, 2024

Bootstrap 5 Block buttons are used to display the full-width responsive buttons. To make the block buttons, we will use .d-grid, and .d-flex classes. We can also use screen sizes classes to change the button sizes on different screen sizes.

Block buttons used Classes:

  • .d-flex: This class is used to display an element as a block-level flex container.
  • .d-block: This class is used to display an element as a block-level element (like <p>).

Syntax:

<div class="d-grid gap-*">
      <button class="btn btn-*" type="button">
          Button
      </button>
      ...
</div>

Example 1: This example shows the working of a block-level button in Bootstrap 5.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 5 Buttons Block buttons</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>

<body style="text-align:center;">
    <div class="container mt-3">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h2>Bootstrap 5 Buttons Block buttons</h2>

        <div class="d-grid gap-2">
            <button type="button" 
                class="btn btn-block btn-success">
                Block Level Button
            </button>
            
            <button type="button" 
                class="btn btn-block btn-success">
                Block Level Button
            </button>
        </div>

        <div class="mt-5 d-grid gap-2 d-md-block">
            <button type="button" 
                class="btn btn-block btn-success">
                Block Level Button
            </button>
            
            <button type="button" 
                class="btn btn-block btn-success">
                Block Level Button
            </button>
        </div>
    </div>
</body>

</html>

Output:

Example 2: This example shows the working of a block-level button in Bootstrap 5.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 5 Buttons Block buttons</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>

<body style="text-align:center;">
    <div class="container mt-3">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h2>Bootstrap 5 Buttons Block buttons</h2>

        <div class="d-grid gap-2 col-6 mx-auto">
            <button type="button" 
                class="btn btn-block btn-success">
                Block Level Button
            </button>
            
            <button type="button" 
                class="btn btn-block btn-success">
                Block Level Button
            </button>
        </div>

        <div class="mt-5 d-grid gap-2 d-md-flex 
            justify-content-md-end">
            <button type="button" 
                class="btn btn-block btn-success">
                Block Level Button
            </button>
            
            <button type="button" 
                class="btn btn-block btn-success">
                Block Level Button
            </button>
        </div>
    </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/buttons/#block-buttons

Comment

Explore