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/