CODEWITHSUNDEEP
csstwitter-bootstrapbutton
Chazu
Chazu

Reputation: 1018

Resizing buttons in Twitter-Bootstrap

I'm developing a mobile-friendly web app which I would like to feature a dead-simple UI, including buttons so large even Andre the Giant could tap them with ease.

The problem is, I see no simple way of explicitly resizing bootstrap buttons by setting their width or height to a percentage, number of pixels, or simply having them fill their containers. Is there a canonical way of greatly enlarging buttons outside of using 'btn btn-small' or 'btn btn-large' classes, or is this considered a bad practice?

Upvotes: 35

Views: 73285

Answers (2)

Abdull
Abdull

Reputation: 27832

@amustill's answer is easily adapted for Bootstrap 3.1.0:

.btn-xl {
    padding: 18px 28px;
    font-size: 22px;
    border-radius: 8px;
}

jsFiddle: http://jsfiddle.net/Abdull/2rkkJ/

With this adaption automatically come :hover darkening and :active shadow insetting.

Upvotes: 24

amustill
amustill

Reputation: 5302

Bootstrap is a great framework, but it doesn't cover everything. It knows that and using its OOCSS principle should be extended to your needs.

If I'm adapting Bootstrap components themselves, I generally create a bootstrap-extensions.css file which houses any extensions of base components, such as an extra large button.

Here's an example implementation of how one extension class adds a new family of buttons to the framework. This example also includes an example use of .btn-block, which is already included in the framework.

CSS:

/**
 * Extra large button extensions. Extends `.btn`.
 */
.btn-xlarge {
    padding: 18px 28px;
    font-size: 22px;
    line-height: normal;
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
    }

Demo: http://jsfiddle.net/Pspb9/

Upvotes: 61

Related Questions