Shortcode
Buttons
| Button | Type | Description |
|---|---|---|
| Standard gray button with gradient | ||
primary |
Provides extra visual weight and identifies the primary action in a set of buttons | |
info |
Used as an alternative to the default styles | |
success |
Indicates a successful or positive action | |
warning |
Indicates caution should be taken with this action | |
danger |
Indicates a dangerous or potentially negative action | |
inverse |
Alternate dark gray button, not tied to a semantic action or use |
[button]Default[/button]
[button type="primary"]Primary[/button]
[button type="info"]Info[/button]
[button type="success"]Success[/button]
[button type="warning"]Warning[/button]
[button type="danger"]Danger[/button]
[button type="inverse"]Inverse[/button]
Buttons for actions
As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.
Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.
Cross browser compatibility
IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.
Multiple sizes
Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.
Disabled state
For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.
Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.
One class, multiple tags
Use the .btn class on an <a>, <button>, or <input> element.
<a class="btn" href="/">Link</a>
<button class="btn" type="submit">
Button
</button>
<input class="btn" type="button"
value="Input">
<input class="btn" type="submit"
value="Submit">
As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.
Columns
Column 1
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Column 2
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Column 3
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Get the code
[columns]
[column_item col="4"]First[/column_item]
[column_item col="4"]Second[/column_item]
[column_item col="4"]Third[/column_item]
[/columns]
Column 1
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. pharetra mattis vehicula a
Column 2
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. pharetra mattis vehicula a
Column 3
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. pharetra mattis vehicula a
Column 4
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. pharetra mattis vehicula a
Get the code
[columns]
[column_item col="3"]First[/column_item]
[column_item col="3"]Second[/column_item]
[column_item col="3"]Third[/column_item]
[column_item col="3"]Fourth[/column_item]
[/columns]
Column 1
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed varius iaculis mattis. Praesent vulputate velit ut arcu fermentum et tristique est convallis. Duis pellentesque faucibus dapibus. In a augue justo.
Column 2
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis pellentesque faucibus dapibus. In a augue justo nunc mauris est.
Get the code
[columns]
[column_item col="8"]First[/column_item]
[column_item col="4"]Second[/column_item]
[/columns]
Dropcap
ed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.
ed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.
ed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.
ed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.
am bibendum tincidunt turpis ut scelerisque. Nullam vehicula consectetur ligula, at aliquam elit tempus in. Pellentesque eleifend dignissim massa molestie molestie. Sed vel pharetra massa. Pellentesque molestie tempus nibh at congue. Donec lacinia elit sit amet lectus vestibulum dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ornare, nunc non tincidunt imperdiet, velit velit aliquam lacus, vel porttitor dui urna ut nisi.
tiam mattis nisl vel metus cursus malesuada. Nam tincidunt, ipsum quis auctor imperdiet, nulla tortor sodales magna, nec viverra ligula turpis in libero. Aliquam erat volutpat. In erat erat, hendrerit nec rutrum non, viverra at augue. Curabitur ultrices, mi vel elementum imperdiet, quam eros bibendum quam, at dictum ligula nunc in felis.
Maecenas non leo quis risus lobortis volutpat. Aliquam erat volutpat. Sed et ipsum ante. Sed quis nunc sem. Morbi non augue sit amet risus consequat lobortis in vitae mi. Nam fringilla nulla ac lacus hendrerit aliquet. In posuere faucibus ligula, ornare laoreet felis feugiat ut.
Sed vitae nisl elit. In quis quam ut metus sollicitudin ullamcorper. Ut ut eleifend libero. Fusce pharetra, massa at malesuada mattis, augue risus semper massa, et faucibus augue tortor in metus. Nunc orci augue, hendrerit vitae luctus at, porta id nulla.
In hendrerit dolor sed lectus mattis vehicula interdum metus malesuada. Sed in turpis massa. Etiam eget metus quis elit gravida luctus et quis nisi. Aenean nec massa leo. Pellentesque rhoncus consectetur neque. Nullam sagittis euismod risus et tempor. Fusce semper cursus nulla. Vestibulum dapibus suscipit luctus. In ultrices velit in mauris feugiat molestie. Fusce non nibh est, facilisis molestie lorem.
Duis faucibus neque quis erat cursus vel laoreet nisi dictum. Nulla risus diam, aliquam sed tincidunt sed, gravida ut enim. Morbi nisi ante, tincidunt vel gravida at, condimentum suscipit nisi. In bibendum consectetur massa, ut ornare felis pretium at. Nulla sem metus, tempus scelerisque aliquet in, commodo nec est. Suspendisse lacinia odio id ante laoreet imperdiet. Suspendisse mi turpis, euismod a pharetra et, accumsan eget nisl. Suspendisse vitae purus blandit elit faucibus mollis ut eu ligula.
Get the code
[dropcap type="circle" color="#COLOR_CODE" background="#COLOR_CODE"]ADD_CONTENT_HERE[/dropcap]
We stay Connected
Twitter Facebook Skype