.form-vertical (not required).form-horizontal.form-inline.form-search.form-horizontal.primary.btn-primary.info.btn-info.success.btn-success.warning.btn-warning.danger.btn-dangerFancy larger or smaller buttons? Have at it!
- Primary action - Action + Primary action + Action
- Primary action - Action + Primary action + Action
For disabled buttons, use .disabled for links and :disabled for <button> elements.
For disabled buttons, use .btn-disabled for links and :disabled for <button> elements.
- Primary action - Action + Primary action + Action
- - + +
Refresh - Checkout - Delete + Checkout + Delete
- Comment - Settings - More Info + Comment + Settings + More Info
Hover over the button to trigger the popover.
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
- Take this action Or do this + Take this action Or do this
Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
-<button class="btn danger" data-toggle="collapse" data-target="#demo">
+<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 433a18c8..c000c9c8 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -756,11 +756,6 @@
.form-vertical ({{_i}}not required{{/i}}){{_i}}Stacked, left-aligned labels over controls{{/i}}
-
- {{_i}}Horizontal{{/i}}
- .form-horizontal{{_i}}Float left, right-aligned labels on same line as controls{{/i}}
-
{{_i}}Inline{{/i}}
.form-inline.form-search{{_i}}Extra-rounded text input for a typical search aesthetic{{/i}}
+
+ {{_i}}Horizontal{{/i}}
+ .form-horizontal{{_i}}Float left, right-aligned labels on same line as controls{{/i}}
+
@@ -879,7 +879,7 @@
-
+
@@ -972,7 +972,7 @@
-
+
@@ -1096,7 +1096,7 @@
-
+
@@ -1139,28 +1139,28 @@
{{_i}}Standard gray button with gradient{{/i}}
- {{_i}}Primary{{/i}}
- .primary{{_i}}Primary{{/i}}
+ .btn-primary{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}
- {{_i}}Info{{/i}}
- .info{{_i}}Info{{/i}}
+ .btn-info{{_i}}Used as an alternate to the default styles{{/i}}
- {{_i}}Success{{/i}}
- .success{{_i}}Success{{/i}}
+ .btn-success{{_i}}Indicates a successful or positive action{{/i}}
- {{_i}}Warning{{/i}}
- .warning{{_i}}Warning{{/i}}
+ .btn-warning{{_i}}Indicates caution should be taken with this action{{/i}}
- {{_i}}Danger{{/i}}
- .danger{{_i}}Danger{{/i}}
+ .btn-danger{{_i}}Indicates a dangerous or potentially negative action{{/i}}
@@ -1185,24 +1185,24 @@
{{_i}}Multiple sizes{{/i}}
{{_i}}Fancy larger or smaller buttons? Have at it!{{/i}}
- {{_i}}Primary action{{/i}}
- {{_i}}Action{{/i}}
+ {{_i}}Primary action{{/i}}
+ {{_i}}Action{{/i}}
- {{_i}}Primary action{{/i}}
- {{_i}}Action{{/i}}
+ {{_i}}Primary action{{/i}}
+ {{_i}}Action{{/i}}
{{_i}}Disabled state{{/i}}
- {{_i}}For disabled buttons, use .disabled for links and :disabled for <button> elements.{{/i}}
+ {{_i}}For disabled buttons, use .btn-disabled for links and :disabled for <button> elements.{{/i}}
- {{_i}}Primary action{{/i}}
- {{_i}}Action{{/i}}
+ {{_i}}Primary action{{/i}}
+ {{_i}}Action{{/i}}
-
-
+
+
{{_i}}Refresh{{/i}}
- {{_i}}Checkout{{/i}}
- {{_i}}Delete{{/i}}
+ {{_i}}Checkout{{/i}}
+ {{_i}}Delete{{/i}}
- {{_i}}Comment{{/i}}
- {{_i}}Settings{{/i}}
- {{_i}}More Info{{/i}}
+ {{_i}}Comment{{/i}}
+ {{_i}}Settings{{/i}}
+ {{_i}}More Info{{/i}}
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 21447896..e61d8315 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -122,7 +122,7 @@
- {{_i}}Launch demo modal{{/i}}
+ {{_i}}Launch demo modal{{/i}}
@@ -216,7 +216,7 @@
<p>{{_i}}One fine body…{{/i}}</p>
</div>
<div class="modal-footer">
- <a href="#" class="btn primary">{{_i}}Save changes{{/i}}</a>
+ <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
<a href="#" class="btn">{{_i}}Close{{/i}}</a>
</div>
</div>
@@ -726,7 +726,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
{{_i}}Example hover popover{{/i}}
{{_i}}Hover over the button to trigger the popover.{{/i}}
{{_i}}Using bootstrap-popover.js{{/i}}
@@ -841,7 +841,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
{{_i}}Oh snap! You got an error!{{/i}}
{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}
- {{_i}}Take this action{{/i}} {{_i}}Or do this{{/i}}
+ {{_i}}Take this action{{/i}} {{_i}}Or do this{{/i}}
@@ -907,7 +907,7 @@ $('#my-alert').bind('closed', function () {
{{_i}}Stateful{{/i}}
-
@@ -915,16 +915,16 @@ $('#my-alert').bind('closed', function () {
{{_i}}Single toggle{{/i}}
-
+
{{_i}}Checkbox{{/i}}
-
-
-
+
+
+
@@ -932,9 +932,9 @@ $('#my-alert').bind('closed', function () {
{{_i}}Radio{{/i}}
-
-
-
+
+
+
@@ -1082,7 +1082,7 @@ $('#my-alert').bind('closed', function () {
{{_i}}Markup{{/i}}
{{_i}}Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.{{/i}}
-<button class="btn danger" data-toggle="collapse" data-target="#demo">
+<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
{{_i}}simple collapsible{{/i}}
</button>
diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html
index aa2a7748..2812e215 100644
--- a/examples/fluid-reverse.html
+++ b/examples/fluid-reverse.html
@@ -60,7 +60,7 @@
Hello, world!
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
-
+
diff --git a/examples/fluid.html b/examples/fluid.html
index 738c5205..57ee5b09 100644
--- a/examples/fluid.html
+++ b/examples/fluid.html
@@ -82,7 +82,7 @@
Hello, world!
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
-
+
diff --git a/examples/hero.html b/examples/hero.html
index 1fa39922..f6d97481 100644
--- a/examples/hero.html
+++ b/examples/hero.html
@@ -56,7 +56,7 @@
Hello, world!
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
-
+
diff --git a/less/button-groups.less b/less/button-groups.less
index 7367103c..4b0523df 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -130,10 +130,10 @@
// Account for other colors
-.primary,
-.danger,
-.info,
-.success {
+.btn-primary,
+.btn-danger,
+.btn-info,
+.btn-success {
.caret {
border-top-color: @white;
.opacity(75);
@@ -141,7 +141,7 @@
}
// Small button dropdowns
-.btn.small .caret {
+.btn-small .caret {
margin-top: 4px;
}
diff --git a/less/buttons.less b/less/buttons.less
index ce725cd4..48cfa756 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -44,7 +44,7 @@
}
// Active state
-.btn.active,
+.btn-active,
.btn:active {
background-image: none;
@shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
@@ -56,7 +56,7 @@
}
// Disabled state
-.btn.disabled,
+.btn-disabled,
.btn[disabled] {
cursor: default;
background-image: none;
@@ -70,23 +70,23 @@
// --------------------------------------------------
// Large
-.btn.large {
+.btn-large {
padding: 9px 14px;
font-size: @baseFontSize + 2px;
line-height: normal;
.border-radius(5px);
}
-.btn.large .icon {
+.btn-large .icon {
margin-top: 1px;
}
// Small
-.btn.small {
+.btn-small {
padding: 5px 9px;
font-size: @baseFontSize - 2px;
line-height: @baseLineHeight - 2px;
}
-.btn.small .icon {
+.btn-small .icon {
margin-top: -1px;
}
@@ -96,47 +96,47 @@
// Set text color
// -------------------------
-.btn.primary,
-.btn.primary:hover,
-.btn.warning,
-.btn.warning:hover,
-.btn.danger,
-.btn.danger:hover,
-.btn.success,
-.btn.success:hover,
-.btn.info,
-.btn.info:hover {
+.btn-primary,
+.btn-primary:hover,
+.btn-warning,
+.btn-warning:hover,
+.btn-danger,
+.btn-danger:hover,
+.btn-success,
+.btn-success:hover,
+.btn-info,
+.btn-info:hover {
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
color: @white
}
// Provide *some* extra contrast for those who can get it
-.btn.primary.active,
-.btn.warning.active,
-.btn.danger.active,
-.btn.success.active,
-.btn.info.active {
+.btn-primary.active,
+.btn-warning.active,
+.btn-danger.active,
+.btn-success.active,
+.btn-info.active {
color: rgba(255,255,255,.75);
}
// Set the backgrounds
// -------------------------
-.btn.primary {
+.btn-primary {
.buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
}
// Warning appears are orange
-.btn.warning {
+.btn-warning {
.buttonBackground(lighten(@orange, 15%), @orange);
}
// Danger and error appear as red
-.btn.danger {
+.btn-danger {
.buttonBackground(#ee5f5b, #bd362f);
}
// Success appears as green
-.btn.success {
+.btn-success {
.buttonBackground(#62c462, #51a351);
}
// Info appears as a neutral blue
-.btn.info {
+.btn-info {
.buttonBackground(#5bc0de, #2f96b4);
}