.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 433a18c885..c000c9c88c 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 2144789663..e61d83152d 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 aa2a77489f..2812e21527 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 738c520581..57ee5b0918 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 1fa39922f0..f6d97481c9 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 7367103caa..4b0523df29 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 ce725cd4b0..48cfa7560d 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);
}