How can I increase the size of a bootstrap button? - html

Question

For example I've made my button
<div class="btn btn-default">
Active
</div>
and it looks like the following
However I would like to have my button like this
How can I enlarge the width of the bootstrap button regardless of text size?

Answer 1

You can try to use btn-sm, btn-xs and btn-lg classes like this:
.btn-xl {
padding: 10px 20px;
font-size: 20px;
border-radius: 10px;
}
JSFIDDLE DEMO
You can make use of Bootstrap .btn-group-justified css class. Or you can simply add:
.btn-xl {
padding: 10px 20px;
font-size: 20px;
border-radius: 10px;
width:50%; //Specify your width here
}
JSFIDDLE DEMO

Answer 2

bootstrap comes with clas btn-lg
http://getbootstrap.com/components/#btn-dropdowns-sizing
<div class="btn btn-default btn-block">
Active
</div>
but if you want to have the button of the width of your column / container add btn-block
<div class="btn btn-default btn-lg">
Active
</div>
However this will expand to 100% so make surt ethat you will wrap your button in certain amount of columns e.g. then you know its always stays 3 columns until xs screen
<div class="col-sm-3">
<div class="btn btn-default btn-block">
Active
</div>
</div>

Answer 3

You can add your own css property for button size as follows:
.btn {
min-width: 250px;
}

Answer 4

Default Bootstrap size classes
You can use btn-lg, btn-sm and btn-xs classes for manipulating with its size.
btn-block
Also, there is a class btn-block which will extend your button to the whole block. It is very convenient in combination with Bootstrap grid.
For example, this code will show a button with the width equal to half of screen for medium and large screens; and will show a full-width button for small screens:
<div class="container">
<div class="col-xs-12 col-xs-offset-0 col-sm-offset-3 col-sm-6">
<button class="btn btn-group">Click me!</button>
</div>
</div>
Check this JSFiddle out. Try to resize frame.
If it is not enough, you can easily create your custom class.

Answer 5

Use block level buttons, those that span the full width of a parent
You can achieve this by adding btn-block class your button element.
Documentation here

Answer 6

Just simply add to the class of the bootstrap code.
.login
{
width: 20%;
margin-top: 39.5%;
margin-left: 35%;
}
<button type="button" class="btn btn-outline-dark btn-lg login">Login</button>

Answer 7

you can also use the css property scale for this
<button type="button" class="btn btn-primary " style="scale:1.5">Active</button>
Or just build a Class
.scale15{
scale:1.5;
}
http://jsfiddle.net/dazzafact/aj1hcsty/1/