Twitter Bootstrap - How to get buttons to be block level only on extra small and small devices

Question

I have the following HTML:

<a href="javascript:void(0)" class="btn btn-primary btn-block">Start</a>

This works fine, however, I don't want the button to stretch across the screen on medium and large devices (essentially desktops). Is there a way to achieve this out of the box with Bootstrap?

Answer 1

Responsive CSS.

You can define the max width or/and height of any section of CSS with @media tags, like in the bootstrap-responsive.css. Here is an example.

@media (min-width: 400px) and (max-width: 600px) {
    /* Code here */
}

That code will be applied to all devices with a minimum browser window width of 400 pixels, and a maximum of 600 pixels.

You can grab the code for btn, btn-primary and btn-block from bootstrap.css or bootstrap-responsive.css (Some responsive examples in there), and put it in a <style></style> tag or in a separate CSS file, and edit it accordingly with responsive CSS.