![[Solved]: btn-block not working in Bootstrap](https://www.webdevsplanet.com/assets/images/gallery/btn-block-not-working-in-bootstrap.webp)
[Solved]: btn-block not working in Bootstrap
Many web developers prefer using bootstrap for the quick design of their websites and web application pages.
Bootstrap is a popular, free, and open-source CSS framework for responsive, mobile-friendly web development.
It comes in handy and helps developers save a good deal of time in the development process. You can use it to do tasks much faster, which otherwise could take plenty of time writing all CSS and JS on your own.
However, it's common to get stuck at some point trying to style some page elements to the desired layout and look and feel.
This is especially due to changes the framework goes over time as it is always under constant improvements and updates.
What worked some time back may not work anymore when you try to do it later, with an updated Bootstrap version.
For instance, it is a common practice to have the login and signup buttons fit the entire width of the containing div such as in the example screenshot below:
This is because in most cases, such forms are designed to take a small portion of the page's width. In terms of design, it is only reasonable to have the form's components take the full width. This creates a balance and improves the look and feel of the form.
If you are reading this article, you probably have been struggling to make your buttons fit full-width using Bootstrap.
You have tried to use the .btn-block class in the button but it doesn't work... Right?
Here is the reason;
The .btn-block class works perfectly well with Bootstrap version 3.x.x and below previous but has been left out of Bootstrap 4.
It just no longer works in version 4.x.x and later (currently latest being v5.1). Using it in these versions will just be in vain.
You can solve this problem and have the button cover full-width in 4 different ways:
- Replacing it with
w-100 - Replacing it with
col-12 - Using custom CSS styling
- Changing to Boostrap 3
1. Replacing it with w-100
Bootstrap allows you to manage element sizing in terms of its width and height relative to its parent element using the width and height bootstrap utilities.
For height you use h-percentage and for width, w-percentage where the percentage is a numeric value. For instance, in this case, to make the button cover the full width of the containing element, we use w-100.
Example
<!DOCTYPE html>
<html>
<head>
<title>Fixing .btn-block</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
background: #eee;
}
.logindiv{
background: #fff;
border: 1px solid #ddd;
box-shadow: 1px 2px 3px #ccc;
padding: 10px;
margin-top: 100px;
}
.form-group{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="offset-md-4 col-md-4 logindiv">
<form id="loginForm">
<h3 class="text-center">Login Form</h3>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" id="password" placeholder="Your Password" required>
</div>
<div class="form-group">
<button class="btn btn-success w-100">Log In</button>
</div>
</form>
</div>
</body>
</html>
The above code makes the login button cover the full width of its container div as in the screenshot below:
2. Replacing it with col-12
In a similar way to .w-100, .col-12 sets the element for which it is used to full width.
Bootstrap grid system allows up to 12 columns a page, or a page element. These columns are also relative to the parent element. For instance, to make the button full width, you use col-12. To make it cover half the width, use col-6, etc.
Example
<!DOCTYPE html>
<html>
<head>
<title>Fixing .btn-block</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
background: #eee;
}
.logindiv{
background: #fff;
border: 1px solid #ddd;
box-shadow: 1px 2px 3px #ccc;
padding: 10px;
margin-top: 100px;
}
.form-group{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="offset-md-4 col-md-4 logindiv">
<form id="loginForm">
<h3 class="text-center">Login Form</h3>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" id="password" placeholder="Your Password" required>
</div>
<div class="form-group">
<button class="btn btn-success col-12">Log In</button>
</div>
</form>
</div>
</body>
</html>
3. Using custom CSS styling
Another alternative to style buttons to full-width is using custom CSS and setting the width attribute to 100%.
Example
<!DOCTYPE html>
<html>
<head>
<title>Fixing .btn-block</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
background: #eee;
}
.logindiv{
background: #fff;
border: 1px solid #ddd;
box-shadow: 1px 2px 3px #ccc;
padding: 10px;
margin-top: 100px;
}
.form-group{
margin-bottom: 10px;
}
.btn{
width: 100%;
}
</style>
</head>
<body>
<div class="offset-md-4 col-md-4 logindiv">
<form id="loginForm">
<h3 class="text-center">Login Form</h3>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" id="password" placeholder="Your Password" required>
</div>
<div class="form-group">
<button class="btn btn-success">Log In</button>
</div>
</form>
</div>
</body>
</html>
You may need to use !important after the width attribute value if it doesn't work such as below. This will force it to work and ignore any other prior width styling.
.btn{
width: 100% !important;
}
4. Changing to Boostrap 3
As I stated earlier, .btn-block perfectly works in Bootstrap 3. The fact that you are still using it means there is a possibility of having other deprecated bootstrap classes in later bootstrap versions that you are still using.
Changing to Bootstrap 3 will fix it and similar version-specific issues you could be facing.
Below are the Bootstrap 3.3.7 CDN CSS and JavaScript links for importing the framework into your website.
<!-- Place it inside the <head> -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Place this before </body> -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Example
<!DOCTYPE html>
<html>
<head>
<title>Fixing .btn-block</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
background: #eee;
}
.logindiv{
background: #fff;
border: 1px solid #ddd;
box-shadow: 1px 2px 3px #ccc;
padding: 10px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="col-md-4 col-md-offset-4 logindiv">
<form id="loginForm">
<h3 class="text-center">Login Form</h3>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" id="password" placeholder="Your Password" required>
</div>
<div class="form-group">
<button class="btn btn-success btn-block">Log In</button>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Conclusion
In this article, we have covered the reason why the bootstrap .btn-block class fails to work in your Bootstrap website and explored 4 different ways in which you can fix it and have your button cover the full width of the containing element.
It is my hope that this article was helpful to you and you have managed to solve the issue. We would appreciate it if you can help us to help more people by linking to this page from your website or by sharing this page to other developers.
