How can I increase the size of a bootstrap button?

Issue

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?

Solution

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

Answered By - Rahul Tripathi