Options Admin - Responsive Web Application Kit

Bootstrap - Buttons

We have styled all Bootstrap elements just as you want!

Toggle Code!

Advanced Buttons!This page displays basic Bootstrap styled buttons. To see more options of buttons, click here .

Button Tags

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

Link

<a class="btn btn-default" href="#" role="button">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">

Button Options

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

<!-- Standard button --><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>

Button Sizes

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

<p>    <button type="button" class="btn btn-primary btn-lg">Large button</button>    <button type="button" class="btn btn-default btn-lg">Large button</button></p><p>    <button type="button" class="btn btn-primary">Default button</button>    <button type="button" class="btn btn-default">Default button</button></p><p>    <button type="button" class="btn btn-primary btn-sm">Small button</button>    <button type="button" class="btn btn-default btn-sm">Small button</button></p><p>    <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></p>

Block Level Buttons

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>

Active State of Buttons

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button>elements, this is done via :active. For <a>elements, it's done with .active. However, you may use .activeon <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.

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

Disabled State of Buttons

Make buttons look un-clickable by fading them back with opacity. Add the disabled attribute to <button>buttons.

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

John Doe