Bootstrap 5 Buttons Block buttons

Last Updated : 05 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/[email protected]/dist/css/bootstrap.min.css"          rel="stylesheet"         integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"          crossorigin="anonymous">     <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css"          rel="stylesheet"         integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"          crossorigin="anonymous">     <script src="https://cdn.jsdelivr.net/npm/[email protected]/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

Bootstrap 5 Button Plugin

vkash8574

Improve

Article Tags :

Bootstrap 5 Buttons Block buttons

Similar Reads