How can I increase the size of a bootstrap button?

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?

Answers


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


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 add css property for button size as follow

.btn{min-width:250px;}

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.


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


Need Your Help

How do I recursively list all directories at a location, breadth-first?

linux bash shell ksh

Breadth-first list is important, here. Also, limiting the depth searched would be nice.

dealing with large CSV files (20G) in ruby

ruby parsing csv

I am working on little problem and would have some advice on how to solve it: