Resizing buttons in Twitter-Bootstrap

Question

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?

Answer 1

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/