How can I increase the size of a bootstrap button?

25

For example I've made my button

<div class="btn btn-default">
  Active
</div>

and it looks like the following

enter image description here

However I would like to have my button like this

enter image description here

How can I enlarge the width of the bootstrap button regardless of text size?

This question is tagged with html css twitter-bootstrap twitter-bootstrap-3

~ Asked on 2015-09-30 11:00:21

The Best Answer is


23

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 on 2015-09-30 11:03:29


10

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>

~ Answered on 2015-09-30 14:51:39


Most Viewed Questions: