<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/zavoloklom/pen/Gubja?limit=all&page=10&q=button" />
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">/* -- import Bootstrap v3 ----------------------------- */
@import "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css";
/* -- import Bootstrap docs ---------------------------- */
@import "//getbootstrap.com/assets/css/docs.min.css";
/* -- import Roboto Font ------------------------------ */
@import "https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic";
/*-- Body style ---------------------------------- */
body {
font-family: "Roboto", 'Helvetica Neue, Helvetica, Arial', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 1.4;
color: #212121;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* -- Main style ------------------------------------ */
.btn {
font-family: "Roboto", 'Helvetica Neue, Helvetica, Arial', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: inherit;
color: rgba(255, 255, 255, 0.87);
}
.btn-default,
.btn-link {
color: rgba(0, 0, 0, 0.87);
}
/* -- Buttons style ------------------------------------ */
.btn {
outline: 0;
outline-offset: 0;
border: 0;
border-radius: 2px;
transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
-webkit-transition: all 0.15s ease-in-out;
}
.btn:focus,
.btn:active,
.btn.active,
.btn:active:focus,
.btn.active:focus {
outline: 0;
outline-offset: 0;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
/* -- Buttons types -------------------------------- */
.btn-raised {
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
}
.btn-raised:active,
.btn-raised.active,
.btn-raised:active:focus,
.btn-raised.active:focus {
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.btn-raised:focus {
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.btn.btn-circle {
padding: 0;
border-radius: 50%;
}
/* -- Buttons colors -------------------------------- */
.btn-default,
.dropdown-toggle.btn-default {
background-color: #fff;
}
.btn-default:hover,
.dropdown-toggle.btn-default:hover {
background-color: #e5e5e5;
}
.btn-default:active,
.dropdown-toggle.btn-default:active,
.btn-default.active,
.dropdown-toggle.btn-default.active {
background-color: #e5e5e5;
}
.btn-default:focus,
.dropdown-toggle.btn-default:focus {
background-color: #cccccc;
}
.btn-default:disabled,
.dropdown-toggle.btn-default:disabled,
.btn-default.disabled,
.dropdown-toggle.btn-default.disabled,
.btn-default[disabled],
.dropdown-toggle.btn-default[disabled] {
background-color: #b3b3b3;
}
.btn-default .ink,
.dropdown-toggle.btn-default .ink {
background-color: #b8b8b8;
}
.btn-flat.btn-default {
color: #212121;
background-color: transparent;
}
.btn-flat.btn-default:hover {
color: #141414;
background-color: #e5e5e5;
}
.btn-flat.btn-default:active,
.btn-flat.btn-default.active {
color: #020202;
background-color: #cccccc;
}
.btn-flat.btn-default:focus {
color: #000;
background-color: #cccccc;
}
.btn-flat.btn-default .ink {
background-color: #808080;
}
.btn-primary,
.dropdown-toggle.btn-primary {
background-color: #5677fc;
}
.btn-primary:hover,
.dropdown-toggle.btn-primary:hover {
background-color: #4e6cef;
}
.btn-primary:active,
.dropdown-toggle.btn-primary:active,
.btn-primary.active,
.dropdown-toggle.btn-primary.active {
background-color: #4e6cef;
}
.btn-primary:focus,
.dropdown-toggle.btn-primary:focus {
background-color: #455ede;
}
.btn-primary:disabled,
.dropdown-toggle.btn-primary:disabled,
.btn-primary.disabled,
.dropdown-toggle.btn-primary.disabled,
.btn-primary[disabled],
.dropdown-toggle.btn-primary[disabled] {
background-color: #b3b3b3;
}
.btn-primary .ink,
.dropdown-toggle.btn-primary .ink {
background-color: #3b50ce;
}
.btn-flat.btn-primary {
color: #5677fc;
background-color: transparent;
}
.btn-flat.btn-primary:hover {
color: #4e6cef;
background-color: #e5e5e5;
}
.btn-flat.btn-primary:active,
.btn-flat.btn-primary.active {
color: #455ede;
background-color: #cccccc;
}
.btn-flat.btn-primary:focus {
color: #3b50ce;
background-color: #cccccc;
}
.btn-flat.btn-primary .ink {
background-color: #808080;
}
.btn-success,
.dropdown-toggle.btn-success {
background-color: #259b24;
}
.btn-success:hover,
.dropdown-toggle.btn-success:hover {
background-color: #0a8f08;
}
.btn-success:active,
.dropdown-toggle.btn-success:active,
.btn-success.active,
.dropdown-toggle.btn-success.active {
background-color: #0a8f08;
}
.btn-success:focus,
.dropdown-toggle.btn-success:focus {
background-color: #0a7e07;
}
.btn-success:disabled,
.dropdown-toggle.btn-success:disabled,
.btn-success.disabled,
.dropdown-toggle.btn-success.disabled,
.btn-success[disabled],
.dropdown-toggle.btn-success[disabled] {
background-color: #b3b3b3;
}
.btn-success .ink,
.dropdown-toggle.btn-success .ink {
background-color: #056f00;
}
.btn-flat.btn-success {
color: #259b24;
background-color: transparent;
}
.btn-flat.btn-success:hover {
color: #0a8f08;
background-color: #e5e5e5;
}
.btn-flat.btn-success:active,
.btn-flat.btn-success.active {
color: #0a7e07;
background-color: #cccccc;
}
.btn-flat.btn-success:focus {
color: #056f00;
background-color: #cccccc;
}
.btn-flat.btn-success .ink {
background-color: #808080;
}
.btn-info,
.dropdown-toggle.btn-info {
background-color: #03a9f4;
}
.btn-info:hover,
.dropdown-toggle.btn-info:hover {
background-color: #039be5;
}
.btn-info:active,
.dropdown-toggle.btn-info:active,
.btn-info.active,
.dropdown-toggle.btn-info.active {
background-color: #039be5;
}
.btn-info:focus,
.dropdown-toggle.btn-info:focus {
background-color: #0288d1;
}
.btn-info:disabled,
.dropdown-toggle.btn-info:disabled,
.btn-info.disabled,
.dropdown-toggle.btn-info.disabled,
.btn-info[disabled],
.dropdown-toggle.btn-info[disabled] {
background-color: #b3b3b3;
}
.btn-info .ink,
.dropdown-toggle.btn-info .ink {
background-color: #0277bd;
}
.btn-flat.btn-info {
color: #03a9f4;
background-color: transparent;
}
.btn-flat.btn-info:hover {
color: #039be5;
background-color: #e5e5e5;
}
.btn-flat.btn-info:active,
.btn-flat.btn-info.active {
color: #0288d1;
background-color: #cccccc;
}
.btn-flat.btn-info:focus {
color: #0277bd;
background-color: #cccccc;
}
.btn-flat.btn-info .ink {
background-color: #808080;
}
.btn-warning,
.dropdown-toggle.btn-warning {
background-color: #ffc107;
}
.btn-warning:hover,
.dropdown-toggle.btn-warning:hover {
background-color: #ffb300;
}
.btn-warning:active,
.dropdown-toggle.btn-warning:active,
.btn-warning.active,
.dropdown-toggle.btn-warning.active {
background-color: #ffb300;
}
.btn-warning:focus,
.dropdown-toggle.btn-warning:focus {
background-color: #ffa000;
}
.btn-warning:disabled,
.dropdown-toggle.btn-warning:disabled,
.btn-warning.disabled,
.dropdown-toggle.btn-warning.disabled,
.btn-warning[disabled],
.dropdown-toggle.btn-warning[disabled] {
background-color: #b3b3b3;
}
.btn-warning .ink,
.dropdown-toggle.btn-warning .ink {
background-color: #ff8f00;
}
.btn-flat.btn-warning {
color: #ffc107;
background-color: transparent;
}
.btn-flat.btn-warning:hover {
color: #ffb300;
background-color: #e5e5e5;
}
.btn-flat.btn-warning:active,
.btn-flat.btn-warning.active {
color: #ffa000;
background-color: #cccccc;
}
.btn-flat.btn-warning:focus {
color: #ff8f00;
background-color: #cccccc;
}
.btn-flat.btn-warning .ink {
background-color: #808080;
}
.btn-danger,
.dropdown-toggle.btn-danger {
background-color: #ff5722;
}
.btn-danger:hover,
.dropdown-toggle.btn-danger:hover {
background-color: #f4511e;
}
.btn-danger:active,
.dropdown-toggle.btn-danger:active,
.btn-danger.active,
.dropdown-toggle.btn-danger.active {
background-color: #f4511e;
}
.btn-danger:focus,
.dropdown-toggle.btn-danger:focus {
background-color: #e64a19;
}
.btn-danger:disabled,
.dropdown-toggle.btn-danger:disabled,
.btn-danger.disabled,
.dropdown-toggle.btn-danger.disabled,
.btn-danger[disabled],
.dropdown-toggle.btn-danger[disabled] {
background-color: #b3b3b3;
}
.btn-danger .ink,
.dropdown-toggle.btn-danger .ink {
background-color: #d84315;
}
.btn-flat.btn-danger {
color: #ff5722;
background-color: transparent;
}
.btn-flat.btn-danger:hover {
color: #f4511e;
background-color: #e5e5e5;
}
.btn-flat.btn-danger:active,
.btn-flat.btn-danger.active {
color: #e64a19;
background-color: #cccccc;
}
.btn-flat.btn-danger:focus {
color: #d84315;
background-color: #cccccc;
}
.btn-flat.btn-danger .ink {
background-color: #808080;
}
/* -- Buttons sizes -------------------------------- */
.btn {
min-width: 88px;
padding: 10px 14px;
}
.btn-lg,
.btn-group-lg > .btn {
min-width: 122px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3;
}
.btn-sm,
.btn-group-sm > .btn {
min-width: 64px;
padding: 4px 12px;
font-size: 12px;
line-height: 1.5;
}
.btn-xs,
.btn-group-xs > .btn {
min-width: 46px;
padding: 2px 10px;
font-size: 10px;
line-height: 1.5;
}
.btn-circle {
width: 56px;
height: 56px;
min-width: 56px;
}
.btn-circle span {
line-height: 56px;
}
.btn-circle.btn-lg {
width: 78px;
height: 78px;
min-width: 78px;
}
.btn-circle.btn-lg span {
line-height: 78px;
}
.btn-circle.btn-sm {
width: 40px;
height: 40px;
min-width: 40px;
}
.btn-circle.btn-sm span {
line-height: 40px;
}
.btn-circle.btn-xs {
width: 30px;
height: 30px;
min-width: 30px;
}
.btn-circle.btn-xs span {
line-height: 30px;
}
/*-- Button groups --------------------------------- */
.btn-group .btn {
border-radius: 2px;
}
.btn-group.open .dropdown-toggle {
outline: 0;
outline-offset: 0;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: 0;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover {
z-index: 0;
}
.btn-group > .btn:focus:hover,
.btn-group-vertical > .btn:focus:hover,
.btn-group > .btn:active:hover,
.btn-group-vertical > .btn:active:hover,
.btn-group > .btn.active:hover,
.btn-group-vertical > .btn.active:hover {
z-index: 2;
}
/* -- Ripple effect -------------------------------- */
.ripple-effect {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
}
.ink {
display: block;
position: absolute;
pointer-events: none;
border-radius: 50%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
background: #fff;
opacity: 1;
}
.ink.animate {
-webkit-animation: ripple .5s linear;
-moz-animation: ripple .5s linear;
-ms-animation: ripple .5s linear;
-o-animation: ripple .5s linear;
animation: ripple .5s linear;
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
@-webkit-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
@-moz-keyframes ripple {
100% {
opacity: 0;
-moz-transform: scale(2.5);
transform: scale(2.5);
}
}
@-ms-keyframes ripple {
100% {
opacity: 0;
-ms-transform: scale(2.5);
transform: scale(2.5);
}
}
@-o-keyframes ripple {
100% {
opacity: 0;
-o-transform: scale(2.5);
transform: scale(2.5);
}
}
</style></head><body>
<div class="container">
<div class="bs-docs-section">
<h1 id="buttons" class="page-header">Material Buttons</h1>
<h2 id="buttons-options">Options</h2>
<p>Use any of the available button classes to quickly create a styled button.</p>
<div class="bs-example">
<p>
<div class="type-info">Default buttons</div>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
</div>
<div class="highlight"><pre><code class="html"><span class="c"><!-- Standard button --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Provides extra visual weight and identifies the primary action in a set of buttons --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Primary<span class="nt"></button></span>
<span class="c"><!-- Indicates a successful or positive action --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">></span>Success<span class="nt"></button></span>
<span class="c"><!-- Contextual button for informational alert messages --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">></span>Info<span class="nt"></button></span>
<span class="c"><!-- Indicates caution should be taken with this action --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">></span>Warning<span class="nt"></button></span>
<span class="c"><!-- Indicates a dangerous or potentially negative action --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">></span>Danger<span class="nt"></button></span>
<span class="c"><!-- Deemphasize a button by making it look like a link while maintaining button behavior --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">></span>Link<span class="nt"></button></span></code></pre></div>
<!-- Types -->
<h2 id="buttons-types">Types</h2>
<p>Use any of the available button classes to create a button. Also you can mix types.</p>
<div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div>
<div class="bs-example bs-example-type">
<table class="table">
<tbody>
<tr>
<td>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-link">Link</button>
</td>
<td class="type-info">Default buttons</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-raised btn-default">Default</button>
<button type="button" class="btn btn-raised btn-primary">Primary</button>
<button type="button" class="btn btn-raised btn-info">Info</button>
<button type="button" class="btn btn-raised btn-success">Success</button>
<button type="button" class="btn btn-raised btn-link">Link</button>
</td>
<td class="type-info">Raised buttons</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-flat btn-default">Default</button>
<button type="button" class="btn btn-flat btn-primary">Primary</button>
<button type="button" class="btn btn-flat btn-info">Info</button>
<button type="button" class="btn btn-flat btn-success">Success</button>
<button type="button" class="btn btn-flat btn-link">Link</button>
</td>
<td class="type-info">Flat buttons</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-circle btn-default"><span class="glyphicon glyphicon-star-empty"></span></button>
<button type="button" class="btn btn-circle btn-primary"><span class="glyphicon glyphicon-star"></span></button>
<button type="button" class="btn btn-circle btn-info"><span class="glyphicon glyphicon-exclamation-sign"></span></button>
<button type="button" class="btn btn-circle btn-success"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="btn btn-circle btn-link">Link</button>
</td>
<td class="type-info">Circle buttons (FAB)</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-circle btn-raised btn-default"><span class="glyphicon glyphicon-star-empty"></span></button>
<button type="button" class="btn btn-circle btn-raised btn-primary"><span class="glyphicon glyphicon-star"></span></button>
<button type="button" class="btn btn-circle btn-raised btn-info"><span class="glyphicon glyphicon-exclamation-sign"></span></button>
<button type="button" class="btn btn-circle btn-raised btn-success"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="btn btn-circle btn-raised btn-link">Link</button>
</td>
<td class="type-info">Circle + Raised buttons</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-circle btn-flat btn-default"><span class="glyphicon glyphicon-star-empty"></span></button>
<button type="button" class="btn btn-circle btn-flat btn-primary"><span class="glyphicon glyphicon-star"></span></button>
<button type="button" class="btn btn-circle btn-flat btn-info"><span class="glyphicon glyphicon-exclamation-sign"></span></button>
<button type="button" class="btn btn-circle btn-flat btn-success"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="btn btn-circle btn-flat btn-link">Link</button>
</td>
<td class="type-info">Circle + Flat buttons</td>
</tr>
</tbody>
</table>
</div>
<div class="highlight"><pre><code class="html">
<span class="c"><!-- Default button --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Raised button --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-raised btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Flat button --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flat btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Circle button (FAB) --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Circle + Raised button --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-raised btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Circle + Flat button --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-flat btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>
</code></pre></div>
<!-- Ripple effect -->
<h2 id="buttons-options">Ripple effect</h2>
<p>Ripple effect requiers JS for creating DOM-element and controlling animation. Animation work on CSS3. If you want to use this effect, you should add class <code>.ripple-effect</code> to your button.</p>
<div class="bs-example bs-example-type">
<table class="table">
<tbody>
<tr>
<td>
<button type="button" class="btn ripple-effect btn-default">Default</button>
<button type="button" class="btn ripple-effect btn-primary">Primary</button>
<button type="button" class="btn ripple-effect btn-info">Info</button>
<button type="button" class="btn ripple-effect btn-success">Success</button>
<button type="button" class="btn ripple-effect btn-link">Link</button>
</td>
<td class="type-info">Default buttons</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-raised ripple-effect btn-default">Default</button>
<button type="button" class="btn btn-raised ripple-effect btn-primary">Primary</button>
<button type="button" class="btn btn-raised ripple-effect btn-info">Info</button>
<button type="button" class="btn btn-raised ripple-effect btn-success">Success</button>
<button type="button" class="btn btn-raised ripple-effect btn-link">Link</button>
</td>
<td class="type-info">Raised buttons</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-flat ripple-effect btn-default">Default</button>
<button type="button" class="btn btn-flat ripple-effect btn-primary">Primary</button>
<button type="button" class="btn btn-flat ripple-effect btn-info">Info</button>
<button type="button" class="btn btn-flat ripple-effect btn-success">Success</button>
<button type="button" class="btn btn-flat ripple-effect btn-link">Link</button>
</td>
<td class="type-info">Flat buttons</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-circle ripple-effect btn-default"><span class="glyphicon glyphicon-star-empty"></span></button>
<button type="button" class="btn btn-circle ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
<button type="button" class="btn btn-circle ripple-effect btn-info"><span class="glyphicon glyphicon-exclamation-sign"></span></button>
<button type="button" class="btn btn-circle ripple-effect btn-success"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="btn btn-circle ripple-effect btn-link">Link</button>
</td>
<td class="type-info">Circle buttons (FAB)</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-circle btn-raised ripple-effect btn-default"><span class="glyphicon glyphicon-star-empty"></span></button>
<button type="button" class="btn btn-circle btn-raised ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
<button type="button" class="btn btn-circle btn-raised ripple-effect btn-info"><span class="glyphicon glyphicon-exclamation-sign"></span></button>
<button type="button" class="btn btn-circle btn-raised ripple-effect btn-success"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="btn btn-circle btn-raised ripple-effect btn-link">Link</button>
</td>
<td class="type-info">Circle + Raised buttons</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-circle btn-flat ripple-effect btn-default"><span class="glyphicon glyphicon-star-empty"></span></button>
<button type="button" class="btn btn-circle btn-flat ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
<button type="button" class="btn btn-circle btn-flat ripple-effect btn-info"><span class="glyphicon glyphicon-exclamation-sign"></span></button>
<button type="button" class="btn btn-circle btn-flat ripple-effect btn-success"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="btn btn-circle btn-flat ripple-effect btn-link">Link</button>
</td>
<td class="type-info">Circle + Flat buttons</td>
</tr>
</tbody>
</table>
</div>
<div class="highlight"><pre><code class="html">
<span class="c"><!-- Default button with ripple effect --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn ripple-effect btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Raised button with ripple effect --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-raised ripple-effect btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Flat button with ripple effect --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flat ripple-effect btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Circle button (FAB) with ripple effect --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle ripple-effect btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Circle + Raised button with ripple effect --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-raised ripple-effect btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Circle + Flat button with ripple effect --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-flat ripple-effect btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>
</code></pre></div>
<h2 id="buttons-sizes">Sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
<div class="bs-example bs-example-type">
<table class="table">
<tbody>
<tr>
<td>
<button type="button" class="btn btn-lg btn-raised ripple-effect btn-primary">Raised</button>
<button type="button" class="btn btn-lg btn-flat ripple-effect btn-primary">Flat</button>
<button type="button" class="btn btn-lg btn-circle btn-raised ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
<button type="button" class="btn btn-lg btn-circle btn-flat ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
</td>
<td class="type-info">Large buttons</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-raised ripple-effect btn-primary">Raised</button>
<button type="button" class="btn btn-flat ripple-effect btn-primary">Flat</button>
<button type="button" class="btn btn-circle btn-raised ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
<button type="button" class="btn btn-circle btn-flat ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
</td>
<td class="type-info">Default buttons</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-sm btn-raised ripple-effect btn-primary">Raised</button>
<button type="button" class="btn btn-sm btn-flat ripple-effect btn-primary">Flat</button>
<button type="button" class="btn btn-sm btn-circle btn-raised ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
<button type="button" class="btn btn-sm btn-circle btn-flat ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
</td>
<td class="type-info">Small buttons</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-xs btn-raised ripple-effect btn-primary">Raised</button>
<button type="button" class="btn btn-xs btn-flat ripple-effect btn-primary">Flat</button>
<button type="button" class="btn btn-xs btn-circle btn-raised ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
<button type="button" class="btn btn-xs btn-circle btn-flat ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
</td>
<td class="type-info">Extra small buttons</td>
</tr>
</tbody>
</table>
</div>
<div class="highlight"><pre><code class="html"><span class="nt"><p></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-raised ripple-effect btn-primary btn-lg"</span><span class="nt">></span>Large button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flat ripple-effect btn-primary btn-lg"</span><span class="nt">></span>Large button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-raised ripple-effect btn-primary btn-lg"</span><span class="nt">></span>Large button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-flat ripple-effect btn-primary btn-lg"</span><span class="nt">></span>Large button<span class="nt"></button></span>
<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-raised ripple-effect btn-primary"</span><span class="nt">></span>Default button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flat ripple-effect btn-primary"</span><span class="nt">></span>Default button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-raised ripple-effect btn-primary"</span><span class="nt">></span>Default button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-flat ripple-effect btn-primary"</span><span class="nt">></span>Default button<span class="nt"></button></span>
<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-raised ripple-effect btn-primary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flat ripple-effect btn-primary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-raised ripple-effect btn-primary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-flat ripple-effect btn-primary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span>
<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-raised ripple-effect btn-primary btn-xs"</span><span class="nt">></span>Extra small button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flat ripple-effect btn-primary btn-xs"</span><span class="nt">></span>Extra small button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-raised ripple-effect btn-primary btn-xs"</span><span class="nt">></span>Extra small button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-flat ripple-effect btn-primary btn-xs"</span><span class="nt">></span>Extra small button<span class="nt"></button></span>
<span class="nt"></p></span></code></pre></div>
<p>Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.</p>
<div class="bs-example">
<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
<button type="button" class="btn btn-raised btn-primary btn-block ripple-effect">Block level button</button>
<button type="button" class="btn btn-flat btn-primary btn-block ripple-effect">Block level button</button>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-raised btn-primary btn-block ripple-effect"</span><span class="nt">></span>Block level button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flat btn-primary btn-block ripple-effect"</span><span class="nt">></span>Block level button<span class="nt"></button></span></code></pre></div>
</div>
<div class="bs-docs-section">
<h1 id="btn-groups" class="page-header">Button groups</h1>
<p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>
<div class="bs-callout bs-callout-warning">
<h4>Tooltips & popovers in button groups require special setting</h4>
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div>
<h3 id="btn-groups-single">Basic example</h3>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div><div class="bs-example">
<div class="btn-group" style="margin: 9px 0 5px;">
<button type="button" class="btn btn-flat ripple-effect btn-default">Left</button>
<button type="button" class="btn btn-flat ripple-effect btn-default">Middle</button>
<button type="button" class="btn btn-flat ripple-effect btn-default">Right</button>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Left<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Middle<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Right<span class="nt"></button></span>
<span class="nt"></div></span></code></pre></div>
<h3 id="btn-groups-toolbar">Button toolbar</h3>
<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
<div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div><div class="bs-example">
<div class="btn-toolbar" role="toolbar" style="margin: 0;">
<div class="btn-group">
<button type="button" class="btn btn-flat ripple-effect btn-default">1</button>
<button type="button" class="btn btn-flat ripple-effect btn-info">2</button>
<button type="button" class="btn btn-flat ripple-effect btn-warning">3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-raised ripple-effect btn-default">4</button>
<button type="button" class="btn btn-raised ripple-effect btn-info">5</button>
<button type="button" class="btn btn-raised ripple-effect btn-warning">6</button>
</div>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-toolbar"</span> <span class="na">role=</span><span class="s">"toolbar"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></div>
<h3 id="btn-groups-sizing">Sizing</h3>
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
<div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div><div class="bs-example">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-flat ripple-effect btn-default">Left</button>
<button type="button" class="btn btn-flat ripple-effect btn-default">Middle</button>
<button type="button" class="btn btn-flat ripple-effect btn-default">Right</button>
</div>
</div>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-flat ripple-effect btn-default">Left</button>
<button type="button" class="btn btn-flat ripple-effect btn-default">Middle</button>
<button type="button" class="btn btn-flat ripple-effect btn-default">Right</button>
</div>
</div>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-flat ripple-effect btn-default">Left</button>
<button type="button" class="btn btn-flat ripple-effect btn-default">Middle</button>
<button type="button" class="btn btn-flat ripple-effect btn-default">Right</button>
</div>
</div>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-flat ripple-effect btn-default">Left</button>
<button type="button" class="btn btn-flat ripple-effect btn-default">Middle</button>
<button type="button" class="btn btn-flat ripple-effect btn-default">Right</button>
</div>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-lg"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-sm"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-xs"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></div>
<h3 id="btn-groups-nested">Nesting</h3>
<p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
<div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div><div class="bs-example">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>1<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>2<span class="nt"></button></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>
Dropdown
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
<span class="nt"></button></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span><span class="nt">></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Dropdown link<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Dropdown link<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></div>
<h3 id="btn-groups-vertical">Vertical variation</h3>
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p>
<div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div><div class="bs-example">
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<div class="btn-group">
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<div class="btn-group">
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group">
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group">
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group-vertical"</span><span class="nt">></span>
...
<span class="nt"></div></span></code></pre></div>
<h3 id="btn-groups-justified">Justified button groups</h3>
<p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
<div class="bs-callout bs-callout-warning">
<h4>Handling borders</h4>
<p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p>
</div>
<div class="bs-callout bs-callout-warning">
<h4>IE8 and borders</h4>
<p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code><a></code> or <code><button></code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
<p>See <a href="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p>
</div>
<h4>With <code><a></code> elements</h4>
<p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
<div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div><div class="bs-example">
<div class="btn-group btn-group-justified">
<a class="btn btn-default" role="button">Left</a>
<a class="btn btn-default" role="button">Middle</a>
<a class="btn btn-default" role="button">Right</a>
</div>
<br>
<div class="btn-group btn-group-justified">
<a class="btn btn-default" role="button">Left</a>
<a class="btn btn-default" role="button">Middle</a>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-justified"</span><span class="nt">></span>
...
<span class="nt"></div></span></code></pre></div>
<h4>With <code><button></code> elements</h4>
<p>To use justified button groups with <code><button></code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code><button></code> elements, but since we support button dropdowns, we can workaround that.</p>
<div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div><div class="bs-example">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-justified"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Left<span class="nt"></button></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Middle<span class="nt"></button></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Right<span class="nt"></button></span>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://getbootstrap.com/dist/js/bootstrap.min.js'></script>
<script >// Ripple-effect animation
(function($) {
$(".ripple-effect").click(function(e){
var rippler = $(this);
// create .ink element if it doesn't exist
if(rippler.find(".ink").length == 0) {
rippler.append("<span class='ink'></span>");
}
var ink = rippler.find(".ink");
// prevent quick double clicks
ink.removeClass("animate");
// set .ink diametr
if(!ink.height() && !ink.width())
{
var d = Math.max(rippler.outerWidth(), rippler.outerHeight());
ink.css({height: d, width: d});
}
// get click coordinates
var x = e.pageX - rippler.offset().left - ink.width()/2;
var y = e.pageY - rippler.offset().top - ink.height()/2;
// set .ink position and add class .animate
ink.css({
top: y+'px',
left:x+'px'
}).addClass("animate");
})
})(jQuery);
//# sourceURL=pen.js
</script>
</body></html>
