How can I increase the size of a bootstrap button?
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>
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
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.
You can add your own css property for button size as follows:
.btn {
min-width: 250px;
}