Style Switcher

Layout options
  • Boxed Layout
  • Full Width Layout
Primary Color


Use any of the available button classes to quickly create a styled button.

<!-- Standard gray button with gradient -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>


Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Disabled state

Make buttons look unclickable by fading them back 50%.

Button element

Add the disabled attribute to <button> buttons.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Cross-browser compatibility

If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled">Link</a>

We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

Link functionality not impacted

This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.

Button tags

Use the button classes on an <a>, <button>, or <input> element.

<a class="btn btn-default" href="#">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

Among other things, there's a Firefox bug that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.

From the Blog

Joomla Templates and Joomla Extensions by JoomVision.Com

Management Software

Sed luctus, nisl a venenatis ultrices, augue lacus aliquet justo, non aliquam lacus ligula nec nisl. In consectetur, turpis quis fermentum suscipit,…

Berkeley Lab scientists 3-D model

Pellentesque nulla dui, rutrum a accumsan eu, lacinia quis odio. Nullam tincidunt laoreet lectus, in malesuada magna egestas eget. Suspendisse porttitor mollis…

International Inspiring

Morbi mauris neque, molestie nec volutpat quis, euismod id nibh. In sollicitudin, mauris id sodales molestie, velit purus elementum mauris, eget commodo…

Lorem ipsum dolor sit amet, feugiat delicat liberavis seid cum quo.

Featured Works Flickr

View more on flickr