Bootstrap 5 Buttons Block buttons
Last Updated :
08 Nov, 2022
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" >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
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" >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...