ShapeYourPath
(current)
Run Code
Live Code Editor- Bootstrap 5 Block Level Button
Source Code
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Bootstrap 5 Block Button</title> </head> <body> <div class="container"> <h1>Bootstrap 5 Block Button</h1> <div class="row"> <div class="col-sm-6 bg-info d-grid gap-2"> <div class="d-grid gap-2"> <button class="btn btn-primary" type="button">Button1</button> <button class="btn btn-primary" type="button">Button2</button> </div> <h2>Button showing block level in md breakpoint </h2> <div class="d-grid gap-2 d-md-block"> <button class="btn btn-primary" type="button">Button</button> <button class="btn btn-primary" type="button">Button</button> </div> <h2>Centering the button </h2> <div class="d-grid gap-2 d-md-block mx-auto"> <button class="btn btn-primary" type="button">Button</button> <button class="btn btn-primary" type="button">Button</button> </div> <h2>Button Alignment </h2> <div class="d-grid gap-2 d-md-flex justify-content-md-end"> <button class="btn btn-primary me-md-2" type="button">Button</button> <button class="btn btn-primary" type="button">Button</button> </div> </div> <div class="col-sm-6 bg-success"> <button type="button" class="btn btn-primary btn-block">Full-Width Button</button> <button type="button" class="btn btn-secondary btn-block">Full-Width Button</button> </div> </div> </div><!--/container--> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Output :
Running