How can I increase the size of a bootstrap button?

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