How to create block level buttons in Bootstrap ?
Last Updated :
21 Sep, 2021
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>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h2 class="text-center">GeeksForGeeks</h2>
<br><br>
<div class="text-center">Block Button</div>
<br><br>
<button type="button" class="btn btn-primary
btn-lg btn-block">
Click Here
</button>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...