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...