How to create block level buttons in Bootstrap ?

Last Updated : 30 Jul, 2024

In many websites, we notice that there are big block level buttons used to perform some work when the user clicks on them. This is used to trigger some functions or redirect the user to a different link. Block buttons are the responsive stack of buttons of full width. We will use the below approach to create these types of buttons.

Approach: The btn class followed by contextual classes is used to create buttons on the website. Some of the btn classes are btn-block, btn-lg, btn-primary, btn-success, btn-warning etc. btn-block are used for block level buttons and btn-success, btn-warning, and btn-primary are for the green, yellow, and blue color of the button.

Below is the procedure to implement a simple block button in Bootstrap.

Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>

Step 2: We will add the type as button and add classes btn, btn-primary, btn-lg and btn-block. We will then write the text that will be seen on the button.

<button type="button" class="btn 
    btn-primary btn-lg btn-block">
  Click Here
</button>