/* Ads in headers
-------------------------------------------------- */
-.subhead h1,
-.subhead .lead {
- margin-right: 340px;
+@media (min-width: 992px) {
+ .subhead h1,
+ .subhead .lead {
+ margin-right: 350px;
+ }
}
-.carbonad {
- position: absolute;
- top: 0;
- right: 0;
- margin-top: 0 !important;
- padding: 15px;
- height: auto !important;
- overflow: hidden; /* clearfix */
- font-size: 13px !important;
- line-height: 16px !important;
- background: #222 !important; /* reset image and color in one line */
- background: rgba(0,0,0,.5) !important;
- border: 0 !important;
- border-radius: 4px;
+#carbonads {
+ display: block;
+ overflow: hidden;
+ margin: 40px -20px -40px;
+ padding: 15px 15px 15px 160px;
+ font-size: 13px;
+ line-height: 1.5;
+ text-align: left;
+ background-color: rgba(0,0,0,.5);
box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
}
-.carbonad-img {
- margin: 0 !important;
-}
-.carbonad-text,
-.carbonad-tag,
-.carbonad-tag a {
- color: #fff !important;
-}
-.carbonad-text,
-.carbonad-tag {
- float: none !important;
- display: block !important;
- width: auto !important;
- height: auto !important;
- margin-left: 145px !important;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-}
-.carbonad-text {
- padding-top: 0 !important;
+
+#carbonads a {
+ color: #fff;
}
-.carbonad-tag {
- text-align: left !important;
+
+.carbon-img {
+ float: left;
+ margin-left: -145px;
}
-/* Ads on homepage */
-.masthead .carbonad {
- position: static;
- margin: 30px auto 0 !important;
- text-align: left !important;
+.carbon-poweredby {
+ display: block;
+ color: #cdbfe3 !important;
}
-@media (max-width: 980px) {
- .carbonad {
- position: static;
- width: auto !important;
- margin-top: 30px !important;
+@media (min-width: 480px) {
+ #carbonads {
+ max-width: 155px; /* 330 - padding */
+ margin: 50px auto 0;
+ border-radius: 4px;
}
}
-@media (max-width: 767px) {
- .carbonad {
+@media (min-width: 992px) {
+ #carbonads {
+ position: absolute;
+ top: 0;
+ right: 15px;
+ margin-top: 0;
+ }
+ .masthead #carbonads {
position: static;
- width: auto !important;
- margin: 40px -20px -40px !important;
- padding: 20px !important;
- overflow: hidden; /* clearfix */
- border-radius: 0;
+ margin: 30px auto 0;
}
}
-
-
/* Responsive docs
-------------------------------------------------- */
<div class="container">
<h1>Base CSS</h1>
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Components</h1>
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Customize and download</h1>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, javascript plugins, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Extending Bootstrap</h1>
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<div>
</header>
<div class="container">
<h1>Getting started</h1>
<p class="lead">Overview of the project, it's contents, and how to get started with a simple template.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<li><a href="./extend.html" >Extend</a></li>
<li>Version 2.1.0</li>
</ul>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</div>
<div class="container">
<h1>JavaScript for Bootstrap</h1>
<p class="lead">Bring Bootstrap's components to life—now with 13 custom jQuery plugins.
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on responsive 12-column grids, layouts, and components.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
/* Ads in headers
-------------------------------------------------- */
-.subhead h1,
-.subhead .lead {
- margin-right: 340px;
+@media (min-width: 992px) {
+ .subhead h1,
+ .subhead .lead {
+ margin-right: 350px;
+ }
}
-.carbonad {
- position: absolute;
- top: 0;
- right: 0;
- margin-top: 0 !important;
- padding: 15px;
- height: auto !important;
- overflow: hidden; /* clearfix */
- font-size: 13px !important;
- line-height: 16px !important;
- background: #222 !important; /* reset image and color in one line */
- background: rgba(0,0,0,.5) !important;
- border: 0 !important;
- border-radius: 4px;
+#carbonads {
+ display: block;
+ overflow: hidden;
+ margin: 40px -20px -40px;
+ padding: 15px 15px 15px 160px;
+ font-size: 13px;
+ line-height: 1.5;
+ text-align: left;
+ background-color: rgba(0,0,0,.5);
box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
}
-.carbonad-img {
- margin: 0 !important;
-}
-.carbonad-text,
-.carbonad-tag,
-.carbonad-tag a {
- color: #fff !important;
-}
-.carbonad-text,
-.carbonad-tag {
- float: none !important;
- display: block !important;
- width: auto !important;
- height: auto !important;
- margin-left: 145px !important;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-}
-.carbonad-text {
- padding-top: 0 !important;
+
+#carbonads a {
+ color: #fff;
}
-.carbonad-tag {
- text-align: left !important;
+
+.carbon-img {
+ float: left;
+ margin-left: -145px;
}
-/* Ads on homepage */
-.masthead .carbonad {
- position: static;
- margin: 30px auto 0 !important;
- text-align: left !important;
+.carbon-poweredby {
+ display: block;
+ color: #cdbfe3 !important;
}
-@media (max-width: 980px) {
- .carbonad {
- position: static;
- width: auto !important;
- margin-top: 30px !important;
+@media (min-width: 480px) {
+ #carbonads {
+ max-width: 155px; /* 330 - padding */
+ margin: 50px auto 0;
+ border-radius: 4px;
}
}
-@media (max-width: 767px) {
- .carbonad {
+@media (min-width: 992px) {
+ #carbonads {
+ position: absolute;
+ top: 0;
+ right: 15px;
+ margin-top: 0;
+ }
+ .masthead #carbonads {
position: static;
- width: auto !important;
- margin: 40px -20px -40px !important;
- padding: 20px !important;
- overflow: hidden; /* clearfix */
- border-radius: 0;
+ margin: 30px auto 0;
}
}
<div class="container">
<h1>Base CSS</h1>
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Components</h1>
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Customize and download</h1>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, javascript plugins, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Extending Bootstrap</h1>
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<div>
</header>
<div class="container">
<h1>Getting started</h1>
<p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<li><a href="./extend.html" >Extend</a></li>
<li>Version 2.1.1</li>
</ul>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</div>
<div class="container">
<h1>JavaScript for Bootstrap</h1>
<p class="lead">Bring Bootstrap's components to life—now with 13 custom jQuery plugins.
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on responsive 12-column grids, layouts, and components.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
/* Ads in headers
-------------------------------------------------- */
-.subhead h1,
-.subhead .lead {
- margin-right: 340px;
+@media (min-width: 992px) {
+ .subhead h1,
+ .subhead .lead {
+ margin-right: 350px;
+ }
}
-.carbonad {
- position: absolute;
- top: 0;
- right: 0;
- margin-top: 0 !important;
- padding: 15px;
- height: auto !important;
- overflow: hidden; /* clearfix */
- font-size: 13px !important;
- line-height: 16px !important;
- background: #222 !important; /* reset image and color in one line */
- background: rgba(0,0,0,.5) !important;
- border: 0 !important;
- border-radius: 4px;
+#carbonads {
+ display: block;
+ overflow: hidden;
+ margin: 40px -20px -40px;
+ padding: 15px 15px 15px 160px;
+ font-size: 13px;
+ line-height: 1.5;
+ text-align: left;
+ background-color: rgba(0,0,0,.5);
box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
}
-.carbonad-img {
- margin: 0 !important;
-}
-.carbonad-text,
-.carbonad-tag,
-.carbonad-tag a {
- color: #fff !important;
-}
-.carbonad-text,
-.carbonad-tag {
- float: none !important;
- display: block !important;
- width: auto !important;
- height: auto !important;
- margin-left: 145px !important;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-}
-.carbonad-text {
- padding-top: 0 !important;
+
+#carbonads a {
+ color: #fff;
}
-.carbonad-tag {
- text-align: left !important;
+
+.carbon-img {
+ float: left;
+ margin-left: -145px;
}
-/* Ads on homepage */
-.masthead .carbonad {
- position: static;
- margin: 30px auto 0 !important;
- text-align: left !important;
+.carbon-poweredby {
+ display: block;
+ color: #cdbfe3 !important;
}
-@media (max-width: 980px) {
- .carbonad {
- position: static;
- width: auto !important;
- margin-top: 30px !important;
+@media (min-width: 480px) {
+ #carbonads {
+ max-width: 155px; /* 330 - padding */
+ margin: 50px auto 0;
+ border-radius: 4px;
}
}
-@media (max-width: 767px) {
- .carbonad {
+@media (min-width: 992px) {
+ #carbonads {
+ position: absolute;
+ top: 0;
+ right: 15px;
+ margin-top: 0;
+ }
+ .masthead #carbonads {
position: static;
- width: auto !important;
- margin: 40px -20px -40px !important;
- padding: 20px !important;
- overflow: hidden; /* clearfix */
- border-radius: 0;
+ margin: 30px auto 0;
}
}
-
/* Responsive docs
-------------------------------------------------- */
<div class="container">
<h1>Base CSS</h1>
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Components</h1>
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Customize and download</h1>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Extending Bootstrap</h1>
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<div>
</header>
<div class="container">
<h1>Getting started</h1>
<p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
Version 2.2.0
</li>
</ul>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</div>
<div class="container">
<h1>JavaScript</h1>
<p class="lead">Bring Bootstrap's components to life—now with 13 custom jQuery plugins.
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on responsive 12-column grids, layouts, and components.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
/* Ads in headers
-------------------------------------------------- */
-.subhead h1,
-.subhead .lead {
- margin-right: 340px;
+@media (min-width: 992px) {
+ .subhead h1,
+ .subhead .lead {
+ margin-right: 350px;
+ }
}
-.carbonad {
- position: absolute;
- top: 0;
- right: 0;
- margin-top: 0 !important;
- padding: 15px;
- height: auto !important;
- overflow: hidden; /* clearfix */
- font-size: 13px !important;
- line-height: 16px !important;
- background: #222 !important; /* reset image and color in one line */
- background: rgba(0,0,0,.5) !important;
- border: 0 !important;
- border-radius: 4px;
+#carbonads {
+ display: block;
+ overflow: hidden;
+ margin: 40px -20px -40px;
+ padding: 15px 15px 15px 160px;
+ font-size: 13px;
+ line-height: 1.5;
+ text-align: left;
+ background-color: rgba(0,0,0,.5);
box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
}
-.carbonad-img {
- margin: 0 !important;
-}
-.carbonad-text,
-.carbonad-tag,
-.carbonad-tag a {
- color: #fff !important;
-}
-.carbonad-text,
-.carbonad-tag {
- float: none !important;
- display: block !important;
- width: auto !important;
- height: auto !important;
- margin-left: 145px !important;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-}
-.carbonad-text {
- padding-top: 0 !important;
+
+#carbonads a {
+ color: #fff;
}
-.carbonad-tag {
- text-align: left !important;
+
+.carbon-img {
+ float: left;
+ margin-left: -145px;
}
-/* Ads on homepage */
-.masthead .carbonad {
- position: static;
- margin: 30px auto 0 !important;
- text-align: left !important;
+.carbon-poweredby {
+ display: block;
+ color: #cdbfe3 !important;
}
-@media (max-width: 980px) {
- .carbonad {
- position: static;
- width: auto !important;
- margin-top: 30px !important;
+@media (min-width: 480px) {
+ #carbonads {
+ max-width: 155px; /* 330 - padding */
+ margin: 50px auto 0;
+ border-radius: 4px;
}
}
-@media (max-width: 767px) {
- .carbonad {
+@media (min-width: 992px) {
+ #carbonads {
+ position: absolute;
+ top: 0;
+ right: 15px;
+ margin-top: 0;
+ }
+ .masthead #carbonads {
position: static;
- width: auto !important;
- margin: 40px -20px -40px !important;
- padding: 20px !important;
- overflow: hidden; /* clearfix */
- border-radius: 0;
+ margin: 30px auto 0;
}
}
-
/* Responsive docs
-------------------------------------------------- */
<div class="container">
<h1>Base CSS</h1>
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Components</h1>
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Customize and download</h1>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Extending Bootstrap</h1>
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<div>
</header>
<div class="container">
<h1>Getting started</h1>
<p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
Version 2.2.1
</li>
</ul>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</div>
<div class="container">
<h1>JavaScript</h1>
<p class="lead">Bring Bootstrap's components to life—now with 13 custom jQuery plugins.
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on responsive 12-column grids, layouts, and components.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
/* Ads in headers
-------------------------------------------------- */
-.subhead h1,
-.subhead .lead {
- margin-right: 340px;
+@media (min-width: 992px) {
+ .subhead h1,
+ .subhead .lead {
+ margin-right: 350px;
+ }
}
-.carbonad {
- position: absolute;
- top: 0;
- right: 0;
- margin-top: 0 !important;
- padding: 15px;
- height: auto !important;
- overflow: hidden; /* clearfix */
- font-size: 13px !important;
- line-height: 16px !important;
- background: #222 !important; /* reset image and color in one line */
- background: rgba(0,0,0,.5) !important;
- border: 0 !important;
- border-radius: 4px;
+#carbonads {
+ display: block;
+ overflow: hidden;
+ margin: 40px -20px -40px;
+ padding: 15px 15px 15px 160px;
+ font-size: 13px;
+ line-height: 1.5;
+ text-align: left;
+ background-color: rgba(0,0,0,.5);
box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
}
-.carbonad-img {
- margin: 0 !important;
-}
-.carbonad-text,
-.carbonad-tag,
-.carbonad-tag a {
- color: #fff !important;
-}
-.carbonad-text,
-.carbonad-tag {
- float: none !important;
- display: block !important;
- width: auto !important;
- height: auto !important;
- margin-left: 145px !important;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-}
-.carbonad-text {
- padding-top: 0 !important;
+
+#carbonads a {
+ color: #fff;
}
-.carbonad-tag {
- text-align: left !important;
+
+.carbon-img {
+ float: left;
+ margin-left: -145px;
}
-/* Ads on homepage */
-.masthead .carbonad {
- position: static;
- margin: 30px auto 0 !important;
- text-align: left !important;
+.carbon-poweredby {
+ display: block;
+ color: #cdbfe3 !important;
}
-@media (max-width: 980px) {
- .carbonad {
- position: static;
- width: auto !important;
- margin-top: 30px !important;
+@media (min-width: 480px) {
+ #carbonads {
+ max-width: 155px; /* 330 - padding */
+ margin: 50px auto 0;
+ border-radius: 4px;
}
}
-@media (max-width: 767px) {
- .carbonad {
+@media (min-width: 992px) {
+ #carbonads {
+ position: absolute;
+ top: 0;
+ right: 15px;
+ margin-top: 0;
+ }
+ .masthead #carbonads {
position: static;
- width: auto !important;
- margin: 40px -20px -40px !important;
- padding: 20px !important;
- overflow: hidden; /* clearfix */
- border-radius: 0;
+ margin: 30px auto 0;
}
}
-
/* Responsive docs
-------------------------------------------------- */
<div class="container">
<h1>Base CSS</h1>
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</header>
<div class="container">
<h1>Components</h1>
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Customize and download</h1>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Extending Bootstrap</h1>
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<div>
</header>
<div class="container">
<h1>Getting started</h1>
<p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<li>
Version 2.2.2
</li>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</ul>
</div>
</div>
<div class="container">
<h1>JavaScript</h1>
<p class="lead">Bring Bootstrap's components to life—now with 13 custom jQuery plugins.
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on responsive 12-column grids, layouts, and components.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
/* Ads in headers
-------------------------------------------------- */
-.subhead h1,
-.subhead .lead {
- margin-right: 340px;
+@media (min-width: 992px) {
+ .subhead h1,
+ .subhead .lead {
+ margin-right: 350px;
+ }
}
-.carbonad {
- position: absolute;
- top: 0;
- right: 0;
- margin-top: 0 !important;
- padding: 15px;
- height: auto !important;
- overflow: hidden; /* clearfix */
- font-size: 13px !important;
- line-height: 16px !important;
- background: #222 !important; /* reset image and color in one line */
- background: rgba(0,0,0,.5) !important;
- border: 0 !important;
- border-radius: 4px;
+#carbonads {
+ display: block;
+ overflow: hidden;
+ margin: 40px -20px -40px;
+ padding: 15px 15px 15px 160px;
+ font-size: 13px;
+ line-height: 1.5;
+ text-align: left;
+ background-color: rgba(0,0,0,.5);
box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
}
-.carbonad-img {
- margin: 0 !important;
-}
-.carbonad-text,
-.carbonad-tag,
-.carbonad-tag a {
- color: #fff !important;
-}
-.carbonad-text,
-.carbonad-tag {
- float: none !important;
- display: block !important;
- width: auto !important;
- height: auto !important;
- margin-left: 145px !important;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-}
-.carbonad-text {
- padding-top: 0 !important;
+
+#carbonads a {
+ color: #fff;
}
-.carbonad-tag {
- text-align: left !important;
+
+.carbon-img {
+ float: left;
+ margin-left: -145px;
}
-/* Ads on homepage */
-.masthead .carbonad {
- position: static;
- margin: 30px auto 0 !important;
- text-align: left !important;
+.carbon-poweredby {
+ display: block;
+ color: #cdbfe3 !important;
}
-@media (max-width: 980px) {
- .carbonad {
- position: static;
- width: auto !important;
- margin-top: 30px !important;
+@media (min-width: 480px) {
+ #carbonads {
+ max-width: 155px; /* 330 - padding */
+ margin: 50px auto 0;
+ border-radius: 4px;
}
}
-@media (max-width: 767px) {
- .carbonad {
+@media (min-width: 992px) {
+ #carbonads {
+ position: absolute;
+ top: 0;
+ right: 15px;
+ margin-top: 0;
+ }
+ .masthead #carbonads {
position: static;
- width: auto !important;
- margin: 40px -20px -40px !important;
- padding: 20px !important;
- overflow: hidden; /* clearfix */
- border-radius: 0;
+ margin: 30px auto 0;
}
}
-
/* Responsive docs
-------------------------------------------------- */
<div class="container">
<h1>Base CSS</h1>
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Components</h1>
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Customize and download</h1>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Extending Bootstrap</h1>
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<div>
</header>
<div class="container">
<h1>Getting started</h1>
<p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
Version 2.3.0
</li>
</ul>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</div>
<div class="container">
<h1>JavaScript</h1>
<p class="lead">Bring Bootstrap's components to life—now with 13 custom jQuery plugins.
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on responsive 12-column grids, layouts, and components.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
/* Ads in headers
-------------------------------------------------- */
-.subhead h1,
-.subhead .lead {
- margin-right: 340px;
+@media (min-width: 992px) {
+ .subhead h1,
+ .subhead .lead {
+ margin-right: 350px;
+ }
}
-.carbonad {
- position: absolute;
- top: 0;
- right: 0;
- margin-top: 0 !important;
- padding: 15px;
- height: auto !important;
- overflow: hidden; /* clearfix */
- font-size: 13px !important;
- line-height: 16px !important;
- background: #222 !important; /* reset image and color in one line */
- background: rgba(0,0,0,.5) !important;
- border: 0 !important;
- border-radius: 4px;
+#carbonads {
+ display: block;
+ overflow: hidden;
+ margin: 40px -20px -40px;
+ padding: 15px 15px 15px 160px;
+ font-size: 13px;
+ line-height: 1.5;
+ text-align: left;
+ background-color: rgba(0,0,0,.5);
box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
}
-.carbonad-img {
- margin: 0 !important;
-}
-.carbonad-text,
-.carbonad-tag,
-.carbonad-tag a {
- color: #fff !important;
-}
-.carbonad-text,
-.carbonad-tag {
- float: none !important;
- display: block !important;
- width: auto !important;
- height: auto !important;
- margin-left: 145px !important;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-}
-.carbonad-text {
- padding-top: 0 !important;
+
+#carbonads a {
+ color: #fff;
}
-.carbonad-tag {
- text-align: left !important;
+
+.carbon-img {
+ float: left;
+ margin-left: -145px;
}
-/* Ads on homepage */
-.masthead .carbonad {
- position: static;
- margin: 30px auto 0 !important;
- text-align: left !important;
+.carbon-poweredby {
+ display: block;
+ color: #cdbfe3 !important;
}
-@media (max-width: 980px) {
- .carbonad {
- position: static;
- width: auto !important;
- margin-top: 30px !important;
+@media (min-width: 480px) {
+ #carbonads {
+ max-width: 155px; /* 330 - padding */
+ margin: 50px auto 0;
+ border-radius: 4px;
}
}
-@media (max-width: 767px) {
- .carbonad {
+@media (min-width: 992px) {
+ #carbonads {
+ position: absolute;
+ top: 0;
+ right: 15px;
+ margin-top: 0;
+ }
+ .masthead #carbonads {
position: static;
- width: auto !important;
- margin: 40px -20px -40px !important;
- padding: 20px !important;
- overflow: hidden; /* clearfix */
- border-radius: 0;
+ margin: 30px auto 0;
}
}
-
/* Responsive docs
-------------------------------------------------- */
<div class="container">
<h1>Base CSS</h1>
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Components</h1>
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Customize and download</h1>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Extending Bootstrap</h1>
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</header>
<div class="container">
<div class="container">
<h1>Getting started</h1>
<p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
Version 2.3.1
</li>
</ul>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</div>
<div class="container">
<h1>JavaScript</h1>
<p class="lead">Bring Bootstrap's components to life—now with 13 custom jQuery plugins.
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on responsive 12-column grids, layouts, and components.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
/* Ads in headers
-------------------------------------------------- */
-.subhead h1,
-.subhead .lead {
- margin-right: 340px;
+@media (min-width: 992px) {
+ .subhead h1,
+ .subhead .lead {
+ margin-right: 350px;
+ }
}
-.carbonad {
- position: absolute;
- top: 0;
- right: 0;
- margin-top: 0 !important;
- padding: 15px;
- height: auto !important;
- overflow: hidden; /* clearfix */
- font-size: 13px !important;
- line-height: 16px !important;
- background: #222 !important; /* reset image and color in one line */
- background: rgba(0,0,0,.5) !important;
- border: 0 !important;
- border-radius: 4px;
+#carbonads {
+ display: block;
+ overflow: hidden;
+ margin: 40px -20px -40px;
+ padding: 15px 15px 15px 160px;
+ font-size: 13px;
+ line-height: 1.5;
+ text-align: left;
+ background-color: rgba(0,0,0,.5);
box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
}
-.carbonad-img {
- margin: 0 !important;
-}
-.carbonad-text,
-.carbonad-tag,
-.carbonad-tag a {
- color: #fff !important;
-}
-.carbonad-text,
-.carbonad-tag {
- float: none !important;
- display: block !important;
- width: auto !important;
- height: auto !important;
- margin-left: 145px !important;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-}
-.carbonad-text {
- padding-top: 0 !important;
+
+#carbonads a {
+ color: #fff;
}
-.carbonad-tag {
- text-align: left !important;
+
+.carbon-img {
+ float: left;
+ margin-left: -145px;
}
-/* Ads on homepage */
-.masthead .carbonad {
- position: static;
- margin: 30px auto 0 !important;
- text-align: left !important;
+.carbon-poweredby {
+ display: block;
+ color: #cdbfe3 !important;
}
-@media (max-width: 980px) {
- .carbonad {
- position: static;
- width: auto !important;
- margin-top: 30px !important;
+@media (min-width: 480px) {
+ #carbonads {
+ max-width: 155px; /* 330 - padding */
+ margin: 50px auto 0;
+ border-radius: 4px;
}
}
-@media (max-width: 767px) {
- .carbonad {
+@media (min-width: 992px) {
+ #carbonads {
+ position: absolute;
+ top: 0;
+ right: 15px;
+ margin-top: 0;
+ }
+ .masthead #carbonads {
position: static;
- width: auto !important;
- margin: 40px -20px -40px !important;
- padding: 20px !important;
- overflow: hidden; /* clearfix */
- border-radius: 0;
+ margin: 30px auto 0;
}
}
-
/* Responsive
-------------------------------------------------- */
<div class="container">
<h1>Base CSS</h1>
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Components</h1>
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Customize and download</h1>
<p class="lead"><a href="https://github.com/twbs/bootstrap/archive/v2.3.2.zip">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Getting started</h1>
<p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
</li>
</ul>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</div>
<div class="container">
<h1>JavaScript</h1>
<p class="lead">Bring Bootstrap's components to life—now with 13 custom jQuery plugins.
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<div class="container">
<h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on responsive 12-column grids, layouts, and components.</p>
- <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</header>
<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <meta name=description content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."> <meta name=keywords content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development"> <meta name=author content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <title> About · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class="v4-tease">Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Themes")">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>About</h1> <p>Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.</p> <
div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s);</script></div></div></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 id=history class=page-header>History</h1> <p class=lead>Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p> <p>Bootstrap was created at Twitter in mid-2010 by <a href=https://twitter.com/mdo>@mdo</a> and <a href=https://twitter.com/fat>@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href=https://blog.twitter.com/2010/hack-week>first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p> <p>Originally <a href=https://blog.twitter.com/2011/bootstrap-twitter>released</a> on <a href=https://twitter.com/mdo/statuses/104620039650557952><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we've since had over <a href=https://github.com/twbs/bootstrap/releases>twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p> </div> <div class=bs-docs-section> <h1 id=team class=page-header>Team</h1> <p class=lead>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p> <h2 id=team-core>Core team</h2> <div class="list-group bs-team"> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=mdo&type=follow"></iframe> <a class=team-member href=https://github.com/mdo> <img src="https://secure.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c.jpg?s=32" alt="@mdo avatar" width=32 height=32> <strong>Mark Otto</strong> <small>@mdo</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=fat&type=follow"></iframe> <a class=team-member href=https://github.com/fat> <img src="https://secure.gravatar.com/avatar/a98244cbdacaf1c0b55499466002f7a8.jpg?s=32" alt="@fat avatar" width=32 height=32> <strong>Jacob Thornton</strong> <small>@fat</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=cvrebert&type=follow"></iframe> <a class=team-member href=https://github.com/cvrebert> <img src="https://secure.gravatar.com/avatar/edec428c425453955f770095a7d26c50.jpg?s=32" alt="@cvrebert avatar" width=32 height=32> <strong>Chris Rebert</strong> <small>@cvrebert</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=juthilo&type=follow"></iframe> <a class=team-member href=https://github.com/juthilo> <img src="https://secure.gravatar.com/avatar/0f7dd3ce58a416be5685ea6194f82b11.jpg?s=32" alt="@juthilo avatar" width=32 height=32> <strong>Julian Thilo</strong> <small>@juthilo</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=xhmikosr&type=follow"></iframe> <a class=team-member href=https://github.com/xhmikosr> <img src="https://secure.gravatar.com/avatar/e37759b1ea0125d4e97b1e00b5eed26f.jpg?s=32" alt="@xhmikosr avatar" width=32 height=32> <strong>XhmikosR</strong> <small>@xhmikosr</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=hnrch02&type=follow"></iframe> <a class=team-member href=https://github.com/hnrch02> <img src="https://secure.gravatar.com/avatar/0d53f5d3d3d28bd470f394d98f7ef48f.jpg?s=32" alt="@hnrch02 avatar" width=32 height=32> <strong>Heinrich Fenkart</strong> <small>@hnrch02</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=patrickhlauke&type=follow"></iframe> <a class=team-member href=https://github.com/patrickhlauke> <img src="https://secure.gravatar.com/avatar/357f279672db832fc41a5a2f36559fcb.jpg?s=32" alt="@patrickhlauke avatar" width=32 height=32> <strong>Patrick H. Lauke</strong> <small>@patrickhlauke</small> </a> </div> </div> <p>Get involved with Bootstrap development by <a href=https://github.com/twbs/bootstrap/issues/new>opening an issue</a> or submitting a pull request. Read our <a href=https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md>contributing guidelines</a> for information on how we develop.</p> <h2 id=team-sass>Sass team</h2> <div class="list-group bs-team"> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=thomas-mcdonald&type=follow"></iframe> <a class=team-member href=https://github.com/thomas-mcdonald> <img src="https://secure.gravatar.com/avatar/24cd55ab1a62ffb113ab8c02f64c9301.jpg?s=32" alt="@thomas-mcdonald avatar" width=32 height=32> <strong>Thomas McDonald</strong> <small>@thomas-mcdonald</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=glebm&type=follow"></iframe> <a class=team-member href=https://github.com/glebm> <img src="https://secure.gravatar.com/avatar/729f685b8e8d7e9feed18c177c82e59b.jpg?s=32" alt="@glebm avatar" width=32 height=32> <strong>Gleb Mazovetskiy</strong> <small>@glebm</small> </a> </div> </div> <p>The <a href=https://github.com/twbs/bootstrap-sass>official Sass port of Bootstrap</a> was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass <a href=https://github.com/twbs/bootstrap-sass/blob/master/CONTRIBUTING.md>contributing guidelines</a> for information on how the Sass port is developed.</p> </div> <div class=bs-docs-section> <h1 id=brand class=page-header>Brand guidelines</h1> <p class=lead>Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's <a href=http://mailchimp.com/about/brand-assets/ target=_blank>Brand Assets</a>.</p> <h2>Mark and logo</h2> <p>Use either the Bootstrap mark (a capital <strong>B</strong>) or the standard logo (just <strong>Bootstrap</strong>). It should always appear in Helvetica Neue Bold. <strong>Do not use the Twitter bird</strong> in association with Bootstrap.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <div class="bs-docs-booticon bs-docs-booticon-lg">B</div> </div> <div class="bs-brand-item inverse"> <div class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-inverse">B</div> </div> </div> <div class=bs-brand-logos> <div class=bs-brand-item> <h1>Bootstrap</h1> </div> <div class="bs-brand-item inverse"> <h1>Bootstrap</h1> </div> </div> <h2>Download mark</h2> <p>Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <img class=svg src=../assets/brand/bootstrap-solid.svg alt=Bootstrap width=144 height=144> </div> <div class="bs-brand-item inverse"> <img class=svg src=../assets/brand/bootstrap-outline.svg alt=Bootstrap width=144 height=144> </div> <div class="bs-brand-item inverse"> <img class=svg src=../assets/brand/bootstrap-punchout.svg alt=Bootstrap width=144 height=144> </div> </div> <h2>Name</h2> <p>The project and framework should always be referred to as <strong>Bootstrap</strong>. No Twitter before it, no capital <em>s</em>, and no abbreviations except for one, a capital <strong>B</strong>.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <h3>Bootstrap</h3> <span class="glyphicon glyphicon-ok" aria-hidden=true></span> <span class=sr-only>(correct)</span> </div> <div class=bs-brand-item> <h3 class=text-muted>BootStrap</h3> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=sr-only>(incorrect)</span> </div> <div class=bs-brand-item> <h3 class=text-muted>Twitter Bootstrap</h3> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=sr-only>(incorrect)</span> </div> </div> <h2>Colors</h2> <p>Our docs and branding use a handful of primary colors to differentiate what <em>is</em> Bootstrap from what <em>is in</em> Bootstrap. In other words, if it's purple, it's representative of Bootstrap.</p> <div class=bs-brand> <div class=color-swatches> <div class="color-swatch bs-purple"></div> <div class="color-swatch bs-purple-light"></div> <div class="color-swatch bs-purple-lighter"></div> <div class="color-swatch bs-gray"></div> </div> </div> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm"> <ul class="nav bs-docs-sidenav"> <li> <a href=#history>History</a> </li> <li> <a href=#team>Team</a> </li> <li> <a href=#brand>Brand guidelines</a> </li> </ul> <a class=back-to-top href=#top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer role=contentinfo> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href="../about/">About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a rel=license href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank>MIT</a>, docs <a rel=license href=https://creativecommons.org/licenses/by/3.0/ target=_blank>CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script><script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>');</script><script src=../dist/js/bootstrap.min.js></script><script src=../assets/js/docs.min.js></script><script src=../assets/js/ie10-viewport-bug-workaround.js></script><script>var _gauges=_gauges||[];!function(){var e=document.createElement("script");e.async=!0,e.id="gauges-tracker",e.setAttribute("data-site-id","4f0dc9fef5a1f55508000013"),e.src="//secure.gaug.es/track.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}();</script></body></html>
\ No newline at end of file
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class="v4-tease">Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Themes")">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>About</h1> <p>Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.</p> <
script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 id=history class=page-header>History</h1> <p class=lead>Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p> <p>Bootstrap was created at Twitter in mid-2010 by <a href=https://twitter.com/mdo>@mdo</a> and <a href=https://twitter.com/fat>@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href=https://blog.twitter.com/2010/hack-week>first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p> <p>Originally <a href=https://blog.twitter.com/2011/bootstrap-twitter>released</a> on <a href=https://twitter.com/mdo/statuses/104620039650557952><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we've since had over <a href=https://github.com/twbs/bootstrap/releases>twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p> </div> <div class=bs-docs-section> <h1 id=team class=page-header>Team</h1> <p class=lead>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p> <h2 id=team-core>Core team</h2> <div class="list-group bs-team"> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=mdo&type=follow"></iframe> <a class=team-member href=https://github.com/mdo> <img src="https://secure.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c.jpg?s=32" alt="@mdo avatar" width=32 height=32> <strong>Mark Otto</strong> <small>@mdo</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=fat&type=follow"></iframe> <a class=team-member href=https://github.com/fat> <img src="https://secure.gravatar.com/avatar/a98244cbdacaf1c0b55499466002f7a8.jpg?s=32" alt="@fat avatar" width=32 height=32> <strong>Jacob Thornton</strong> <small>@fat</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=cvrebert&type=follow"></iframe> <a class=team-member href=https://github.com/cvrebert> <img src="https://secure.gravatar.com/avatar/edec428c425453955f770095a7d26c50.jpg?s=32" alt="@cvrebert avatar" width=32 height=32> <strong>Chris Rebert</strong> <small>@cvrebert</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=juthilo&type=follow"></iframe> <a class=team-member href=https://github.com/juthilo> <img src="https://secure.gravatar.com/avatar/0f7dd3ce58a416be5685ea6194f82b11.jpg?s=32" alt="@juthilo avatar" width=32 height=32> <strong>Julian Thilo</strong> <small>@juthilo</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=xhmikosr&type=follow"></iframe> <a class=team-member href=https://github.com/xhmikosr> <img src="https://secure.gravatar.com/avatar/e37759b1ea0125d4e97b1e00b5eed26f.jpg?s=32" alt="@xhmikosr avatar" width=32 height=32> <strong>XhmikosR</strong> <small>@xhmikosr</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=hnrch02&type=follow"></iframe> <a class=team-member href=https://github.com/hnrch02> <img src="https://secure.gravatar.com/avatar/0d53f5d3d3d28bd470f394d98f7ef48f.jpg?s=32" alt="@hnrch02 avatar" width=32 height=32> <strong>Heinrich Fenkart</strong> <small>@hnrch02</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=patrickhlauke&type=follow"></iframe> <a class=team-member href=https://github.com/patrickhlauke> <img src="https://secure.gravatar.com/avatar/357f279672db832fc41a5a2f36559fcb.jpg?s=32" alt="@patrickhlauke avatar" width=32 height=32> <strong>Patrick H. Lauke</strong> <small>@patrickhlauke</small> </a> </div> </div> <p>Get involved with Bootstrap development by <a href=https://github.com/twbs/bootstrap/issues/new>opening an issue</a> or submitting a pull request. Read our <a href=https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md>contributing guidelines</a> for information on how we develop.</p> <h2 id=team-sass>Sass team</h2> <div class="list-group bs-team"> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=thomas-mcdonald&type=follow"></iframe> <a class=team-member href=https://github.com/thomas-mcdonald> <img src="https://secure.gravatar.com/avatar/24cd55ab1a62ffb113ab8c02f64c9301.jpg?s=32" alt="@thomas-mcdonald avatar" width=32 height=32> <strong>Thomas McDonald</strong> <small>@thomas-mcdonald</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=glebm&type=follow"></iframe> <a class=team-member href=https://github.com/glebm> <img src="https://secure.gravatar.com/avatar/729f685b8e8d7e9feed18c177c82e59b.jpg?s=32" alt="@glebm avatar" width=32 height=32> <strong>Gleb Mazovetskiy</strong> <small>@glebm</small> </a> </div> </div> <p>The <a href=https://github.com/twbs/bootstrap-sass>official Sass port of Bootstrap</a> was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass <a href=https://github.com/twbs/bootstrap-sass/blob/master/CONTRIBUTING.md>contributing guidelines</a> for information on how the Sass port is developed.</p> </div> <div class=bs-docs-section> <h1 id=brand class=page-header>Brand guidelines</h1> <p class=lead>Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's <a href=http://mailchimp.com/about/brand-assets/ target=_blank>Brand Assets</a>.</p> <h2>Mark and logo</h2> <p>Use either the Bootstrap mark (a capital <strong>B</strong>) or the standard logo (just <strong>Bootstrap</strong>). It should always appear in Helvetica Neue Bold. <strong>Do not use the Twitter bird</strong> in association with Bootstrap.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <div class="bs-docs-booticon bs-docs-booticon-lg">B</div> </div> <div class="bs-brand-item inverse"> <div class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-inverse">B</div> </div> </div> <div class=bs-brand-logos> <div class=bs-brand-item> <h1>Bootstrap</h1> </div> <div class="bs-brand-item inverse"> <h1>Bootstrap</h1> </div> </div> <h2>Download mark</h2> <p>Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <img class=svg src=../assets/brand/bootstrap-solid.svg alt=Bootstrap width=144 height=144> </div> <div class="bs-brand-item inverse"> <img class=svg src=../assets/brand/bootstrap-outline.svg alt=Bootstrap width=144 height=144> </div> <div class="bs-brand-item inverse"> <img class=svg src=../assets/brand/bootstrap-punchout.svg alt=Bootstrap width=144 height=144> </div> </div> <h2>Name</h2> <p>The project and framework should always be referred to as <strong>Bootstrap</strong>. No Twitter before it, no capital <em>s</em>, and no abbreviations except for one, a capital <strong>B</strong>.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <h3>Bootstrap</h3> <span class="glyphicon glyphicon-ok" aria-hidden=true></span> <span class=sr-only>(correct)</span> </div> <div class=bs-brand-item> <h3 class=text-muted>BootStrap</h3> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=sr-only>(incorrect)</span> </div> <div class=bs-brand-item> <h3 class=text-muted>Twitter Bootstrap</h3> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=sr-only>(incorrect)</span> </div> </div> <h2>Colors</h2> <p>Our docs and branding use a handful of primary colors to differentiate what <em>is</em> Bootstrap from what <em>is in</em> Bootstrap. In other words, if it's purple, it's representative of Bootstrap.</p> <div class=bs-brand> <div class=color-swatches> <div class="color-swatch bs-purple"></div> <div class="color-swatch bs-purple-light"></div> <div class="color-swatch bs-purple-lighter"></div> <div class="color-swatch bs-gray"></div> </div> </div> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm"> <ul class="nav bs-docs-sidenav"> <li> <a href=#history>History</a> </li> <li> <a href=#team>Team</a> </li> <li> <a href=#brand>Brand guidelines</a> </li> </ul> <a class=back-to-top href=#top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer role=contentinfo> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href="../about/">About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a rel=license href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank>MIT</a>, docs <a rel=license href=https://creativecommons.org/licenses/by/3.0/ target=_blank>CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script><script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>');</script><script src=../dist/js/bootstrap.min.js></script><script src=../assets/js/docs.min.js></script><script src=../assets/js/ie10-viewport-bug-workaround.js></script><script>var _gauges=_gauges||[];!function(){var e=document.createElement("script");e.async=!0,e.id="gauges-tracker",e.setAttribute("data-site-id","4f0dc9fef5a1f55508000013"),e.src="//secure.gaug.es/track.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}();</script></body></html>
\ No newline at end of file
* Copyright 2011-2015 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see https://creativecommons.org/licenses/by/3.0/.
- */body{position:relative}.table code{font-size:13px;font-weight:400}h2 code,h3 code,h4 code{background-color:inherit}.btn-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:active,.btn-outline:focus,.btn-outline:hover{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:active,.btn-outline-inverse:focus,.btn-outline-inverse:hover{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bs-docs-booticon{display:block;font-weight:500;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bs-docs-booticon-sm{width:30px;height:30px;font-size:20px;line-height:28px}.bs-docs-booticon-lg{width:144px;height:144px;font-size:108px;line-height:140px}.bs-docs-booticon-inverse{color:#563d7c;background-color:#fff}.bs-docs-booticon-outline{background-color:transparent;border:1px solid #cdbfe3}#skippy{display:block;padding:1em;color:#fff;background-color:#6f5499;outline:0}#skippy .skiplink-text{padding:.5em;outline:1px dotted}#content:focus{outline:0}.bs-docs-nav{margin-bottom:0;background-color:#fff;border-bottom:0}.bs-home-nav .bs-nav-b{display:none}.bs-docs-nav .navbar-brand,.bs-docs-nav .navbar-nav>li>a{font-weight:500;color:#563d7c}.bs-docs-nav .navbar-nav>.active>a,.bs-docs-nav .navbar-nav>.active>a:hover,.bs-docs-nav .navbar-nav>li>a:hover{color:#463265;background-color:#f9f9f9}.bs-docs-nav .navbar-toggle .icon-bar{background-color:#563d7c}.bs-docs-nav .navbar-header .navbar-toggle{border-color:#fff}.bs-docs-nav .navbar-header .navbar-toggle:focus,.bs-docs-nav .navbar-header .navbar-toggle:hover{background-color:#f9f9f9;border-color:#f9f9f9}.bs-docs-footer{padding-top:50px;padding-bottom:50px;margin-top:100px;color:#99979c;text-align:center;background-color:#2a2730}.bs-docs-footer a{color:#fff}.bs-docs-footer-links{padding-left:0;margin-bottom:20px}.bs-docs-footer-links li{display:inline-block}.bs-docs-footer-links li+li{margin-left:15px}@media (min-width:768px){.bs-docs-footer{text-align:left}.bs-docs-footer p{margin-bottom:0}}.bs-docs-header,.bs-docs-masthead{position:relative;padding:30px 0;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-gradient(linear,left top,left bottom,from(#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);background-repeat:repeat-x}.bs-docs-masthead .bs-docs-booticon{margin:0 auto 30px}.bs-docs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-docs-masthead .lead{margin:0 auto 30px;font-size:20px;color:#fff}.bs-docs-masthead .version{margin-top:-15px;margin-bottom:30px;color:#9783b9}.bs-docs-masthead .btn{width:100%;padding:15px 30px;font-size:20px}@media (min-width:480px){.bs-docs-masthead .btn{width:auto}}@media (min-width:768px){.bs-docs-masthead{padding:80px 0}.bs-docs-masthead h1{font-size:60px}.bs-docs-masthead .lead{font-size:24px}}@media (min-width:992px){.bs-docs-masthead .lead{width:80%;font-size:30px}}.bs-docs-header{margin-bottom:40px;font-size:20px}.bs-docs-header h1{margin-top:0;color:#fff}.bs-docs-header p{margin-bottom:0;font-weight:300;line-height:1.4}.bs-docs-header .container{position:relative}@media (min-width:768px){.bs-docs-header{padding-top:60px;padding-bottom:60px;font-size:24px;text-align:left}.bs-docs-header h1{font-size:60px;line-height:1}}@media (min-width:992px){.bs-docs-header h1,.bs-docs-header p{margin-right:380px}}.carbonad{width:auto!important;height:auto!important;padding:20px!important;margin:30px -15px -31px!important;overflow:hidden;font-size:13px!important;line-height:16px!important;text-align:left;background:0 0!important;border:solid #866ab3!important;border-width:1px 0!important}.carbonad-img{margin:0!important}.carbonad-tag,.carbonad-text{display:block!important;float:none!important;width:auto!important;height:auto!important;margin-left:145px!important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.carbonad-tag a,.carbonad-text a{color:#fff!important}.carbonad #azcarbon>img{display:none}@media (min-width:480px){.carbonad{width:330px!important;margin:20px auto!important;border-width:1px!important;border-radius:4px}.bs-docs-masthead .carbonad{margin:50px auto 0!important}}@media (min-width:768px){.carbonad{margin-right:0!important;margin-left:0!important}}@media (min-width:992px){.carbonad{position:absolute;top:0;right:15px;width:330px!important;padding:15px!important;margin:0!important}.bs-docs-masthead .carbonad{position:static}}.bs-docs-featurette{padding-top:40px;padding-bottom:40px;font-size:16px;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bs-docs-featurette+.bs-docs-footer{margin-top:0;border-top:0}.bs-docs-featurette-title{margin-bottom:5px;font-size:30px;font-weight:400;color:#333}.half-rule{width:100px;margin:40px auto}.bs-docs-featurette h3{margin-bottom:5px;font-weight:400;color:#333}.bs-docs-featurette-img{display:block;margin-bottom:20px;color:#333}.bs-docs-featurette-img:hover{color:#337ab7;text-decoration:none}.bs-docs-featurette-img img{display:block;margin-bottom:15px}@media (min-width:480px){.bs-docs-featurette .img-responsive{margin-top:30px}}@media (min-width:768px){.bs-docs-featurette{padding-top:100px;padding-bottom:100px}.bs-docs-featurette-title{font-size:40px}.bs-docs-featurette .lead{max-width:80%;margin-right:auto;margin-left:auto}.bs-docs-featurette .img-responsive{margin-top:0}}.bs-docs-featured-sites{margin-right:-1px;margin-left:-1px}.bs-docs-featured-sites .col-xs-6{padding:1px}.bs-docs-featured-sites .img-responsive{margin-top:0}@media (min-width:768px){.bs-docs-featured-sites .col-sm-3:first-child img{border-top-left-radius:4px;border-bottom-left-radius:4px}.bs-docs-featured-sites .col-sm-3:last-child img{border-top-right-radius:4px;border-bottom-right-radius:4px}}.bs-examples .thumbnail{margin-bottom:10px}.bs-examples h4{margin-bottom:5px}.bs-examples p{margin-bottom:20px}@media (max-width:480px){.bs-examples{margin-right:-10px;margin-left:-10px}.bs-examples>[class^=col-]{padding-right:10px;padding-left:10px}}.bs-docs-sidebar.affix{position:static}@media (min-width:768px){.bs-docs-sidebar{padding-left:20px}}.bs-docs-sidenav{margin-top:20px;margin-bottom:20px}.bs-docs-sidebar .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676}.bs-docs-sidebar .nav>li>a:focus,.bs-docs-sidebar .nav>li>a:hover{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}.bs-docs-sidebar .nav>.active:focus>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active>a{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}.bs-docs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-docs-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.bs-docs-sidebar .nav .nav>li>a:focus,.bs-docs-sidebar .nav .nav>li>a:hover{padding-left:29px}.bs-docs-sidebar .nav .nav>.active:focus>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active>a{padding-left:28px;font-weight:500}.back-to-top,.bs-docs-theme-toggle{display:none;padding:4px 10px;margin-top:10px;margin-left:10px;font-size:12px;font-weight:500;color:#999}.back-to-top:hover,.bs-docs-theme-toggle:hover{color:#563d7c;text-decoration:none}.bs-docs-theme-toggle{margin-top:0}@media (min-width:768px){.back-to-top,.bs-docs-theme-toggle{display:block}}@media (min-width:992px){.bs-docs-sidebar .nav>.active>ul{display:block}.bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom{width:213px}.bs-docs-sidebar.affix{position:fixed;top:20px}.bs-docs-sidebar.affix-bottom{position:absolute}.bs-docs-sidebar.affix .bs-docs-sidenav,.bs-docs-sidebar.affix-bottom .bs-docs-sidenav{margin-top:0;margin-bottom:0}}@media (min-width:1200px){.bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom{width:263px}}.bs-docs-section{margin-bottom:60px}.bs-docs-section:last-child{margin-bottom:0}h1[id]{padding-top:20px;margin-top:0}.bs-callout{padding:20px;margin:20px 0;border:1px solid #eee;border-left-width:5px;border-radius:3px}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{border-radius:3px}.bs-callout+.bs-callout{margin-top:-5px}.bs-callout-danger{border-left-color:#ce4844}.bs-callout-danger h4{color:#ce4844}.bs-callout-warning{border-left-color:#aa6708}.bs-callout-warning h4{color:#aa6708}.bs-callout-info{border-left-color:#1b809e}.bs-callout-info h4{color:#1b809e}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:60px;height:60px;margin:0 5px;border-radius:3px}@media (min-width:768px){.color-swatch{width:100px;height:100px}}.color-swatches .gray-darker{background-color:#222}.color-swatches .gray-dark{background-color:#333}.color-swatches .gray{background-color:#555}.color-swatches .gray-light{background-color:#999}.color-swatches .gray-lighter{background-color:#eee}.color-swatches .brand-primary{background-color:#337ab7}.color-swatches .brand-success{background-color:#5cb85c}.color-swatches .brand-warning{background-color:#f0ad4e}.color-swatches .brand-danger{background-color:#d9534f}.color-swatches .brand-info{background-color:#5bc0de}.color-swatches .bs-purple{background-color:#563d7c}.color-swatches .bs-purple-light{background-color:#c7bfd3}.color-swatches .bs-purple-lighter{background-color:#e5e1ea}.color-swatches .bs-gray{background-color:#f9f9f9}.bs-team .team-member{line-height:32px;color:#555}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;width:180px;height:20px;margin-top:6px}.bs-team img{float:left;width:32px;margin-right:10px;border-radius:4px}.bs-docs-browser-bugs td p{margin-bottom:0}.bs-docs-browser-bugs th:first-child{width:18%}.show-grid{margin-bottom:15px}.show-grid [class^=col-]{padding-top:10px;padding-bottom:10px;background-color:#eee;background-color:rgba(86,61,124,.15);border:1px solid #ddd;border:1px solid rgba(86,61,124,.2)}.bs-example{position:relative;padding:45px 15px 15px;margin:0 -15px 15px;border-color:#e5e5e5 #eee #eee;border-style:solid;border-width:1px 0;-webkit-box-shadow:inset 0 3px 6px rgba(0,0,0,.05);box-shadow:inset 0 3px 6px rgba(0,0,0,.05)}.bs-example:after{position:absolute;top:15px;left:15px;font-size:12px;font-weight:700;color:#959595;text-transform:uppercase;letter-spacing:1px;content:"Example"}.bs-example-padded-bottom{padding-bottom:24px}.bs-example+.highlight,.bs-example+.zero-clipboard+.highlight{margin:-15px -15px 15px;border-width:0 0 1px;border-radius:0}@media (min-width:768px){.bs-example{margin-right:0;margin-left:0;background-color:#fff;border-color:#ddd;border-width:1px;border-radius:4px 4px 0 0;-webkit-box-shadow:none;box-shadow:none}.bs-example+.highlight,.bs-example+.zero-clipboard+.highlight{margin-top:-16px;margin-right:0;margin-left:0;border-width:1px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.bs-example-standalone{border-radius:4px}}.bs-example .container{width:auto}.bs-example>.alert:last-child,.bs-example>.form-control:last-child,.bs-example>.jumbotron:last-child,.bs-example>.list-group:last-child,.bs-example>.navbar:last-child,.bs-example>.panel:last-child,.bs-example>.progress:last-child,.bs-example>.table-responsive:last-child>.table,.bs-example>.table:last-child,.bs-example>.well:last-child,.bs-example>blockquote:last-child,.bs-example>ol:last-child,.bs-example>p:last-child,.bs-example>ul:last-child{margin-bottom:0}.bs-example>p>.close{float:none}.bs-example-type .table .type-info{color:#767676;vertical-align:middle}.bs-example-type .table td{padding:15px 0;border-color:#eee}.bs-example-type .table tr:first-child td{border-top:0}.bs-example-type h1,.bs-example-type h2,.bs-example-type h3,.bs-example-type h4,.bs-example-type h5,.bs-example-type h6{margin:0}.bs-example-bg-classes p{padding:15px}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:5px}.bs-example>.table-responsive>.table{background-color:#fff}.bs-example>.btn,.bs-example>.btn-group{margin-top:5px;margin-bottom:5px}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:10px}.bs-example-control-sizing input[type=text]+input[type=text],.bs-example-control-sizing select{margin-top:10px}.bs-example-form .input-group{margin-bottom:10px}.bs-example>textarea.form-control{resize:vertical}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-bottom-example,.bs-navbar-top-example{z-index:1;padding:0;overflow:hidden}.bs-navbar-bottom-example .navbar-header,.bs-navbar-top-example .navbar-header{margin-left:0}.bs-navbar-bottom-example .navbar-fixed-bottom,.bs-navbar-top-example .navbar-fixed-top{position:relative;margin-right:0;margin-left:0}.bs-navbar-top-example{padding-bottom:45px}.bs-navbar-top-example:after{top:auto;bottom:15px}.bs-navbar-top-example .navbar-fixed-top{top:-1px}.bs-navbar-bottom-example{padding-top:45px}.bs-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bs-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bs-navbar-bottom-example .navbar-fixed-bottom,.bs-navbar-top-example .navbar-fixed-top{position:absolute}}.bs-example .pagination{margin-top:10px;margin-bottom:10px}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bs-example>.dropdown>.dropdown-toggle{float:left}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:5px;clear:left}.bs-example-tabs .nav-tabs{margin-bottom:15px}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:5px;margin-bottom:5px}.bs-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.bs-example-popover{padding-bottom:24px;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:20px}.scrollspy-example{position:relative;height:200px;margin-top:10px;overflow:auto}.bs-example>.nav-pills-stacked-example{max-width:300px}#collapseExample .well{margin-bottom:0}.bs-events-table>tbody>tr>td:first-child,.bs-events-table>thead>tr>th:first-child{white-space:nowrap}.bs-events-table>thead>tr>th:first-child{width:150px}.js-options-table>thead>tr>th:nth-child(1),.js-options-table>thead>tr>th:nth-child(2){width:100px}.js-options-table>thead>tr>th:nth-child(3){width:50px}.highlight{padding:9px 14px;margin-bottom:14px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:4px}.highlight pre{padding:0;margin-top:0;margin-bottom:0;word-break:normal;white-space:nowrap;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#333}.highlight pre code:first-child{display:inline-block;padding-right:45px}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td{text-align:center}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:5px}.responsive-utilities-test .col-xs-6{margin-bottom:10px}.responsive-utilities-test span{display:block;padding:15px 10px;font-size:14px;font-weight:700;line-height:1.1;text-align:center;border-radius:4px}.hidden-on .col-xs-6 .hidden-lg,.hidden-on .col-xs-6 .hidden-md,.hidden-on .col-xs-6 .hidden-sm,.hidden-on .col-xs-6 .hidden-xs,.visible-on .col-xs-6 .hidden-lg,.visible-on .col-xs-6 .hidden-md,.visible-on .col-xs-6 .hidden-sm,.visible-on .col-xs-6 .hidden-xs{color:#999;border:1px solid #ddd}.hidden-on .col-xs-6 .visible-lg-block,.hidden-on .col-xs-6 .visible-md-block,.hidden-on .col-xs-6 .visible-sm-block,.hidden-on .col-xs-6 .visible-xs-block,.visible-on .col-xs-6 .visible-lg-block,.visible-on .col-xs-6 .visible-md-block,.visible-on .col-xs-6 .visible-sm-block,.visible-on .col-xs-6 .visible-xs-block{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-glyphicons{margin:0 -10px 20px;overflow:hidden}.bs-glyphicons-list{padding-left:0;list-style:none}.bs-glyphicons li{float:left;width:25%;height:115px;padding:10px;font-size:10px;line-height:1.4;text-align:center;background-color:#f9f9f9;border:1px solid #fff}.bs-glyphicons .glyphicon{margin-top:5px;margin-bottom:10px;font-size:24px}.bs-glyphicons .glyphicon-class{display:block;text-align:center;word-wrap:break-word}.bs-glyphicons li:hover{color:#fff;background-color:#563d7c}@media (min-width:768px){.bs-glyphicons{margin-right:0;margin-left:0}.bs-glyphicons li{width:12.5%;font-size:12px}}.bs-customizer .toggle{float:right;margin-top:25px}.bs-customizer label{margin-top:10px;font-weight:500;color:#555}.bs-customizer h2{padding-top:30px;margin-top:0;margin-bottom:5px}.bs-customizer h3{margin-bottom:0}.bs-customizer h4{margin-top:15px;margin-bottom:0}.bs-customizer .bs-callout h4{margin-top:0;margin-bottom:5px}.bs-customizer input[type=text]{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;background-color:#fafafa}.bs-customizer .help-block{margin-bottom:5px;font-size:12px}#less-section label{font-weight:400}.bs-customize-download .btn-outline{padding:20px}.bs-customizer-alert{position:fixed;top:0;right:0;left:0;z-index:1030;padding:15px 0;color:#fff;background-color:#d9534f;border-bottom:1px solid #b94441;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.bs-customizer-alert .close{margin-top:-4px;font-size:24px}.bs-customizer-alert p{margin-bottom:0}.bs-customizer-alert .glyphicon{margin-right:5px}.bs-customizer-alert pre{margin:10px 0 0;color:#fff;background-color:#a83c3a;border-color:#973634;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}.bs-dropzone{position:relative;padding:20px;margin-bottom:20px;color:#777;text-align:center;border:2px dashed #eee;border-radius:4px}.bs-dropzone .import-header{margin-bottom:5px}.bs-dropzone .glyphicon-download-alt{font-size:40px}.bs-dropzone hr{width:100px}.bs-dropzone .lead{margin-bottom:10px;font-weight:400;color:#333}#import-manual-trigger{cursor:pointer}.bs-dropzone p:last-child{margin-bottom:0}.bs-brand-logos{display:table;width:100%;margin-bottom:15px;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:4px}.bs-brand-item{padding:60px 0;text-align:center}.bs-brand-item+.bs-brand-item{border-top:1px solid #fff}.bs-brand-logos .inverse{color:#fff;background-color:#563d7c}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-docs-booticon{margin-right:auto;margin-left:auto}.bs-brand-item .glyphicon{width:30px;height:30px;margin:10px auto -10px;line-height:30px;color:#fff;border-radius:50%}.bs-brand-item .glyphicon-ok{background-color:#5cb85c}.bs-brand-item .glyphicon-remove{background-color:#d9534f}@media (min-width:768px){.bs-brand-item{display:table-cell;width:1%}.bs-brand-item+.bs-brand-item{border-top:0;border-left:1px solid #fff}.bs-brand-item h1{font-size:60px}}.zero-clipboard{position:relative;display:none}.btn-clipboard{position:absolute;top:0;right:0;z-index:10;display:block;padding:5px 8px;font-size:12px;color:#767676;cursor:pointer;background-color:#fff;border:1px solid #e1e1e8;border-radius:0 4px 0 4px}.btn-clipboard-hover{color:#fff;background-color:#563d7c;border-color:#563d7c}@media (min-width:768px){.zero-clipboard{display:block}.bs-example+.zero-clipboard .btn-clipboard{top:-16px;border-top-right-radius:0}}.anchorjs-link{color:inherit}@media (max-width:480px){.anchorjs-link{display:none}}:hover>.anchorjs-link{opacity:.75;-webkit-transition:color .16s linear;-o-transition:color .16s linear;transition:color .16s linear}.anchorjs-link:focus,:hover>.anchorjs-link:hover{text-decoration:none;opacity:1}#focusedInput{border-color:#ccc;border-color:rgba(82,168,236,.8);outline:0;outline:thin dotted\9;-webkit-box-shadow:0 0 8px rgba(82,168,236,.6);box-shadow:0 0 8px rgba(82,168,236,.6)}
+ */body{position:relative}.table code{font-size:13px;font-weight:400}h2 code,h3 code,h4 code{background-color:inherit}.btn-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:active,.btn-outline:focus,.btn-outline:hover{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:active,.btn-outline-inverse:focus,.btn-outline-inverse:hover{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bs-docs-booticon{display:block;font-weight:500;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bs-docs-booticon-sm{width:30px;height:30px;font-size:20px;line-height:28px}.bs-docs-booticon-lg{width:144px;height:144px;font-size:108px;line-height:140px}.bs-docs-booticon-inverse{color:#563d7c;background-color:#fff}.bs-docs-booticon-outline{background-color:transparent;border:1px solid #cdbfe3}#skippy{display:block;padding:1em;color:#fff;background-color:#6f5499;outline:0}#skippy .skiplink-text{padding:.5em;outline:1px dotted}#content:focus{outline:0}.bs-docs-nav{margin-bottom:0;background-color:#fff;border-bottom:0}.bs-home-nav .bs-nav-b{display:none}.bs-docs-nav .navbar-brand,.bs-docs-nav .navbar-nav>li>a{font-weight:500;color:#563d7c}.bs-docs-nav .navbar-nav>.active>a,.bs-docs-nav .navbar-nav>.active>a:hover,.bs-docs-nav .navbar-nav>li>a:hover{color:#463265;background-color:#f9f9f9}.bs-docs-nav .navbar-toggle .icon-bar{background-color:#563d7c}.bs-docs-nav .navbar-header .navbar-toggle{border-color:#fff}.bs-docs-nav .navbar-header .navbar-toggle:focus,.bs-docs-nav .navbar-header .navbar-toggle:hover{background-color:#f9f9f9;border-color:#f9f9f9}.bs-docs-footer{padding-top:50px;padding-bottom:50px;margin-top:100px;color:#99979c;text-align:center;background-color:#2a2730}.bs-docs-footer a{color:#fff}.bs-docs-footer-links{padding-left:0;margin-bottom:20px}.bs-docs-footer-links li{display:inline-block}.bs-docs-footer-links li+li{margin-left:15px}@media (min-width:768px){.bs-docs-footer{text-align:left}.bs-docs-footer p{margin-bottom:0}}.bs-docs-header,.bs-docs-masthead{position:relative;padding:30px 0;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-gradient(linear,left top,left bottom,from(#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);background-repeat:repeat-x}.bs-docs-masthead .bs-docs-booticon{margin:0 auto 30px}.bs-docs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-docs-masthead .lead{margin:0 auto 30px;font-size:20px;color:#fff}.bs-docs-masthead .version{margin-top:-15px;margin-bottom:30px;color:#9783b9}.bs-docs-masthead .btn{width:100%;padding:15px 30px;font-size:20px}@media (min-width:480px){.bs-docs-masthead .btn{width:auto}}@media (min-width:768px){.bs-docs-masthead{padding:80px 0}.bs-docs-masthead h1{font-size:60px}.bs-docs-masthead .lead{font-size:24px}}@media (min-width:992px){.bs-docs-masthead .lead{width:80%;font-size:30px}}.bs-docs-header{margin-bottom:40px;font-size:20px}.bs-docs-header h1{margin-top:0;color:#fff}.bs-docs-header p{margin-bottom:0;font-weight:300;line-height:1.4}.bs-docs-header .container{position:relative}@media (min-width:768px){.bs-docs-header{padding-top:60px;padding-bottom:60px;font-size:24px;text-align:left}.bs-docs-header h1{font-size:60px;line-height:1}}@media (min-width:992px){.bs-docs-header h1,.bs-docs-header p{margin-right:380px}}
+
+
+#carbonads {
+ display: block;
+ overflow: hidden;
+ margin: 50px -15px 0;
+ padding: 15px 15px 15px 160px;
+ font-size: 13px;
+ line-height: 1.5;
+ text-align: left;
+ border: solid #866ab3;
+ border-width: 1px 0 0;
+}
+
+#carbonads a {
+ color: #fff;
+ text-decoration: none;
+}
+
+.carbon-img {
+ float: left;
+ margin-left: -145px;
+}
+
+.carbon-poweredby {
+ display: block;
+ color: #cdbfe3 !important;
+}
+
+@media (min-width: 480px) {
+ #carbonads {
+ max-width: 330px;
+ margin: 50px auto 0;
+ border-width: 1px;
+ border-radius: 4px;
+ }
+}
+
+@media (min-width: 992px) {
+ #carbonads {
+ position: absolute;
+ top: 0;
+ right: 15px;
+ margin-top: 0;
+ }
+ .bs-docs-masthead #carbonads {
+ position: static;
+ }
+}
+
+ .bs-docs-featurette{padding-top:40px;padding-bottom:40px;font-size:16px;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bs-docs-featurette+.bs-docs-footer{margin-top:0;border-top:0}.bs-docs-featurette-title{margin-bottom:5px;font-size:30px;font-weight:400;color:#333}.half-rule{width:100px;margin:40px auto}.bs-docs-featurette h3{margin-bottom:5px;font-weight:400;color:#333}.bs-docs-featurette-img{display:block;margin-bottom:20px;color:#333}.bs-docs-featurette-img:hover{color:#337ab7;text-decoration:none}.bs-docs-featurette-img img{display:block;margin-bottom:15px}@media (min-width:480px){.bs-docs-featurette .img-responsive{margin-top:30px}}@media (min-width:768px){.bs-docs-featurette{padding-top:100px;padding-bottom:100px}.bs-docs-featurette-title{font-size:40px}.bs-docs-featurette .lead{max-width:80%;margin-right:auto;margin-left:auto}.bs-docs-featurette .img-responsive{margin-top:0}}.bs-docs-featured-sites{margin-right:-1px;margin-left:-1px}.bs-docs-featured-sites .col-xs-6{padding:1px}.bs-docs-featured-sites .img-responsive{margin-top:0}@media (min-width:768px){.bs-docs-featured-sites .col-sm-3:first-child img{border-top-left-radius:4px;border-bottom-left-radius:4px}.bs-docs-featured-sites .col-sm-3:last-child img{border-top-right-radius:4px;border-bottom-right-radius:4px}}.bs-examples .thumbnail{margin-bottom:10px}.bs-examples h4{margin-bottom:5px}.bs-examples p{margin-bottom:20px}@media (max-width:480px){.bs-examples{margin-right:-10px;margin-left:-10px}.bs-examples>[class^=col-]{padding-right:10px;padding-left:10px}}.bs-docs-sidebar.affix{position:static}@media (min-width:768px){.bs-docs-sidebar{padding-left:20px}}.bs-docs-sidenav{margin-top:20px;margin-bottom:20px}.bs-docs-sidebar .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676}.bs-docs-sidebar .nav>li>a:focus,.bs-docs-sidebar .nav>li>a:hover{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}.bs-docs-sidebar .nav>.active:focus>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active>a{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}.bs-docs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-docs-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.bs-docs-sidebar .nav .nav>li>a:focus,.bs-docs-sidebar .nav .nav>li>a:hover{padding-left:29px}.bs-docs-sidebar .nav .nav>.active:focus>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active>a{padding-left:28px;font-weight:500}.back-to-top,.bs-docs-theme-toggle{display:none;padding:4px 10px;margin-top:10px;margin-left:10px;font-size:12px;font-weight:500;color:#999}.back-to-top:hover,.bs-docs-theme-toggle:hover{color:#563d7c;text-decoration:none}.bs-docs-theme-toggle{margin-top:0}@media (min-width:768px){.back-to-top,.bs-docs-theme-toggle{display:block}}@media (min-width:992px){.bs-docs-sidebar .nav>.active>ul{display:block}.bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom{width:213px}.bs-docs-sidebar.affix{position:fixed;top:20px}.bs-docs-sidebar.affix-bottom{position:absolute}.bs-docs-sidebar.affix .bs-docs-sidenav,.bs-docs-sidebar.affix-bottom .bs-docs-sidenav{margin-top:0;margin-bottom:0}}@media (min-width:1200px){.bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom{width:263px}}.bs-docs-section{margin-bottom:60px}.bs-docs-section:last-child{margin-bottom:0}h1[id]{padding-top:20px;margin-top:0}.bs-callout{padding:20px;margin:20px 0;border:1px solid #eee;border-left-width:5px;border-radius:3px}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{border-radius:3px}.bs-callout+.bs-callout{margin-top:-5px}.bs-callout-danger{border-left-color:#ce4844}.bs-callout-danger h4{color:#ce4844}.bs-callout-warning{border-left-color:#aa6708}.bs-callout-warning h4{color:#aa6708}.bs-callout-info{border-left-color:#1b809e}.bs-callout-info h4{color:#1b809e}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:60px;height:60px;margin:0 5px;border-radius:3px}@media (min-width:768px){.color-swatch{width:100px;height:100px}}.color-swatches .gray-darker{background-color:#222}.color-swatches .gray-dark{background-color:#333}.color-swatches .gray{background-color:#555}.color-swatches .gray-light{background-color:#999}.color-swatches .gray-lighter{background-color:#eee}.color-swatches .brand-primary{background-color:#337ab7}.color-swatches .brand-success{background-color:#5cb85c}.color-swatches .brand-warning{background-color:#f0ad4e}.color-swatches .brand-danger{background-color:#d9534f}.color-swatches .brand-info{background-color:#5bc0de}.color-swatches .bs-purple{background-color:#563d7c}.color-swatches .bs-purple-light{background-color:#c7bfd3}.color-swatches .bs-purple-lighter{background-color:#e5e1ea}.color-swatches .bs-gray{background-color:#f9f9f9}.bs-team .team-member{line-height:32px;color:#555}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;width:180px;height:20px;margin-top:6px}.bs-team img{float:left;width:32px;margin-right:10px;border-radius:4px}.bs-docs-browser-bugs td p{margin-bottom:0}.bs-docs-browser-bugs th:first-child{width:18%}.show-grid{margin-bottom:15px}.show-grid [class^=col-]{padding-top:10px;padding-bottom:10px;background-color:#eee;background-color:rgba(86,61,124,.15);border:1px solid #ddd;border:1px solid rgba(86,61,124,.2)}.bs-example{position:relative;padding:45px 15px 15px;margin:0 -15px 15px;border-color:#e5e5e5 #eee #eee;border-style:solid;border-width:1px 0;-webkit-box-shadow:inset 0 3px 6px rgba(0,0,0,.05);box-shadow:inset 0 3px 6px rgba(0,0,0,.05)}.bs-example:after{position:absolute;top:15px;left:15px;font-size:12px;font-weight:700;color:#959595;text-transform:uppercase;letter-spacing:1px;content:"Example"}.bs-example-padded-bottom{padding-bottom:24px}.bs-example+.highlight,.bs-example+.zero-clipboard+.highlight{margin:-15px -15px 15px;border-width:0 0 1px;border-radius:0}@media (min-width:768px){.bs-example{margin-right:0;margin-left:0;background-color:#fff;border-color:#ddd;border-width:1px;border-radius:4px 4px 0 0;-webkit-box-shadow:none;box-shadow:none}.bs-example+.highlight,.bs-example+.zero-clipboard+.highlight{margin-top:-16px;margin-right:0;margin-left:0;border-width:1px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.bs-example-standalone{border-radius:4px}}.bs-example .container{width:auto}.bs-example>.alert:last-child,.bs-example>.form-control:last-child,.bs-example>.jumbotron:last-child,.bs-example>.list-group:last-child,.bs-example>.navbar:last-child,.bs-example>.panel:last-child,.bs-example>.progress:last-child,.bs-example>.table-responsive:last-child>.table,.bs-example>.table:last-child,.bs-example>.well:last-child,.bs-example>blockquote:last-child,.bs-example>ol:last-child,.bs-example>p:last-child,.bs-example>ul:last-child{margin-bottom:0}.bs-example>p>.close{float:none}.bs-example-type .table .type-info{color:#767676;vertical-align:middle}.bs-example-type .table td{padding:15px 0;border-color:#eee}.bs-example-type .table tr:first-child td{border-top:0}.bs-example-type h1,.bs-example-type h2,.bs-example-type h3,.bs-example-type h4,.bs-example-type h5,.bs-example-type h6{margin:0}.bs-example-bg-classes p{padding:15px}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:5px}.bs-example>.table-responsive>.table{background-color:#fff}.bs-example>.btn,.bs-example>.btn-group{margin-top:5px;margin-bottom:5px}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:10px}.bs-example-control-sizing input[type=text]+input[type=text],.bs-example-control-sizing select{margin-top:10px}.bs-example-form .input-group{margin-bottom:10px}.bs-example>textarea.form-control{resize:vertical}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-bottom-example,.bs-navbar-top-example{z-index:1;padding:0;overflow:hidden}.bs-navbar-bottom-example .navbar-header,.bs-navbar-top-example .navbar-header{margin-left:0}.bs-navbar-bottom-example .navbar-fixed-bottom,.bs-navbar-top-example .navbar-fixed-top{position:relative;margin-right:0;margin-left:0}.bs-navbar-top-example{padding-bottom:45px}.bs-navbar-top-example:after{top:auto;bottom:15px}.bs-navbar-top-example .navbar-fixed-top{top:-1px}.bs-navbar-bottom-example{padding-top:45px}.bs-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bs-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bs-navbar-bottom-example .navbar-fixed-bottom,.bs-navbar-top-example .navbar-fixed-top{position:absolute}}.bs-example .pagination{margin-top:10px;margin-bottom:10px}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bs-example>.dropdown>.dropdown-toggle{float:left}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:5px;clear:left}.bs-example-tabs .nav-tabs{margin-bottom:15px}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:5px;margin-bottom:5px}.bs-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.bs-example-popover{padding-bottom:24px;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:20px}.scrollspy-example{position:relative;height:200px;margin-top:10px;overflow:auto}.bs-example>.nav-pills-stacked-example{max-width:300px}#collapseExample .well{margin-bottom:0}.bs-events-table>tbody>tr>td:first-child,.bs-events-table>thead>tr>th:first-child{white-space:nowrap}.bs-events-table>thead>tr>th:first-child{width:150px}.js-options-table>thead>tr>th:nth-child(1),.js-options-table>thead>tr>th:nth-child(2){width:100px}.js-options-table>thead>tr>th:nth-child(3){width:50px}.highlight{padding:9px 14px;margin-bottom:14px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:4px}.highlight pre{padding:0;margin-top:0;margin-bottom:0;word-break:normal;white-space:nowrap;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#333}.highlight pre code:first-child{display:inline-block;padding-right:45px}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td{text-align:center}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:5px}.responsive-utilities-test .col-xs-6{margin-bottom:10px}.responsive-utilities-test span{display:block;padding:15px 10px;font-size:14px;font-weight:700;line-height:1.1;text-align:center;border-radius:4px}.hidden-on .col-xs-6 .hidden-lg,.hidden-on .col-xs-6 .hidden-md,.hidden-on .col-xs-6 .hidden-sm,.hidden-on .col-xs-6 .hidden-xs,.visible-on .col-xs-6 .hidden-lg,.visible-on .col-xs-6 .hidden-md,.visible-on .col-xs-6 .hidden-sm,.visible-on .col-xs-6 .hidden-xs{color:#999;border:1px solid #ddd}.hidden-on .col-xs-6 .visible-lg-block,.hidden-on .col-xs-6 .visible-md-block,.hidden-on .col-xs-6 .visible-sm-block,.hidden-on .col-xs-6 .visible-xs-block,.visible-on .col-xs-6 .visible-lg-block,.visible-on .col-xs-6 .visible-md-block,.visible-on .col-xs-6 .visible-sm-block,.visible-on .col-xs-6 .visible-xs-block{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-glyphicons{margin:0 -10px 20px;overflow:hidden}.bs-glyphicons-list{padding-left:0;list-style:none}.bs-glyphicons li{float:left;width:25%;height:115px;padding:10px;font-size:10px;line-height:1.4;text-align:center;background-color:#f9f9f9;border:1px solid #fff}.bs-glyphicons .glyphicon{margin-top:5px;margin-bottom:10px;font-size:24px}.bs-glyphicons .glyphicon-class{display:block;text-align:center;word-wrap:break-word}.bs-glyphicons li:hover{color:#fff;background-color:#563d7c}@media (min-width:768px){.bs-glyphicons{margin-right:0;margin-left:0}.bs-glyphicons li{width:12.5%;font-size:12px}}.bs-customizer .toggle{float:right;margin-top:25px}.bs-customizer label{margin-top:10px;font-weight:500;color:#555}.bs-customizer h2{padding-top:30px;margin-top:0;margin-bottom:5px}.bs-customizer h3{margin-bottom:0}.bs-customizer h4{margin-top:15px;margin-bottom:0}.bs-customizer .bs-callout h4{margin-top:0;margin-bottom:5px}.bs-customizer input[type=text]{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;background-color:#fafafa}.bs-customizer .help-block{margin-bottom:5px;font-size:12px}#less-section label{font-weight:400}.bs-customize-download .btn-outline{padding:20px}.bs-customizer-alert{position:fixed;top:0;right:0;left:0;z-index:1030;padding:15px 0;color:#fff;background-color:#d9534f;border-bottom:1px solid #b94441;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.bs-customizer-alert .close{margin-top:-4px;font-size:24px}.bs-customizer-alert p{margin-bottom:0}.bs-customizer-alert .glyphicon{margin-right:5px}.bs-customizer-alert pre{margin:10px 0 0;color:#fff;background-color:#a83c3a;border-color:#973634;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}.bs-dropzone{position:relative;padding:20px;margin-bottom:20px;color:#777;text-align:center;border:2px dashed #eee;border-radius:4px}.bs-dropzone .import-header{margin-bottom:5px}.bs-dropzone .glyphicon-download-alt{font-size:40px}.bs-dropzone hr{width:100px}.bs-dropzone .lead{margin-bottom:10px;font-weight:400;color:#333}#import-manual-trigger{cursor:pointer}.bs-dropzone p:last-child{margin-bottom:0}.bs-brand-logos{display:table;width:100%;margin-bottom:15px;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:4px}.bs-brand-item{padding:60px 0;text-align:center}.bs-brand-item+.bs-brand-item{border-top:1px solid #fff}.bs-brand-logos .inverse{color:#fff;background-color:#563d7c}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-docs-booticon{margin-right:auto;margin-left:auto}.bs-brand-item .glyphicon{width:30px;height:30px;margin:10px auto -10px;line-height:30px;color:#fff;border-radius:50%}.bs-brand-item .glyphicon-ok{background-color:#5cb85c}.bs-brand-item .glyphicon-remove{background-color:#d9534f}@media (min-width:768px){.bs-brand-item{display:table-cell;width:1%}.bs-brand-item+.bs-brand-item{border-top:0;border-left:1px solid #fff}.bs-brand-item h1{font-size:60px}}.zero-clipboard{position:relative;display:none}.btn-clipboard{position:absolute;top:0;right:0;z-index:10;display:block;padding:5px 8px;font-size:12px;color:#767676;cursor:pointer;background-color:#fff;border:1px solid #e1e1e8;border-radius:0 4px 0 4px}.btn-clipboard-hover{color:#fff;background-color:#563d7c;border-color:#563d7c}@media (min-width:768px){.zero-clipboard{display:block}.bs-example+.zero-clipboard .btn-clipboard{top:-16px;border-top-right-radius:0}}.anchorjs-link{color:inherit}@media (max-width:480px){.anchorjs-link{display:none}}:hover>.anchorjs-link{opacity:.75;-webkit-transition:color .16s linear;-o-transition:color .16s linear;transition:color .16s linear}.anchorjs-link:focus,:hover>.anchorjs-link:hover{text-decoration:none;opacity:1}#focusedInput{border-color:#ccc;border-color:rgba(82,168,236,.8);outline:0;outline:thin dotted\9;-webkit-box-shadow:0 0 8px rgba(82,168,236,.6);box-shadow:0 0 8px rgba(82,168,236,.6)}
/*# sourceMappingURL=docs.min.css.map */
.v4-tease {
<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <meta name=description content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."> <meta name=keywords content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development"> <meta name=author content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <title> Components · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href="data:text/css;charset=utf-8," data-href=../dist/css/bootstrap-theme.min.css rel=stylesheet id=bs-theme-stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class="v4-tease">Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li class=active> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Themes")">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Components</h1> <p>Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.</p> <
div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s);</script></div></div></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 id=glyphicons class=page-header>Glyphicons</h1> <h2 id=glyphicons-glyphs>Available glyphs</h2> <p>Includes over 250 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p> <div class=bs-glyphicons> <ul class=bs-glyphicons-list> <li> <span class="glyphicon glyphicon-asterisk" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-asterisk</span> </li> <li> <span class="glyphicon glyphicon-plus" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plus</span> </li> <li> <span class="glyphicon glyphicon-euro" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-euro</span> </li> <li> <span class="glyphicon glyphicon-eur" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eur</span> </li> <li> <span class="glyphicon glyphicon-minus" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-minus</span> </li> <li> <span class="glyphicon glyphicon-cloud" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud</span> </li> <li> <span class="glyphicon glyphicon-envelope" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-envelope</span> </li> <li> <span class="glyphicon glyphicon-pencil" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pencil</span> </li> <li> <span class="glyphicon glyphicon-glass" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-glass</span> </li> <li> <span class="glyphicon glyphicon-music" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-music</span> </li> <li> <span class="glyphicon glyphicon-search" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-search</span> </li> <li> <span class="glyphicon glyphicon-heart" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-heart</span> </li> <li> <span class="glyphicon glyphicon-star" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-star</span> </li> <li> <span class="glyphicon glyphicon-star-empty" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-star-empty</span> </li> <li> <span class="glyphicon glyphicon-user" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-user</span> </li> <li> <span class="glyphicon glyphicon-film" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-film</span> </li> <li> <span class="glyphicon glyphicon-th-large" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th-large</span> </li> <li> <span class="glyphicon glyphicon-th" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th</span> </li> <li> <span class="glyphicon glyphicon-th-list" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th-list</span> </li> <li> <span class="glyphicon glyphicon-ok" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok</span> </li> <li> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove</span> </li> <li> <span class="glyphicon glyphicon-zoom-in" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-zoom-in</span> </li> <li> <span class="glyphicon glyphicon-zoom-out" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-zoom-out</span> </li> <li> <span class="glyphicon glyphicon-off" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-off</span> </li> <li> <span class="glyphicon glyphicon-signal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-signal</span> </li> <li> <span class="glyphicon glyphicon-cog" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cog</span> </li> <li> <span class="glyphicon glyphicon-trash" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-trash</span> </li> <li> <span class="glyphicon glyphicon-home" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-home</span> </li> <li> <span class="glyphicon glyphicon-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-file</span> </li> <li> <span class="glyphicon glyphicon-time" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-time</span> </li> <li> <span class="glyphicon glyphicon-road" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-road</span> </li> <li> <span class="glyphicon glyphicon-download-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-download-alt</span> </li> <li> <span class="glyphicon glyphicon-download" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-download</span> </li> <li> <span class="glyphicon glyphicon-upload" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-upload</span> </li> <li> <span class="glyphicon glyphicon-inbox" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-inbox</span> </li> <li> <span class="glyphicon glyphicon-play-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-play-circle</span> </li> <li> <span class="glyphicon glyphicon-repeat" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-repeat</span> </li> <li> <span class="glyphicon glyphicon-refresh" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-refresh</span> </li> <li> <span class="glyphicon glyphicon-list-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-list-alt</span> </li> <li> <span class="glyphicon glyphicon-lock" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-lock</span> </li> <li> <span class="glyphicon glyphicon-flag" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-flag</span> </li> <li> <span class="glyphicon glyphicon-headphones" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-headphones</span> </li> <li> <span class="glyphicon glyphicon-volume-off" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-off</span> </li> <li> <span class="glyphicon glyphicon-volume-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-down</span> </li> <li> <span class="glyphicon glyphicon-volume-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-up</span> </li> <li> <span class="glyphicon glyphicon-qrcode" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-qrcode</span> </li> <li> <span class="glyphicon glyphicon-barcode" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-barcode</span> </li> <li> <span class="glyphicon glyphicon-tag" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tag</span> </li> <li> <span class="glyphicon glyphicon-tags" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tags</span> </li> <li> <span class="glyphicon glyphicon-book" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-book</span> </li> <li> <span class="glyphicon glyphicon-bookmark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bookmark</span> </li> <li> <span class="glyphicon glyphicon-print" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-print</span> </li> <li> <span class="glyphicon glyphicon-camera" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-camera</span> </li> <li> <span class="glyphicon glyphicon-font" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-font</span> </li> <li> <span class="glyphicon glyphicon-bold" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bold</span> </li> <li> <span class="glyphicon glyphicon-italic" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-italic</span> </li> <li> <span class="glyphicon glyphicon-text-height" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-height</span> </li> <li> <span class="glyphicon glyphicon-text-width" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-width</span> </li> <li> <span class="glyphicon glyphicon-align-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-left</span> </li> <li> <span class="glyphicon glyphicon-align-center" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-center</span> </li> <li> <span class="glyphicon glyphicon-align-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-right</span> </li> <li> <span class="glyphicon glyphicon-align-justify" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-justify</span> </li> <li> <span class="glyphicon glyphicon-list" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-list</span> </li> <li> <span class="glyphicon glyphicon-indent-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-indent-left</span> </li> <li> <span class="glyphicon glyphicon-indent-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-indent-right</span> </li> <li> <span class="glyphicon glyphicon-facetime-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-facetime-video</span> </li> <li> <span class="glyphicon glyphicon-picture" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-picture</span> </li> <li> <span class="glyphicon glyphicon-map-marker" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-map-marker</span> </li> <li> <span class="glyphicon glyphicon-adjust" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-adjust</span> </li> <li> <span class="glyphicon glyphicon-tint" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tint</span> </li> <li> <span class="glyphicon glyphicon-edit" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-edit</span> </li> <li> <span class="glyphicon glyphicon-share" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-share</span> </li> <li> <span class="glyphicon glyphicon-check" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-check</span> </li> <li> <span class="glyphicon glyphicon-move" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-move</span> </li> <li> <span class="glyphicon glyphicon-step-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-step-backward</span> </li> <li> <span class="glyphicon glyphicon-fast-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fast-backward</span> </li> <li> <span class="glyphicon glyphicon-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-backward</span> </li> <li> <span class="glyphicon glyphicon-play" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-play</span> </li> <li> <span class="glyphicon glyphicon-pause" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pause</span> </li> <li> <span class="glyphicon glyphicon-stop" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-stop</span> </li> <li> <span class="glyphicon glyphicon-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-forward</span> </li> <li> <span class="glyphicon glyphicon-fast-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fast-forward</span> </li> <li> <span class="glyphicon glyphicon-step-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-step-forward</span> </li> <li> <span class="glyphicon glyphicon-eject" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eject</span> </li> <li> <span class="glyphicon glyphicon-chevron-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-left</span> </li> <li> <span class="glyphicon glyphicon-chevron-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-right</span> </li> <li> <span class="glyphicon glyphicon-plus-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plus-sign</span> </li> <li> <span class="glyphicon glyphicon-minus-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-minus-sign</span> </li> <li> <span class="glyphicon glyphicon-remove-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove-sign</span> </li> <li> <span class="glyphicon glyphicon-ok-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok-sign</span> </li> <li> <span class="glyphicon glyphicon-question-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-question-sign</span> </li> <li> <span class="glyphicon glyphicon-info-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-info-sign</span> </li> <li> <span class="glyphicon glyphicon-screenshot" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-screenshot</span> </li> <li> <span class="glyphicon glyphicon-remove-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove-circle</span> </li> <li> <span class="glyphicon glyphicon-ok-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok-circle</span> </li> <li> <span class="glyphicon glyphicon-ban-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ban-circle</span> </li> <li> <span class="glyphicon glyphicon-arrow-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-left</span> </li> <li> <span class="glyphicon glyphicon-arrow-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-right</span> </li> <li> <span class="glyphicon glyphicon-arrow-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-up</span> </li> <li> <span class="glyphicon glyphicon-arrow-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-down</span> </li> <li> <span class="glyphicon glyphicon-share-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-share-alt</span> </li> <li> <span class="glyphicon glyphicon-resize-full" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-full</span> </li> <li> <span class="glyphicon glyphicon-resize-small" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-small</span> </li> <li> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-exclamation-sign</span> </li> <li> <span class="glyphicon glyphicon-gift" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-gift</span> </li> <li> <span class="glyphicon glyphicon-leaf" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-leaf</span> </li> <li> <span class="glyphicon glyphicon-fire" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fire</span> </li> <li> <span class="glyphicon glyphicon-eye-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eye-open</span> </li> <li> <span class="glyphicon glyphicon-eye-close" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eye-close</span> </li> <li> <span class="glyphicon glyphicon-warning-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-warning-sign</span> </li> <li> <span class="glyphicon glyphicon-plane" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plane</span> </li> <li> <span class="glyphicon glyphicon-calendar" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-calendar</span> </li> <li> <span class="glyphicon glyphicon-random" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-random</span> </li> <li> <span class="glyphicon glyphicon-comment" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-comment</span> </li> <li> <span class="glyphicon glyphicon-magnet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-magnet</span> </li> <li> <span class="glyphicon glyphicon-chevron-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-up</span> </li> <li> <span class="glyphicon glyphicon-chevron-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-down</span> </li> <li> <span class="glyphicon glyphicon-retweet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-retweet</span> </li> <li> <span class="glyphicon glyphicon-shopping-cart" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-shopping-cart</span> </li> <li> <span class="glyphicon glyphicon-folder-close" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-folder-close</span> </li> <li> <span class="glyphicon glyphicon-folder-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-folder-open</span> </li> <li> <span class="glyphicon glyphicon-resize-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-vertical</span> </li> <li> <span class="glyphicon glyphicon-resize-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-horizontal</span> </li> <li> <span class="glyphicon glyphicon-hdd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hdd</span> </li> <li> <span class="glyphicon glyphicon-bullhorn" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bullhorn</span> </li> <li> <span class="glyphicon glyphicon-bell" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bell</span> </li> <li> <span class="glyphicon glyphicon-certificate" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-certificate</span> </li> <li> <span class="glyphicon glyphicon-thumbs-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-thumbs-up</span> </li> <li> <span class="glyphicon glyphicon-thumbs-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-thumbs-down</span> </li> <li> <span class="glyphicon glyphicon-hand-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-right</span> </li> <li> <span class="glyphicon glyphicon-hand-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-left</span> </li> <li> <span class="glyphicon glyphicon-hand-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-up</span> </li> <li> <span class="glyphicon glyphicon-hand-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-down</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-right</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-left</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-up</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-down</span> </li> <li> <span class="glyphicon glyphicon-globe" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-globe</span> </li> <li> <span class="glyphicon glyphicon-wrench" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-wrench</span> </li> <li> <span class="glyphicon glyphicon-tasks" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tasks</span> </li> <li> <span class="glyphicon glyphicon-filter" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-filter</span> </li> <li> <span class="glyphicon glyphicon-briefcase" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-briefcase</span> </li> <li> <span class="glyphicon glyphicon-fullscreen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fullscreen</span> </li> <li> <span class="glyphicon glyphicon-dashboard" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-dashboard</span> </li> <li> <span class="glyphicon glyphicon-paperclip" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-paperclip</span> </li> <li> <span class="glyphicon glyphicon-heart-empty" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-heart-empty</span> </li> <li> <span class="glyphicon glyphicon-link" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-link</span> </li> <li> <span class="glyphicon glyphicon-phone" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-phone</span> </li> <li> <span class="glyphicon glyphicon-pushpin" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pushpin</span> </li> <li> <span class="glyphicon glyphicon-usd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-usd</span> </li> <li> <span class="glyphicon glyphicon-gbp" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-gbp</span> </li> <li> <span class="glyphicon glyphicon-sort" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort</span> </li> <li> <span class="glyphicon glyphicon-sort-by-alphabet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-alphabet</span> </li> <li> <span class="glyphicon glyphicon-sort-by-alphabet-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-alphabet-alt</span> </li> <li> <span class="glyphicon glyphicon-sort-by-order" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-order</span> </li> <li> <span class="glyphicon glyphicon-sort-by-order-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-order-alt</span> </li> <li> <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-attributes</span> </li> <li> <span class="glyphicon glyphicon-sort-by-attributes-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-attributes-alt</span> </li> <li> <span class="glyphicon glyphicon-unchecked" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-unchecked</span> </li> <li> <span class="glyphicon glyphicon-expand" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-expand</span> </li> <li> <span class="glyphicon glyphicon-collapse-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-collapse-down</span> </li> <li> <span class="glyphicon glyphicon-collapse-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-collapse-up</span> </li> <li> <span class="glyphicon glyphicon-log-in" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-log-in</span> </li> <li> <span class="glyphicon glyphicon-flash" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-flash</span> </li> <li> <span class="glyphicon glyphicon-log-out" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-log-out</span> </li> <li> <span class="glyphicon glyphicon-new-window" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-new-window</span> </li> <li> <span class="glyphicon glyphicon-record" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-record</span> </li> <li> <span class="glyphicon glyphicon-save" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-save</span> </li> <li> <span class="glyphicon glyphicon-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-open</span> </li> <li> <span class="glyphicon glyphicon-saved" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-saved</span> </li> <li> <span class="glyphicon glyphicon-import" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-import</span> </li> <li> <span class="glyphicon glyphicon-export" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-export</span> </li> <li> <span class="glyphicon glyphicon-send" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-send</span> </li> <li> <span class="glyphicon glyphicon-floppy-disk" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-disk</span> </li> <li> <span class="glyphicon glyphicon-floppy-saved" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-saved</span> </li> <li> <span class="glyphicon glyphicon-floppy-remove" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-remove</span> </li> <li> <span class="glyphicon glyphicon-floppy-save" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-save</span> </li> <li> <span class="glyphicon glyphicon-floppy-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-open</span> </li> <li> <span class="glyphicon glyphicon-credit-card" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-credit-card</span> </li> <li> <span class="glyphicon glyphicon-transfer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-transfer</span> </li> <li> <span class="glyphicon glyphicon-cutlery" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cutlery</span> </li> <li> <span class="glyphicon glyphicon-header" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-header</span> </li> <li> <span class="glyphicon glyphicon-compressed" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-compressed</span> </li> <li> <span class="glyphicon glyphicon-earphone" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-earphone</span> </li> <li> <span class="glyphicon glyphicon-phone-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-phone-alt</span> </li> <li> <span class="glyphicon glyphicon-tower" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tower</span> </li> <li> <span class="glyphicon glyphicon-stats" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-stats</span> </li> <li> <span class="glyphicon glyphicon-sd-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sd-video</span> </li> <li> <span class="glyphicon glyphicon-hd-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hd-video</span> </li> <li> <span class="glyphicon glyphicon-subtitles" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-subtitles</span> </li> <li> <span class="glyphicon glyphicon-sound-stereo" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-stereo</span> </li> <li> <span class="glyphicon glyphicon-sound-dolby" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-dolby</span> </li> <li> <span class="glyphicon glyphicon-sound-5-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-5-1</span> </li> <li> <span class="glyphicon glyphicon-sound-6-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-6-1</span> </li> <li> <span class="glyphicon glyphicon-sound-7-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-7-1</span> </li> <li> <span class="glyphicon glyphicon-copyright-mark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-copyright-mark</span> </li> <li> <span class="glyphicon glyphicon-registration-mark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-registration-mark</span> </li> <li> <span class="glyphicon glyphicon-cloud-download" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud-download</span> </li> <li> <span class="glyphicon glyphicon-cloud-upload" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud-upload</span> </li> <li> <span class="glyphicon glyphicon-tree-conifer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tree-conifer</span> </li> <li> <span class="glyphicon glyphicon-tree-deciduous" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tree-deciduous</span> </li> <li> <span class="glyphicon glyphicon-cd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cd</span> </li> <li> <span class="glyphicon glyphicon-save-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-save-file</span> </li> <li> <span class="glyphicon glyphicon-open-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-open-file</span> </li> <li> <span class="glyphicon glyphicon-level-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-level-up</span> </li> <li> <span class="glyphicon glyphicon-copy" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-copy</span> </li> <li> <span class="glyphicon glyphicon-paste" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-paste</span> </li> <li> <span class="glyphicon glyphicon-alert" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-alert</span> </li> <li> <span class="glyphicon glyphicon-equalizer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-equalizer</span> </li> <li> <span class="glyphicon glyphicon-king" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-king</span> </li> <li> <span class="glyphicon glyphicon-queen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-queen</span> </li> <li> <span class="glyphicon glyphicon-pawn" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pawn</span> </li> <li> <span class="glyphicon glyphicon-bishop" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bishop</span> </li> <li> <span class="glyphicon glyphicon-knight" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-knight</span> </li> <li> <span class="glyphicon glyphicon-baby-formula" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-baby-formula</span> </li> <li> <span class="glyphicon glyphicon-tent" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tent</span> </li> <li> <span class="glyphicon glyphicon-blackboard" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-blackboard</span> </li> <li> <span class="glyphicon glyphicon-bed" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bed</span> </li> <li> <span class="glyphicon glyphicon-apple" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-apple</span> </li> <li> <span class="glyphicon glyphicon-erase" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-erase</span> </li> <li> <span class="glyphicon glyphicon-hourglass" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hourglass</span> </li> <li> <span class="glyphicon glyphicon-lamp" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-lamp</span> </li> <li> <span class="glyphicon glyphicon-duplicate" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-duplicate</span> </li> <li> <span class="glyphicon glyphicon-piggy-bank" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-piggy-bank</span> </li> <li> <span class="glyphicon glyphicon-scissors" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-scissors</span> </li> <li> <span class="glyphicon glyphicon-bitcoin" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bitcoin</span> </li> <li> <span class="glyphicon glyphicon-btc" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-btc</span> </li> <li> <span class="glyphicon glyphicon-xbt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-xbt</span> </li> <li> <span class="glyphicon glyphicon-yen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-yen</span> </li> <li> <span class="glyphicon glyphicon-jpy" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-jpy</span> </li> <li> <span class="glyphicon glyphicon-ruble" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ruble</span> </li> <li> <span class="glyphicon glyphicon-rub" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-rub</span> </li> <li> <span class="glyphicon glyphicon-scale" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-scale</span> </li> <li> <span class="glyphicon glyphicon-ice-lolly" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ice-lolly</span> </li> <li> <span class="glyphicon glyphicon-ice-lolly-tasted" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ice-lolly-tasted</span> </li> <li> <span class="glyphicon glyphicon-education" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-education</span> </li> <li> <span class="glyphicon glyphicon-option-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-option-horizontal</span> </li> <li> <span class="glyphicon glyphicon-option-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-option-vertical</span> </li> <li> <span class="glyphicon glyphicon-menu-hamburger" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-hamburger</span> </li> <li> <span class="glyphicon glyphicon-modal-window" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-modal-window</span> </li> <li> <span class="glyphicon glyphicon-oil" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-oil</span> </li> <li> <span class="glyphicon glyphicon-grain" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-grain</span> </li> <li> <span class="glyphicon glyphicon-sunglasses" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sunglasses</span> </li> <li> <span class="glyphicon glyphicon-text-size" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-size</span> </li> <li> <span class="glyphicon glyphicon-text-color" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-color</span> </li> <li> <span class="glyphicon glyphicon-text-background" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-background</span> </li> <li> <span class="glyphicon glyphicon-object-align-top" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-top</span> </li> <li> <span class="glyphicon glyphicon-object-align-bottom" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-bottom</span> </li> <li> <span class="glyphicon glyphicon-object-align-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-horizontal</span> </li> <li> <span class="glyphicon glyphicon-object-align-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-left</span> </li> <li> <span class="glyphicon glyphicon-object-align-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-vertical</span> </li> <li> <span class="glyphicon glyphicon-object-align-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-right</span> </li> <li> <span class="glyphicon glyphicon-triangle-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-right</span> </li> <li> <span class="glyphicon glyphicon-triangle-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-left</span> </li> <li> <span class="glyphicon glyphicon-triangle-bottom" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-bottom</span> </li> <li> <span class="glyphicon glyphicon-triangle-top" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-top</span> </li> <li> <span class="glyphicon glyphicon-console" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-console</span> </li> <li> <span class="glyphicon glyphicon-superscript" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-superscript</span> </li> <li> <span class="glyphicon glyphicon-subscript" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-subscript</span> </li> <li> <span class="glyphicon glyphicon-menu-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-left</span> </li> <li> <span class="glyphicon glyphicon-menu-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-right</span> </li> <li> <span class="glyphicon glyphicon-menu-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-down</span> </li> <li> <span class="glyphicon glyphicon-menu-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-up</span> </li> </ul> </div> <h2 id=glyphicons-how-to-use>How to use</h2> <p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p> <div class="bs-callout bs-callout-danger" id=callout-glyphicons-dont-mix> <h4>Don't mix with other components</h4> <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code><span></code> and apply the icon classes to the <code><span></code>.</p> </div> <div class="bs-callout bs-callout-danger" id=callout-glyphicons-empty-only> <h4>Only for use on empty elements</h4> <p>Icon classes should only be used on elements that contain no text content and have no child elements.</p> </div> <div class="bs-callout bs-callout-info" id=callout-glyphicons-location> <h4>Changing the icon font location</h4> <p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p> <ul> <li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li> <li>Utilize the <a href=http://lesscss.org/usage/#command-line-usage-relative-urls>relative URLs option</a> provided by the Less compiler.</li> <li>Change the <code>url()</code> paths in the compiled CSS.</li> </ul> <p>Use whatever option best suits your specific development setup.</p> </div> <div class="bs-callout bs-callout-warning" id=callout-glyphicons-accessibility> <h4>Accessible icons</h4> <p>Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the <code>aria-hidden="true"</code> attribute.</p> <p>If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the <code>.sr-only</code> class.</p> <p>If you're creating controls with no other text (such as a <code><button></code> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an <code>aria-label</code> attribute on the control itself.</p> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><span</span> <span class=na>class=</span><span class=s>"glyphicon glyphicon-search"</span> <span class=na>aria-hidden=</span><span class=s>"true"</span><span class=nt>></span></span></code></pre></figure> <h2 id=glyphicons-examples>Examples</h2> <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p> <div class=bs-example data-example-id=glyphicons-general> <div class=btn-toolbar role=toolbar> <div class=btn-group> <button type=button class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label=Justify><span class="glyphicon glyphicon-align-justify" aria-hidden=true></span></button> </div> </div> <div class=btn-toolbar role=toolbar> <button type=button class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> </div> </div> <figure class=highlight><pre><code class=language-html data-lang=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-default"</span> <span class=na>aria-label=</span><span class=s>"Left Align"</span><span class=nt>></span>
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class="v4-tease">Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li class=active> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Themes")">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Components</h1> <p>Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.</p> <
script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 id=glyphicons class=page-header>Glyphicons</h1> <h2 id=glyphicons-glyphs>Available glyphs</h2> <p>Includes over 250 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p> <div class=bs-glyphicons> <ul class=bs-glyphicons-list> <li> <span class="glyphicon glyphicon-asterisk" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-asterisk</span> </li> <li> <span class="glyphicon glyphicon-plus" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plus</span> </li> <li> <span class="glyphicon glyphicon-euro" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-euro</span> </li> <li> <span class="glyphicon glyphicon-eur" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eur</span> </li> <li> <span class="glyphicon glyphicon-minus" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-minus</span> </li> <li> <span class="glyphicon glyphicon-cloud" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud</span> </li> <li> <span class="glyphicon glyphicon-envelope" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-envelope</span> </li> <li> <span class="glyphicon glyphicon-pencil" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pencil</span> </li> <li> <span class="glyphicon glyphicon-glass" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-glass</span> </li> <li> <span class="glyphicon glyphicon-music" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-music</span> </li> <li> <span class="glyphicon glyphicon-search" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-search</span> </li> <li> <span class="glyphicon glyphicon-heart" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-heart</span> </li> <li> <span class="glyphicon glyphicon-star" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-star</span> </li> <li> <span class="glyphicon glyphicon-star-empty" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-star-empty</span> </li> <li> <span class="glyphicon glyphicon-user" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-user</span> </li> <li> <span class="glyphicon glyphicon-film" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-film</span> </li> <li> <span class="glyphicon glyphicon-th-large" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th-large</span> </li> <li> <span class="glyphicon glyphicon-th" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th</span> </li> <li> <span class="glyphicon glyphicon-th-list" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th-list</span> </li> <li> <span class="glyphicon glyphicon-ok" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok</span> </li> <li> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove</span> </li> <li> <span class="glyphicon glyphicon-zoom-in" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-zoom-in</span> </li> <li> <span class="glyphicon glyphicon-zoom-out" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-zoom-out</span> </li> <li> <span class="glyphicon glyphicon-off" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-off</span> </li> <li> <span class="glyphicon glyphicon-signal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-signal</span> </li> <li> <span class="glyphicon glyphicon-cog" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cog</span> </li> <li> <span class="glyphicon glyphicon-trash" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-trash</span> </li> <li> <span class="glyphicon glyphicon-home" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-home</span> </li> <li> <span class="glyphicon glyphicon-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-file</span> </li> <li> <span class="glyphicon glyphicon-time" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-time</span> </li> <li> <span class="glyphicon glyphicon-road" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-road</span> </li> <li> <span class="glyphicon glyphicon-download-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-download-alt</span> </li> <li> <span class="glyphicon glyphicon-download" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-download</span> </li> <li> <span class="glyphicon glyphicon-upload" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-upload</span> </li> <li> <span class="glyphicon glyphicon-inbox" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-inbox</span> </li> <li> <span class="glyphicon glyphicon-play-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-play-circle</span> </li> <li> <span class="glyphicon glyphicon-repeat" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-repeat</span> </li> <li> <span class="glyphicon glyphicon-refresh" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-refresh</span> </li> <li> <span class="glyphicon glyphicon-list-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-list-alt</span> </li> <li> <span class="glyphicon glyphicon-lock" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-lock</span> </li> <li> <span class="glyphicon glyphicon-flag" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-flag</span> </li> <li> <span class="glyphicon glyphicon-headphones" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-headphones</span> </li> <li> <span class="glyphicon glyphicon-volume-off" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-off</span> </li> <li> <span class="glyphicon glyphicon-volume-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-down</span> </li> <li> <span class="glyphicon glyphicon-volume-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-up</span> </li> <li> <span class="glyphicon glyphicon-qrcode" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-qrcode</span> </li> <li> <span class="glyphicon glyphicon-barcode" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-barcode</span> </li> <li> <span class="glyphicon glyphicon-tag" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tag</span> </li> <li> <span class="glyphicon glyphicon-tags" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tags</span> </li> <li> <span class="glyphicon glyphicon-book" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-book</span> </li> <li> <span class="glyphicon glyphicon-bookmark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bookmark</span> </li> <li> <span class="glyphicon glyphicon-print" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-print</span> </li> <li> <span class="glyphicon glyphicon-camera" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-camera</span> </li> <li> <span class="glyphicon glyphicon-font" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-font</span> </li> <li> <span class="glyphicon glyphicon-bold" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bold</span> </li> <li> <span class="glyphicon glyphicon-italic" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-italic</span> </li> <li> <span class="glyphicon glyphicon-text-height" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-height</span> </li> <li> <span class="glyphicon glyphicon-text-width" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-width</span> </li> <li> <span class="glyphicon glyphicon-align-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-left</span> </li> <li> <span class="glyphicon glyphicon-align-center" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-center</span> </li> <li> <span class="glyphicon glyphicon-align-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-right</span> </li> <li> <span class="glyphicon glyphicon-align-justify" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-justify</span> </li> <li> <span class="glyphicon glyphicon-list" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-list</span> </li> <li> <span class="glyphicon glyphicon-indent-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-indent-left</span> </li> <li> <span class="glyphicon glyphicon-indent-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-indent-right</span> </li> <li> <span class="glyphicon glyphicon-facetime-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-facetime-video</span> </li> <li> <span class="glyphicon glyphicon-picture" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-picture</span> </li> <li> <span class="glyphicon glyphicon-map-marker" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-map-marker</span> </li> <li> <span class="glyphicon glyphicon-adjust" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-adjust</span> </li> <li> <span class="glyphicon glyphicon-tint" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tint</span> </li> <li> <span class="glyphicon glyphicon-edit" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-edit</span> </li> <li> <span class="glyphicon glyphicon-share" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-share</span> </li> <li> <span class="glyphicon glyphicon-check" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-check</span> </li> <li> <span class="glyphicon glyphicon-move" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-move</span> </li> <li> <span class="glyphicon glyphicon-step-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-step-backward</span> </li> <li> <span class="glyphicon glyphicon-fast-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fast-backward</span> </li> <li> <span class="glyphicon glyphicon-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-backward</span> </li> <li> <span class="glyphicon glyphicon-play" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-play</span> </li> <li> <span class="glyphicon glyphicon-pause" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pause</span> </li> <li> <span class="glyphicon glyphicon-stop" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-stop</span> </li> <li> <span class="glyphicon glyphicon-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-forward</span> </li> <li> <span class="glyphicon glyphicon-fast-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fast-forward</span> </li> <li> <span class="glyphicon glyphicon-step-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-step-forward</span> </li> <li> <span class="glyphicon glyphicon-eject" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eject</span> </li> <li> <span class="glyphicon glyphicon-chevron-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-left</span> </li> <li> <span class="glyphicon glyphicon-chevron-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-right</span> </li> <li> <span class="glyphicon glyphicon-plus-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plus-sign</span> </li> <li> <span class="glyphicon glyphicon-minus-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-minus-sign</span> </li> <li> <span class="glyphicon glyphicon-remove-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove-sign</span> </li> <li> <span class="glyphicon glyphicon-ok-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok-sign</span> </li> <li> <span class="glyphicon glyphicon-question-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-question-sign</span> </li> <li> <span class="glyphicon glyphicon-info-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-info-sign</span> </li> <li> <span class="glyphicon glyphicon-screenshot" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-screenshot</span> </li> <li> <span class="glyphicon glyphicon-remove-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove-circle</span> </li> <li> <span class="glyphicon glyphicon-ok-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok-circle</span> </li> <li> <span class="glyphicon glyphicon-ban-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ban-circle</span> </li> <li> <span class="glyphicon glyphicon-arrow-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-left</span> </li> <li> <span class="glyphicon glyphicon-arrow-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-right</span> </li> <li> <span class="glyphicon glyphicon-arrow-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-up</span> </li> <li> <span class="glyphicon glyphicon-arrow-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-down</span> </li> <li> <span class="glyphicon glyphicon-share-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-share-alt</span> </li> <li> <span class="glyphicon glyphicon-resize-full" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-full</span> </li> <li> <span class="glyphicon glyphicon-resize-small" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-small</span> </li> <li> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-exclamation-sign</span> </li> <li> <span class="glyphicon glyphicon-gift" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-gift</span> </li> <li> <span class="glyphicon glyphicon-leaf" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-leaf</span> </li> <li> <span class="glyphicon glyphicon-fire" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fire</span> </li> <li> <span class="glyphicon glyphicon-eye-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eye-open</span> </li> <li> <span class="glyphicon glyphicon-eye-close" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eye-close</span> </li> <li> <span class="glyphicon glyphicon-warning-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-warning-sign</span> </li> <li> <span class="glyphicon glyphicon-plane" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plane</span> </li> <li> <span class="glyphicon glyphicon-calendar" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-calendar</span> </li> <li> <span class="glyphicon glyphicon-random" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-random</span> </li> <li> <span class="glyphicon glyphicon-comment" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-comment</span> </li> <li> <span class="glyphicon glyphicon-magnet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-magnet</span> </li> <li> <span class="glyphicon glyphicon-chevron-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-up</span> </li> <li> <span class="glyphicon glyphicon-chevron-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-down</span> </li> <li> <span class="glyphicon glyphicon-retweet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-retweet</span> </li> <li> <span class="glyphicon glyphicon-shopping-cart" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-shopping-cart</span> </li> <li> <span class="glyphicon glyphicon-folder-close" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-folder-close</span> </li> <li> <span class="glyphicon glyphicon-folder-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-folder-open</span> </li> <li> <span class="glyphicon glyphicon-resize-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-vertical</span> </li> <li> <span class="glyphicon glyphicon-resize-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-horizontal</span> </li> <li> <span class="glyphicon glyphicon-hdd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hdd</span> </li> <li> <span class="glyphicon glyphicon-bullhorn" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bullhorn</span> </li> <li> <span class="glyphicon glyphicon-bell" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bell</span> </li> <li> <span class="glyphicon glyphicon-certificate" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-certificate</span> </li> <li> <span class="glyphicon glyphicon-thumbs-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-thumbs-up</span> </li> <li> <span class="glyphicon glyphicon-thumbs-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-thumbs-down</span> </li> <li> <span class="glyphicon glyphicon-hand-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-right</span> </li> <li> <span class="glyphicon glyphicon-hand-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-left</span> </li> <li> <span class="glyphicon glyphicon-hand-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-up</span> </li> <li> <span class="glyphicon glyphicon-hand-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-down</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-right</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-left</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-up</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-down</span> </li> <li> <span class="glyphicon glyphicon-globe" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-globe</span> </li> <li> <span class="glyphicon glyphicon-wrench" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-wrench</span> </li> <li> <span class="glyphicon glyphicon-tasks" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tasks</span> </li> <li> <span class="glyphicon glyphicon-filter" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-filter</span> </li> <li> <span class="glyphicon glyphicon-briefcase" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-briefcase</span> </li> <li> <span class="glyphicon glyphicon-fullscreen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fullscreen</span> </li> <li> <span class="glyphicon glyphicon-dashboard" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-dashboard</span> </li> <li> <span class="glyphicon glyphicon-paperclip" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-paperclip</span> </li> <li> <span class="glyphicon glyphicon-heart-empty" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-heart-empty</span> </li> <li> <span class="glyphicon glyphicon-link" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-link</span> </li> <li> <span class="glyphicon glyphicon-phone" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-phone</span> </li> <li> <span class="glyphicon glyphicon-pushpin" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pushpin</span> </li> <li> <span class="glyphicon glyphicon-usd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-usd</span> </li> <li> <span class="glyphicon glyphicon-gbp" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-gbp</span> </li> <li> <span class="glyphicon glyphicon-sort" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort</span> </li> <li> <span class="glyphicon glyphicon-sort-by-alphabet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-alphabet</span> </li> <li> <span class="glyphicon glyphicon-sort-by-alphabet-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-alphabet-alt</span> </li> <li> <span class="glyphicon glyphicon-sort-by-order" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-order</span> </li> <li> <span class="glyphicon glyphicon-sort-by-order-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-order-alt</span> </li> <li> <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-attributes</span> </li> <li> <span class="glyphicon glyphicon-sort-by-attributes-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-attributes-alt</span> </li> <li> <span class="glyphicon glyphicon-unchecked" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-unchecked</span> </li> <li> <span class="glyphicon glyphicon-expand" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-expand</span> </li> <li> <span class="glyphicon glyphicon-collapse-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-collapse-down</span> </li> <li> <span class="glyphicon glyphicon-collapse-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-collapse-up</span> </li> <li> <span class="glyphicon glyphicon-log-in" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-log-in</span> </li> <li> <span class="glyphicon glyphicon-flash" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-flash</span> </li> <li> <span class="glyphicon glyphicon-log-out" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-log-out</span> </li> <li> <span class="glyphicon glyphicon-new-window" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-new-window</span> </li> <li> <span class="glyphicon glyphicon-record" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-record</span> </li> <li> <span class="glyphicon glyphicon-save" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-save</span> </li> <li> <span class="glyphicon glyphicon-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-open</span> </li> <li> <span class="glyphicon glyphicon-saved" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-saved</span> </li> <li> <span class="glyphicon glyphicon-import" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-import</span> </li> <li> <span class="glyphicon glyphicon-export" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-export</span> </li> <li> <span class="glyphicon glyphicon-send" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-send</span> </li> <li> <span class="glyphicon glyphicon-floppy-disk" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-disk</span> </li> <li> <span class="glyphicon glyphicon-floppy-saved" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-saved</span> </li> <li> <span class="glyphicon glyphicon-floppy-remove" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-remove</span> </li> <li> <span class="glyphicon glyphicon-floppy-save" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-save</span> </li> <li> <span class="glyphicon glyphicon-floppy-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-open</span> </li> <li> <span class="glyphicon glyphicon-credit-card" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-credit-card</span> </li> <li> <span class="glyphicon glyphicon-transfer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-transfer</span> </li> <li> <span class="glyphicon glyphicon-cutlery" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cutlery</span> </li> <li> <span class="glyphicon glyphicon-header" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-header</span> </li> <li> <span class="glyphicon glyphicon-compressed" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-compressed</span> </li> <li> <span class="glyphicon glyphicon-earphone" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-earphone</span> </li> <li> <span class="glyphicon glyphicon-phone-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-phone-alt</span> </li> <li> <span class="glyphicon glyphicon-tower" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tower</span> </li> <li> <span class="glyphicon glyphicon-stats" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-stats</span> </li> <li> <span class="glyphicon glyphicon-sd-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sd-video</span> </li> <li> <span class="glyphicon glyphicon-hd-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hd-video</span> </li> <li> <span class="glyphicon glyphicon-subtitles" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-subtitles</span> </li> <li> <span class="glyphicon glyphicon-sound-stereo" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-stereo</span> </li> <li> <span class="glyphicon glyphicon-sound-dolby" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-dolby</span> </li> <li> <span class="glyphicon glyphicon-sound-5-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-5-1</span> </li> <li> <span class="glyphicon glyphicon-sound-6-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-6-1</span> </li> <li> <span class="glyphicon glyphicon-sound-7-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-7-1</span> </li> <li> <span class="glyphicon glyphicon-copyright-mark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-copyright-mark</span> </li> <li> <span class="glyphicon glyphicon-registration-mark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-registration-mark</span> </li> <li> <span class="glyphicon glyphicon-cloud-download" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud-download</span> </li> <li> <span class="glyphicon glyphicon-cloud-upload" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud-upload</span> </li> <li> <span class="glyphicon glyphicon-tree-conifer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tree-conifer</span> </li> <li> <span class="glyphicon glyphicon-tree-deciduous" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tree-deciduous</span> </li> <li> <span class="glyphicon glyphicon-cd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cd</span> </li> <li> <span class="glyphicon glyphicon-save-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-save-file</span> </li> <li> <span class="glyphicon glyphicon-open-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-open-file</span> </li> <li> <span class="glyphicon glyphicon-level-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-level-up</span> </li> <li> <span class="glyphicon glyphicon-copy" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-copy</span> </li> <li> <span class="glyphicon glyphicon-paste" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-paste</span> </li> <li> <span class="glyphicon glyphicon-alert" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-alert</span> </li> <li> <span class="glyphicon glyphicon-equalizer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-equalizer</span> </li> <li> <span class="glyphicon glyphicon-king" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-king</span> </li> <li> <span class="glyphicon glyphicon-queen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-queen</span> </li> <li> <span class="glyphicon glyphicon-pawn" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pawn</span> </li> <li> <span class="glyphicon glyphicon-bishop" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bishop</span> </li> <li> <span class="glyphicon glyphicon-knight" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-knight</span> </li> <li> <span class="glyphicon glyphicon-baby-formula" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-baby-formula</span> </li> <li> <span class="glyphicon glyphicon-tent" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tent</span> </li> <li> <span class="glyphicon glyphicon-blackboard" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-blackboard</span> </li> <li> <span class="glyphicon glyphicon-bed" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bed</span> </li> <li> <span class="glyphicon glyphicon-apple" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-apple</span> </li> <li> <span class="glyphicon glyphicon-erase" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-erase</span> </li> <li> <span class="glyphicon glyphicon-hourglass" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hourglass</span> </li> <li> <span class="glyphicon glyphicon-lamp" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-lamp</span> </li> <li> <span class="glyphicon glyphicon-duplicate" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-duplicate</span> </li> <li> <span class="glyphicon glyphicon-piggy-bank" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-piggy-bank</span> </li> <li> <span class="glyphicon glyphicon-scissors" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-scissors</span> </li> <li> <span class="glyphicon glyphicon-bitcoin" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bitcoin</span> </li> <li> <span class="glyphicon glyphicon-btc" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-btc</span> </li> <li> <span class="glyphicon glyphicon-xbt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-xbt</span> </li> <li> <span class="glyphicon glyphicon-yen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-yen</span> </li> <li> <span class="glyphicon glyphicon-jpy" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-jpy</span> </li> <li> <span class="glyphicon glyphicon-ruble" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ruble</span> </li> <li> <span class="glyphicon glyphicon-rub" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-rub</span> </li> <li> <span class="glyphicon glyphicon-scale" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-scale</span> </li> <li> <span class="glyphicon glyphicon-ice-lolly" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ice-lolly</span> </li> <li> <span class="glyphicon glyphicon-ice-lolly-tasted" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ice-lolly-tasted</span> </li> <li> <span class="glyphicon glyphicon-education" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-education</span> </li> <li> <span class="glyphicon glyphicon-option-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-option-horizontal</span> </li> <li> <span class="glyphicon glyphicon-option-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-option-vertical</span> </li> <li> <span class="glyphicon glyphicon-menu-hamburger" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-hamburger</span> </li> <li> <span class="glyphicon glyphicon-modal-window" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-modal-window</span> </li> <li> <span class="glyphicon glyphicon-oil" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-oil</span> </li> <li> <span class="glyphicon glyphicon-grain" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-grain</span> </li> <li> <span class="glyphicon glyphicon-sunglasses" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sunglasses</span> </li> <li> <span class="glyphicon glyphicon-text-size" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-size</span> </li> <li> <span class="glyphicon glyphicon-text-color" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-color</span> </li> <li> <span class="glyphicon glyphicon-text-background" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-background</span> </li> <li> <span class="glyphicon glyphicon-object-align-top" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-top</span> </li> <li> <span class="glyphicon glyphicon-object-align-bottom" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-bottom</span> </li> <li> <span class="glyphicon glyphicon-object-align-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-horizontal</span> </li> <li> <span class="glyphicon glyphicon-object-align-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-left</span> </li> <li> <span class="glyphicon glyphicon-object-align-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-vertical</span> </li> <li> <span class="glyphicon glyphicon-object-align-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-right</span> </li> <li> <span class="glyphicon glyphicon-triangle-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-right</span> </li> <li> <span class="glyphicon glyphicon-triangle-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-left</span> </li> <li> <span class="glyphicon glyphicon-triangle-bottom" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-bottom</span> </li> <li> <span class="glyphicon glyphicon-triangle-top" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-top</span> </li> <li> <span class="glyphicon glyphicon-console" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-console</span> </li> <li> <span class="glyphicon glyphicon-superscript" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-superscript</span> </li> <li> <span class="glyphicon glyphicon-subscript" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-subscript</span> </li> <li> <span class="glyphicon glyphicon-menu-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-left</span> </li> <li> <span class="glyphicon glyphicon-menu-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-right</span> </li> <li> <span class="glyphicon glyphicon-menu-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-down</span> </li> <li> <span class="glyphicon glyphicon-menu-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-up</span> </li> </ul> </div> <h2 id=glyphicons-how-to-use>How to use</h2> <p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p> <div class="bs-callout bs-callout-danger" id=callout-glyphicons-dont-mix> <h4>Don't mix with other components</h4> <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code><span></code> and apply the icon classes to the <code><span></code>.</p> </div> <div class="bs-callout bs-callout-danger" id=callout-glyphicons-empty-only> <h4>Only for use on empty elements</h4> <p>Icon classes should only be used on elements that contain no text content and have no child elements.</p> </div> <div class="bs-callout bs-callout-info" id=callout-glyphicons-location> <h4>Changing the icon font location</h4> <p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p> <ul> <li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li> <li>Utilize the <a href=http://lesscss.org/usage/#command-line-usage-relative-urls>relative URLs option</a> provided by the Less compiler.</li> <li>Change the <code>url()</code> paths in the compiled CSS.</li> </ul> <p>Use whatever option best suits your specific development setup.</p> </div> <div class="bs-callout bs-callout-warning" id=callout-glyphicons-accessibility> <h4>Accessible icons</h4> <p>Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the <code>aria-hidden="true"</code> attribute.</p> <p>If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the <code>.sr-only</code> class.</p> <p>If you're creating controls with no other text (such as a <code><button></code> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an <code>aria-label</code> attribute on the control itself.</p> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><span</span> <span class=na>class=</span><span class=s>"glyphicon glyphicon-search"</span> <span class=na>aria-hidden=</span><span class=s>"true"</span><span class=nt>></span></span></code></pre></figure> <h2 id=glyphicons-examples>Examples</h2> <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p> <div class=bs-example data-example-id=glyphicons-general> <div class=btn-toolbar role=toolbar> <div class=btn-group> <button type=button class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label=Justify><span class="glyphicon glyphicon-align-justify" aria-hidden=true></span></button> </div> </div> <div class=btn-toolbar role=toolbar> <button type=button class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> </div> </div> <figure class=highlight><pre><code class=language-html data-lang=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-default"</span> <span class=na>aria-label=</span><span class=s>"Left Align"</span><span class=nt>></span>
<span class=nt><span</span> <span class=na>class=</span><span class=s>"glyphicon glyphicon-align-left"</span> <span class=na>aria-hidden=</span><span class=s>"true"</span><span class=nt>></span></span>
<span class=nt></button></span>
<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <meta name=description content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."> <meta name=keywords content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development"> <meta name=author content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <title> CSS · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href="data:text/css;charset=utf-8," data-href=../dist/css/bootstrap-theme.min.css rel=stylesheet id=bs-theme-stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class="v4-tease">Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="../getting-started/">Getting started</a> </li> <li class=active> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Themes")">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>CSS</h1> <p>Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.</p> <
div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s);</script></div></div></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 id=overview class=page-header>Overview</h1> <p class=lead>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p> <h2 id=overview-doctype>HTML5 doctype</h2> <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=cp><!DOCTYPE html></span>
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class="v4-tease">Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="../getting-started/">Getting started</a> </li> <li class=active> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Themes")">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>CSS</h1> <p>Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.</p> <
script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 id=overview class=page-header>Overview</h1> <p class=lead>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p> <h2 id=overview-doctype>HTML5 doctype</h2> <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=cp><!DOCTYPE html></span>
<span class=nt><html</span> <span class=na>lang=</span><span class=s>"en"</span><span class=nt>></span>
...
<span class=nt></html></span></code></pre></figure> <h2 id=overview-mobile>Mobile first</h2> <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p> <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code><head></code>.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><meta</span> <span class=na>name=</span><span class=s>"viewport"</span> <span class=na>content=</span><span class=s>"width=device-width, initial-scale=1"</span><span class=nt>></span></code></pre></figure> <p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><meta</span> <span class=na>name=</span><span class=s>"viewport"</span> <span class=na>content=</span><span class=s>"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"</span><span class=nt>></span></code></pre></figure> <h2 id=overview-type-links>Typography and links</h2> <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p> <ul> <li>Set <code>background-color: #fff;</code> on the <code>body</code></li> <li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li> <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li> </ul> <p>These styles can be found within <code>scaffolding.less</code>.</p> <h2 id=overview-normalize>Normalize.css</h2> <p>For improved cross-browser rendering, we use <a href=http://necolas.github.io/normalize.css/ target=_blank>Normalize.css</a>, a project by <a href=https://twitter.com/necolas target=_blank>Nicolas Gallagher</a> and <a href=https://twitter.com/jon_neal target=_blank>Jonathan Neal</a>.</p> <h2 id=overview-container>Containers</h2> <p>Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to <code>padding</code> and more, neither container is nestable.</p> <p>Use <code>.container</code> for a responsive fixed width container.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><div</span> <span class=na>class=</span><span class=s>"container"</span><span class=nt>></span>
<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <meta name=description content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."> <meta name=keywords content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development"> <meta name=author content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <title> Customize and download · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class="v4-tease">Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li class=active> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Themes")">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Customize and download</h1> <p>Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.</p> <
div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s);</script></div></div></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <!--[if lt IE 9]><style>
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class="v4-tease">Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li class=active> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Themes")">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Customize and download</h1> <p>Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.</p> <
script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <!--[if lt IE 9]><style>
.bs-customizer,
.bs-customizer-import,
.bs-docs-sidebar {
<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <meta name=description content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."> <meta name=keywords content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development"> <meta name=author content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <title> Getting started · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class=active> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Getting started</h1> <p>An overview of Bootstrap, how to download and use, basic templates and examples, and more.</p> <
div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s);</script></div></div></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 id=download class=page-header>Download</h1> <p class=lead>Bootstrap (currently v3.3.6) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p> <div class="row bs-downloads"> <div class=col-sm-4> <h3 id=download-bootstrap>Bootstrap</h3> <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p> <p> <a href=https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip class="btn btn-lg btn-outline" onclick="ga("send","event","Getting started","Download","Download compiled")">Download Bootstrap</a> </p> </div> <div class=col-sm-4> <h3 id=download-source>Source code</h3> <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href=#grunt>some setup.</a></strong></p> <p> <a href=https://github.com/twbs/bootstrap/archive/v3.3.6.zip class="btn btn-lg btn-outline" onclick="ga("send","event","Getting started","Download","Download source")">Download source</a> </p> </div> <div class=col-sm-4> <h3 id=download-sass>Sass</h3> <p><a href=https://github.com/twbs/bootstrap-sass>Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p> <p> <a href=https://github.com/twbs/bootstrap-sass/archive/v3.3.6.tar.gz class="btn btn-lg btn-outline" onclick="ga("send","event","Getting started","Download","Download Sass")">Download Sass</a> </p> </div> </div> <h2 id=download-cdn>Bootstrap CDN</h2> <p>The folks over at <a href="https://www.maxcdn.com/">MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href="https://www.bootstrapcdn.com/">Bootstrap CDN</a> links.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=c><!-- Latest compiled and minified CSS --></span>
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class=active> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Getting started</h1> <p>An overview of Bootstrap, how to download and use, basic templates and examples, and more.</p> <
script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 id=download class=page-header>Download</h1> <p class=lead>Bootstrap (currently v3.3.6) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p> <div class="row bs-downloads"> <div class=col-sm-4> <h3 id=download-bootstrap>Bootstrap</h3> <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p> <p> <a href=https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip class="btn btn-lg btn-outline" onclick="ga("send","event","Getting started","Download","Download compiled")">Download Bootstrap</a> </p> </div> <div class=col-sm-4> <h3 id=download-source>Source code</h3> <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href=#grunt>some setup.</a></strong></p> <p> <a href=https://github.com/twbs/bootstrap/archive/v3.3.6.zip class="btn btn-lg btn-outline" onclick="ga("send","event","Getting started","Download","Download source")">Download source</a> </p> </div> <div class=col-sm-4> <h3 id=download-sass>Sass</h3> <p><a href=https://github.com/twbs/bootstrap-sass>Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p> <p> <a href=https://github.com/twbs/bootstrap-sass/archive/v3.3.6.tar.gz class="btn btn-lg btn-outline" onclick="ga("send","event","Getting started","Download","Download Sass")">Download Sass</a> </p> </div> </div> <h2 id=download-cdn>Bootstrap CDN</h2> <p>The folks over at <a href="https://www.maxcdn.com/">MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href="https://www.bootstrapcdn.com/">Bootstrap CDN</a> links.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=c><!-- Latest compiled and minified CSS --></span>
<span class=nt><link</span> <span class=na>rel=</span><span class=s>"stylesheet"</span> <span class=na>href=</span><span class=s>"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"</span> <span class=na>integrity=</span><span class=s>"sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"</span> <span class=na>crossorigin=</span><span class=s>"anonymous"</span><span class=nt>></span>
<span class=c><!-- Optional theme --></span>
<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <meta name=description content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."> <meta name=keywords content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development"> <meta name=author content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <title> Bootstrap · The world's most popular mobile-first and responsive front-end framework. </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body class=bs-docs-home> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class="v4-tease">Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Themes")">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <main class=bs-docs-masthead id=content role=main tabindex=-1> <div class=container> <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span> <p class=lead>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p> <p class=lead> <a href=getting-started#download class="btn btn-outline-inverse btn-lg" onclick="ga("send","event","Jumbotron actions","Download","Download 3.3.6")">Download Bootstrap</a> </p> <p class=version>Currently v3.3.6</p> <
div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s);</script></div></div></div></main><div class=bs-docs-featurette> <div class=container> <h2 class=bs-docs-featurette-title>Designed for everyone, everywhere.</h2> <p class=lead>Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p> <hr class=half-rule> <div class=row> <div class=col-sm-4> <img src=assets/img/sass-less.png alt="Sass and Less support" class=img-responsive> <h3>Preprocessors</h3> <p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, <a href=../css/#less>Less</a> and <a href=../css/#sass>Sass</a>. Quickly get started with precompiled CSS or build on the source.</p> </div> <div class=col-sm-4> <img src=assets/img/devices.png alt="Responsive across devices" class=img-responsive> <h3>One framework, every device.</h3> <p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p> </div> <div class=col-sm-4> <img src=assets/img/components.png alt=Components class=img-responsive> <h3>Full of features</h3> <p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p> </div> </div> <hr class=half-rule> <p class=lead>Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p> <a href=https://github.com/twbs/bootstrap class="btn btn-outline btn-lg">View the GitHub project</a> </div> </div> <div class=bs-docs-featurette> <div class=container> <h2 class=bs-docs-featurette-title>Built with Bootstrap.</h2> <p class=lead>Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href=../getting-started/#examples>collection of examples</a> or by exploring some of our favorites.</p> <hr class=half-rule> <div class="row bs-docs-featured-sites"> <div class="col-xs-6 col-sm-3"> <a href=http://expo.getbootstrap.com/2014/10/29/lyft/ target=_blank title=Lyft> <img src=/assets/img/expo-lyft.jpg alt=Lyft class=img-responsive> </a> </div> <div class="col-xs-6 col-sm-3"> <a href=http://expo.getbootstrap.com/2014/09/30/vogue/ target=_blank title=Vogue> <img src=/assets/img/expo-vogue.jpg alt=Vogue class=img-responsive> </a> </div> <div class="col-xs-6 col-sm-3"> <a href=http://expo.getbootstrap.com/2014/03/13/riot-design/ target=_blank title="Riot Design"> <img src=/assets/img/expo-riot.jpg alt="Riot Design" class=img-responsive> </a> </div> <div class="col-xs-6 col-sm-3"> <a href=http://expo.getbootstrap.com/2014/02/12/newsweek/ target=_blank title=Newsweek> <img src=/assets/img/expo-newsweek.jpg alt=Newsweek class=img-responsive> </a> </div> </div> <hr class=half-rule> <p class=lead>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p> <a href=http://expo.getbootstrap.com class="btn btn-outline btn-lg">Explore the Expo</a> </div> </div> <footer class=bs-docs-footer role=contentinfo> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href="../about/">About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a rel=license href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank>MIT</a>, docs <a rel=license href=https://creativecommons.org/licenses/by/3.0/ target=_blank>CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script><script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>');</script><script src=../dist/js/bootstrap.min.js></script><script src=../assets/js/docs.min.js></script><script src=../assets/js/ie10-viewport-bug-workaround.js></script><script>var _gauges=_gauges||[];!function(){var e=document.createElement("script");e.async=!0,e.id="gauges-tracker",e.setAttribute("data-site-id","4f0dc9fef5a1f55508000013"),e.src="//secure.gaug.es/track.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}();</script></body></html>
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body class=bs-docs-home> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class="v4-tease">Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Themes")">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <main class=bs-docs-masthead id=content role=main tabindex=-1> <div class=container> <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span> <p class=lead>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p> <p class=lead> <a href=getting-started#download class="btn btn-outline-inverse btn-lg" onclick="ga("send","event","Jumbotron actions","Download","Download 3.3.6")">Download Bootstrap</a> </p> <p class=version>Currently v3.3.6</p> <
script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script></div></main><div class=bs-docs-featurette> <div class=container> <h2 class=bs-docs-featurette-title>Designed for everyone, everywhere.</h2> <p class=lead>Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p> <hr class=half-rule> <div class=row> <div class=col-sm-4> <img src=assets/img/sass-less.png alt="Sass and Less support" class=img-responsive> <h3>Preprocessors</h3> <p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, <a href=../css/#less>Less</a> and <a href=../css/#sass>Sass</a>. Quickly get started with precompiled CSS or build on the source.</p> </div> <div class=col-sm-4> <img src=assets/img/devices.png alt="Responsive across devices" class=img-responsive> <h3>One framework, every device.</h3> <p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p> </div> <div class=col-sm-4> <img src=assets/img/components.png alt=Components class=img-responsive> <h3>Full of features</h3> <p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p> </div> </div> <hr class=half-rule> <p class=lead>Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p> <a href=https://github.com/twbs/bootstrap class="btn btn-outline btn-lg">View the GitHub project</a> </div> </div> <div class=bs-docs-featurette> <div class=container> <h2 class=bs-docs-featurette-title>Built with Bootstrap.</h2> <p class=lead>Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href=../getting-started/#examples>collection of examples</a> or by exploring some of our favorites.</p> <hr class=half-rule> <div class="row bs-docs-featured-sites"> <div class="col-xs-6 col-sm-3"> <a href=http://expo.getbootstrap.com/2014/10/29/lyft/ target=_blank title=Lyft> <img src=/assets/img/expo-lyft.jpg alt=Lyft class=img-responsive> </a> </div> <div class="col-xs-6 col-sm-3"> <a href=http://expo.getbootstrap.com/2014/09/30/vogue/ target=_blank title=Vogue> <img src=/assets/img/expo-vogue.jpg alt=Vogue class=img-responsive> </a> </div> <div class="col-xs-6 col-sm-3"> <a href=http://expo.getbootstrap.com/2014/03/13/riot-design/ target=_blank title="Riot Design"> <img src=/assets/img/expo-riot.jpg alt="Riot Design" class=img-responsive> </a> </div> <div class="col-xs-6 col-sm-3"> <a href=http://expo.getbootstrap.com/2014/02/12/newsweek/ target=_blank title=Newsweek> <img src=/assets/img/expo-newsweek.jpg alt=Newsweek class=img-responsive> </a> </div> </div> <hr class=half-rule> <p class=lead>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p> <a href=http://expo.getbootstrap.com class="btn btn-outline btn-lg">Explore the Expo</a> </div> </div> <footer class=bs-docs-footer role=contentinfo> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href="../about/">About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a rel=license href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank>MIT</a>, docs <a rel=license href=https://creativecommons.org/licenses/by/3.0/ target=_blank>CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script><script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>');</script><script src=../dist/js/bootstrap.min.js></script><script src=../assets/js/docs.min.js></script><script src=../assets/js/ie10-viewport-bug-workaround.js></script><script>var _gauges=_gauges||[];!function(){var e=document.createElement("script");e.async=!0,e.id="gauges-tracker",e.setAttribute("data-site-id","4f0dc9fef5a1f55508000013"),e.src="//secure.gaug.es/track.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}();</script></body></html>
<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <meta name=description content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."> <meta name=keywords content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development"> <meta name=author content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <title> JavaScript · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href="data:text/css;charset=utf-8," data-href=../dist/css/bootstrap-theme.min.css rel=stylesheet id=bs-theme-stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class="v4-tease">Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li class=active> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Themes")">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>JavaScript</h1> <p>Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p> <
div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s);</script></div></div></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 id=js-overview class=page-header>Overview</h1> <h2 id=js-individual-compiled>Individual or compiled</h2> <p>Plugins can be included individually (using Bootstrap's individual <code>*.js</code> files), or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>).</p> <div class="bs-callout bs-callout-danger" id=callout-overview-not-both> <h4>Using the compiled JavaScript</h4> <p>Both <code>bootstrap.js</code> and <code>bootstrap.min.js</code> contain all plugins in a single file. Include only one.</p> </div> <div class="bs-callout bs-callout-danger" id=callout-overview-dependencies> <h4>Plugin dependencies</h4> <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href=https://github.com/twbs/bootstrap/blob/v3.3.6/bower.json>Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p> </div> <h2 id=js-data-attrs>Data attributes</h2> <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p> <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=nb>document</span><span class=p>).</span><span class=nx>off</span><span class=p>(</span><span class=s1>'.data-api'</span><span class=p>)</span></code></pre></figure> <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=nb>document</span><span class=p>).</span><span class=nx>off</span><span class=p>(</span><span class=s1>'.alert.data-api'</span><span class=p>)</span></code></pre></figure> <div class="bs-callout bs-callout-danger" id=callout-overview-single-data> <h4>Only one plugin per element via data attributes</h4> <p>Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.</p> </div> <h2 id=js-programmatic-api>Programmatic API</h2> <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'.btn.danger'</span><span class=p>).</span><span class=nx>button</span><span class=p>(</span><span class=s1>'toggle'</span><span class=p>).</span><span class=nx>addClass</span><span class=p>(</span><span class=s1>'fat'</span><span class=p>)</span></code></pre></figure> <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'#myModal'</span><span class=p>).</span><span class=nx>modal</span><span class=p>()</span> <span class=c1>// initialized with defaults</span>
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class="v4-tease">Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li class=active> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Themes")">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>JavaScript</h1> <p>Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p> <
script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 id=js-overview class=page-header>Overview</h1> <h2 id=js-individual-compiled>Individual or compiled</h2> <p>Plugins can be included individually (using Bootstrap's individual <code>*.js</code> files), or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>).</p> <div class="bs-callout bs-callout-danger" id=callout-overview-not-both> <h4>Using the compiled JavaScript</h4> <p>Both <code>bootstrap.js</code> and <code>bootstrap.min.js</code> contain all plugins in a single file. Include only one.</p> </div> <div class="bs-callout bs-callout-danger" id=callout-overview-dependencies> <h4>Plugin dependencies</h4> <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href=https://github.com/twbs/bootstrap/blob/v3.3.6/bower.json>Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p> </div> <h2 id=js-data-attrs>Data attributes</h2> <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p> <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=nb>document</span><span class=p>).</span><span class=nx>off</span><span class=p>(</span><span class=s1>'.data-api'</span><span class=p>)</span></code></pre></figure> <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=nb>document</span><span class=p>).</span><span class=nx>off</span><span class=p>(</span><span class=s1>'.alert.data-api'</span><span class=p>)</span></code></pre></figure> <div class="bs-callout bs-callout-danger" id=callout-overview-single-data> <h4>Only one plugin per element via data attributes</h4> <p>Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.</p> </div> <h2 id=js-programmatic-api>Programmatic API</h2> <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'.btn.danger'</span><span class=p>).</span><span class=nx>button</span><span class=p>(</span><span class=s1>'toggle'</span><span class=p>).</span><span class=nx>addClass</span><span class=p>(</span><span class=s1>'fat'</span><span class=p>)</span></code></pre></figure> <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'#myModal'</span><span class=p>).</span><span class=nx>modal</span><span class=p>()</span> <span class=c1>// initialized with defaults</span>
<span class=nx>$</span><span class=p>(</span><span class=s1>'#myModal'</span><span class=p>).</span><span class=nx>modal</span><span class=p>({</span> <span class=na>keyboard</span><span class=p>:</span> <span class=kc>false</span> <span class=p>})</span> <span class=c1>// initialized with no keyboard</span>
<span class=nx>$</span><span class=p>(</span><span class=s1>'#myModal'</span><span class=p>).</span><span class=nx>modal</span><span class=p>(</span><span class=s1>'show'</span><span class=p>)</span> <span class=c1>// initializes and invokes show immediately</span></code></pre></figure> <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel="popover"]').data('popover')</code>.</p> <h4>Default settings</h4> <p>You can change the default settings for a plugin by modifying the plugin's <code>Constructor.DEFAULTS</code> object:</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>.</span><span class=nx>fn</span><span class=p>.</span><span class=nx>modal</span><span class=p>.</span><span class=nx>Constructor</span><span class=p>.</span><span class=nx>DEFAULTS</span><span class=p>.</span><span class=nx>keyboard</span> <span class=o>=</span> <span class=kc>false</span> <span class=c1>// changes default for the modal plugin's `keyboard` option to false</span></code></pre></figure> <h2 id=js-noconflict>No conflict</h2> <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=kd>var</span> <span class=nx>bootstrapButton</span> <span class=o>=</span> <span class=nx>$</span><span class=p>.</span><span class=nx>fn</span><span class=p>.</span><span class=nx>button</span><span class=p>.</span><span class=nx>noConflict</span><span class=p>()</span> <span class=c1>// return $.fn.button to previously assigned value</span>
<span class=nx>$</span><span class=p>.</span><span class=nx>fn</span><span class=p>.</span><span class=nx>bootstrapBtn</span> <span class=o>=</span> <span class=nx>bootstrapButton</span> <span class=c1>// give $().bootstrapBtn the Bootstrap functionality</span></code></pre></figure> <h2 id=js-events>Events</h2> <p>Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is triggered on the completion of an action.</p> <p>As of 3.0.0, all Bootstrap events are namespaced.</p> <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'#myModal'</span><span class=p>).</span><span class=nx>on</span><span class=p>(</span><span class=s1>'show.bs.modal'</span><span class=p>,</span> <span class=kd>function</span> <span class=p>(</span><span class=nx>e</span><span class=p>)</span> <span class=p>{</span>
<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <meta name=description content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."> <meta name=keywords content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development"> <meta name=author content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <title> Migrating to v3.x · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class="v4-tease">Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Themes")">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Migrating to v3.x</h1> <p>Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed.</p> <
div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s);</script></div></div></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header>Migrating from 2.x to 3.0</h1> <p class=lead>Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see <a href="http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/">what's new</a> in the v3.0 release announcement.</p> <h2 id=classes>Major class changes</h2> <p>This table shows the style changes between v2.x and v3.0.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Bootstrap 2.x</th> <th>Bootstrap 3.0</th> </tr> </thead> <tbody> <tr> <td><code>.row-fluid</code></td> <td><code>.row</code></td> </tr> <tr> <td><code>.span*</code></td> <td><code>.col-md-*</code></td> </tr> <tr> <td><code>.offset*</code></td> <td><code>.col-md-offset-*</code></td> </tr> <tr> <td><code>.brand</code></td> <td><code>.navbar-brand</code></td> </tr> <tr> <td><code>.navbar .nav</code></td> <td><code>.navbar-nav</code></td> </tr> <tr> <td><code>.nav-collapse</code></td> <td><code>.navbar-collapse</code></td> </tr> <tr> <td><code>.nav-toggle</code></td> <td><code>.navbar-toggle</code></td> </tr> <tr> <td><code>.btn-navbar</code></td> <td><code>.navbar-btn</code></td> </tr> <tr> <td><code>.hero-unit</code></td> <td><code>.jumbotron</code></td> </tr> <tr> <td><code>.icon-*</code></td> <td><code>.glyphicon .glyphicon-*</code></td> </tr> <tr> <td><code>.btn</code></td> <td><code>.btn .btn-default</code></td> </tr> <tr> <td><code>.btn-mini</code></td> <td><code>.btn-xs</code></td> </tr> <tr> <td><code>.btn-small</code></td> <td><code>.btn-sm</code></td> </tr> <tr> <td><code>.btn-large</code></td> <td><code>.btn-lg</code></td> </tr> <tr> <td><code>.alert</code></td> <td><code>.alert .alert-warning</code></td> </tr> <tr> <td><code>.alert-error</code></td> <td><code>.alert-danger</code></td> </tr> <tr> <td><code>.visible-phone</code></td> <td><code>.visible-xs</code></td> </tr> <tr> <td><code>.visible-tablet</code></td> <td><code>.visible-sm</code></td> </tr> <tr> <td><code>.visible-desktop</code></td> <td>Split into <code>.visible-md .visible-lg</code></td> </tr> <tr> <td><code>.hidden-phone</code></td> <td><code>.hidden-xs</code></td> </tr> <tr> <td><code>.hidden-tablet</code></td> <td><code>.hidden-sm</code></td> </tr> <tr> <td><code>.hidden-desktop</code></td> <td>Split into <code>.hidden-md .hidden-lg</code></td> </tr> <tr> <td><code>.input-block-level</code></td> <td><code>.form-control</code></td> </tr> <tr> <td><code>.control-group</code></td> <td><code>.form-group</code></td> </tr> <tr> <td><code>.control-group.warning .control-group.error .control-group.success</code></td> <td><code>.form-group.has-*</code></td> </tr> <tr> <td><code>.checkbox.inline</code> <code>.radio.inline</code></td> <td><code>.checkbox-inline</code> <code>.radio-inline</code></td> </tr> <tr> <td><code>.input-prepend</code> <code>.input-append</code></td> <td><code>.input-group</code></td> </tr> <tr> <td><code>.add-on</code></td> <td><code>.input-group-addon</code></td> </tr> <tr> <td><code>.img-polaroid</code></td> <td><code>.img-thumbnail</code></td> </tr> <tr> <td><code>ul.unstyled</code></td> <td><code>.list-unstyled</code></td> </tr> <tr> <td><code>ul.inline</code></td> <td><code>.list-inline</code></td> </tr> <tr> <td><code>.muted</code></td> <td><code>.text-muted</code></td> </tr> <tr> <td><code>.label</code></td> <td><code>.label .label-default</code></td> </tr> <tr> <td><code>.label-important</code></td> <td><code>.label-danger</code></td> </tr> <tr> <td><code>.text-error</code></td> <td><code>.text-danger</code></td> </tr> <tr> <td><code>.table .error</code></td> <td><code>.table .danger</code></td> </tr> <tr> <td><code>.bar</code></td> <td><code>.progress-bar</code></td> </tr> <tr> <td><code>.bar-*</code></td> <td><code>.progress-bar-*</code></td> </tr> <tr> <td><code>.accordion</code></td> <td><code>.panel-group</code></td> </tr> <tr> <td><code>.accordion-group</code></td> <td><code>.panel .panel-default</code></td> </tr> <tr> <td><code>.accordion-heading</code></td> <td><code>.panel-heading</code></td> </tr> <tr> <td><code>.accordion-body</code></td> <td><code>.panel-collapse</code></td> </tr> <tr> <td><code>.accordion-inner</code></td> <td><code>.panel-body</code></td> </tr> </tbody> </table> </div> <h2 id=new>What's new</h2> <p>We've added new elements and changed some existing ones. Here are the new or updated styles.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Panels</td> <td><code>.panel .panel-default</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td> </tr> <tr> <td>List groups</td> <td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td> </tr> <tr> <td>Glyphicons</td> <td><code>.glyphicon</code></td> </tr> <tr> <td>Jumbotron</td> <td><code>.jumbotron</code></td> </tr> <tr> <td>Extra small grid (<768px)</td> <td><code>.col-xs-*</code></td> </tr> <tr> <td>Small grid (≥768px)</td> <td><code>.col-sm-*</code></td> </tr> <tr> <td>Medium grid (≥992px)</td> <td><code>.col-md-*</code></td> </tr> <tr> <td>Large grid (≥1200px)</td> <td><code>.col-lg-*</code></td> </tr> <tr> <td>Responsive utility classes (≥1200px)</td> <td><code>.visible-lg</code> <code>.hidden-lg</code></td> </tr> <tr> <td>Offsets</td> <td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td> </tr> <tr> <td>Push</td> <td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td> </tr> <tr> <td>Pull</td> <td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td> </tr> <tr> <td>Input height sizes</td> <td><code>.input-sm</code> <code>.input-lg</code></td> </tr> <tr> <td>Input groups</td> <td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td> </tr> <tr> <td>Form controls</td> <td><code>.form-control</code> <code>.form-group</code></td> </tr> <tr> <td>Button group sizes</td> <td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td> </tr> <tr> <td>Navbar text</td> <td><code>.navbar-text</code></td> </tr> <tr> <td>Navbar header</td> <td><code>.navbar-header</code></td> </tr> <tr> <td>Justified tabs / pills</td> <td><code>.nav-justified</code></td> </tr> <tr> <td>Responsive images</td> <td><code>.img-responsive</code></td> </tr> <tr> <td>Contextual table rows</td> <td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code> <code>.info</code></td> </tr> <tr> <td>Contextual panels</td> <td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td> </tr> <tr> <td>Modal</td> <td><code>.modal-dialog</code> <code>.modal-content</code></td> </tr> <tr> <td>Thumbnail image</td> <td><code>.img-thumbnail</code></td> </tr> <tr> <td>Well sizes</td> <td><code>.well-sm</code> <code>.well-lg</code></td> </tr> <tr> <td>Alert links</td> <td><code>.alert-link</code></td> </tr> </tbody> </table> </div> <h2 id=dropped>What's removed</h2> <p>The following elements have been dropped or changed in v3.0.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Element</th> <th>Removed from 2.x</th> <th>3.0 Equivalent</th> </tr> </thead> <tbody> <tr> <td>Form actions</td> <td><code>.form-actions</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Search form</td> <td><code>.form-search</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Form group with info</td> <td><code>.control-group.info</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Fixed-width input sizes</td> <td><code>.input-mini</code> <code>.input-small</code> <code>.input-medium</code> <code>.input-large</code> <code>.input-xlarge</code> <code>.input-xxlarge</code></td> <td>Use <a href=../css/#forms-controls><code>.form-control</code></a> and <a href=../css/#grid>the grid system</a> instead.</td> </tr> <tr> <td>Block level form input</td> <td><code>.input-block-level</code></td> <td>No direct equivalent, but <a href=../css/#forms-controls>forms controls</a> are similar.</td> </tr> <tr> <td>Inverse buttons</td> <td><code>.btn-inverse</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Fluid row</td> <td><code>.row-fluid</code></td> <td><code>.row</code> (no more fixed grid)</td> </tr> <tr> <td>Controls wrapper</td> <td><code>.controls</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Controls row</td> <td><code>.controls-row</code></td> <td><code>.row</code> or <code>.form-group</code></td> </tr> <tr> <td>Navbar inner</td> <td><code>.navbar-inner</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Navbar vertical dividers</td> <td><code>.navbar .divider-vertical</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Dropdown submenu</td> <td><code>.dropdown-submenu</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Tab alignments</td> <td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Pill-based tabbable area</td> <td><code>.pill-content</code></td> <td><code>.tab-content</code></td> </tr> <tr> <td>Pill-based tabbable area pane</td> <td><code>.pill-pane</code></td> <td><code>.tab-pane</code></td> </tr> <tr> <td>Nav lists</td> <td><code>.nav-list</code> <code>.nav-header</code></td> <td>No direct equivalent, but <a href=../components/#list-group>list groups</a> and <a href=../javascript/#collapse><code>.panel-group</code>s</a> are similar.</td> </tr> <tr> <td>Inline help for form controls</td> <td><code>.help-inline</code></td> <td>No exact equivalent, but <code>.help-block</code> is similar.</td> </tr> <tr> <td>Non-bar-level progress colors</td> <td><code>.progress-info</code> <code>.progress-success</code> <code>.progress-warning</code> <code>.progress-danger</code></td> <td>Use <code>.progress-bar-*</code> on the <code>.progress-bar</code> instead.</td> </tr> </tbody> </table> </div> <h2 id=notes>Additional notes</h2> <p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p> <ul> <li>By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the <code>.form-control</code> class on the element to style.</li> <li>Text-based form controls with the <code>.form-control</code> class applied are now 100% wide by default. Wrap inputs inside <code><div class="col-*"></div></code> to control input widths.</li> <li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes.</li> <li><code>.btn</code> must also use <code>.btn-default</code> to get the "default" button.</li> <li><code>.row</code> is now fluid.</li> <li>Images are no longer responsive by default. Use <code>.img-responsive</code> for fluid <code><img></code> size.</li> <li>The icons, now <code>.glyphicon</code>, are now font based. Icons also require a base and icon class (e.g. <code>.glyphicon .glyphicon-asterisk</code>).</li> <li>Typeahead has been dropped, in favor of using <a href="http://twitter.github.io/typeahead.js/">Twitter Typeahead</a>.</li> <li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior. Also, you should no longer apply <code>.hide</code> to <code>.modal</code> in your markup.</li> <li>As of v3.1.0, the HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal-content</code> (from v3.0.0 to v3.0.3, into the <code>.modal</code>) instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li> <li>The checkbox and radio features of the button.js plugin now both use <code>data-toggle="buttons"</code> instead of <code>data-toggle="buttons-checkbox"</code> or <code>data-toggle="buttons-radio"</code> in their markup.</li> <li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc.</li> </ul> <p>For more information on upgrading to v3.0, and code snippets from the community, see <a href="http://bootply.com/">Bootply</a>.</p> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm"> <ul class="nav bs-docs-sidenav"> <li> <a href=#classes>Major class changes</a> </li> <li> <a href=#new>What's new</a> </li> <li> <a href=#dropped>What's removed</a> </li> <li> <a href=#notes>Additional notes</a> </li> </ul> <a class=back-to-top href=#top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer role=contentinfo> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href="../about/">About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a rel=license href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank>MIT</a>, docs <a rel=license href=https://creativecommons.org/licenses/by/3.0/ target=_blank>CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script><script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>');</script><script src=../dist/js/bootstrap.min.js></script><script src=../assets/js/docs.min.js></script><script src=../assets/js/ie10-viewport-bug-workaround.js></script><script>var _gauges=_gauges||[];!function(){var e=document.createElement("script");e.async=!0,e.id="gauges-tracker",e.setAttribute("data-site-id","4f0dc9fef5a1f55508000013"),e.src="//secure.gaug.es/track.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}();</script></body></html>
\ No newline at end of file
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class="v4-tease">Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Themes")">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Migrating to v3.x</h1> <p>Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed.</p> <
script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header>Migrating from 2.x to 3.0</h1> <p class=lead>Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see <a href="http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/">what's new</a> in the v3.0 release announcement.</p> <h2 id=classes>Major class changes</h2> <p>This table shows the style changes between v2.x and v3.0.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Bootstrap 2.x</th> <th>Bootstrap 3.0</th> </tr> </thead> <tbody> <tr> <td><code>.row-fluid</code></td> <td><code>.row</code></td> </tr> <tr> <td><code>.span*</code></td> <td><code>.col-md-*</code></td> </tr> <tr> <td><code>.offset*</code></td> <td><code>.col-md-offset-*</code></td> </tr> <tr> <td><code>.brand</code></td> <td><code>.navbar-brand</code></td> </tr> <tr> <td><code>.navbar .nav</code></td> <td><code>.navbar-nav</code></td> </tr> <tr> <td><code>.nav-collapse</code></td> <td><code>.navbar-collapse</code></td> </tr> <tr> <td><code>.nav-toggle</code></td> <td><code>.navbar-toggle</code></td> </tr> <tr> <td><code>.btn-navbar</code></td> <td><code>.navbar-btn</code></td> </tr> <tr> <td><code>.hero-unit</code></td> <td><code>.jumbotron</code></td> </tr> <tr> <td><code>.icon-*</code></td> <td><code>.glyphicon .glyphicon-*</code></td> </tr> <tr> <td><code>.btn</code></td> <td><code>.btn .btn-default</code></td> </tr> <tr> <td><code>.btn-mini</code></td> <td><code>.btn-xs</code></td> </tr> <tr> <td><code>.btn-small</code></td> <td><code>.btn-sm</code></td> </tr> <tr> <td><code>.btn-large</code></td> <td><code>.btn-lg</code></td> </tr> <tr> <td><code>.alert</code></td> <td><code>.alert .alert-warning</code></td> </tr> <tr> <td><code>.alert-error</code></td> <td><code>.alert-danger</code></td> </tr> <tr> <td><code>.visible-phone</code></td> <td><code>.visible-xs</code></td> </tr> <tr> <td><code>.visible-tablet</code></td> <td><code>.visible-sm</code></td> </tr> <tr> <td><code>.visible-desktop</code></td> <td>Split into <code>.visible-md .visible-lg</code></td> </tr> <tr> <td><code>.hidden-phone</code></td> <td><code>.hidden-xs</code></td> </tr> <tr> <td><code>.hidden-tablet</code></td> <td><code>.hidden-sm</code></td> </tr> <tr> <td><code>.hidden-desktop</code></td> <td>Split into <code>.hidden-md .hidden-lg</code></td> </tr> <tr> <td><code>.input-block-level</code></td> <td><code>.form-control</code></td> </tr> <tr> <td><code>.control-group</code></td> <td><code>.form-group</code></td> </tr> <tr> <td><code>.control-group.warning .control-group.error .control-group.success</code></td> <td><code>.form-group.has-*</code></td> </tr> <tr> <td><code>.checkbox.inline</code> <code>.radio.inline</code></td> <td><code>.checkbox-inline</code> <code>.radio-inline</code></td> </tr> <tr> <td><code>.input-prepend</code> <code>.input-append</code></td> <td><code>.input-group</code></td> </tr> <tr> <td><code>.add-on</code></td> <td><code>.input-group-addon</code></td> </tr> <tr> <td><code>.img-polaroid</code></td> <td><code>.img-thumbnail</code></td> </tr> <tr> <td><code>ul.unstyled</code></td> <td><code>.list-unstyled</code></td> </tr> <tr> <td><code>ul.inline</code></td> <td><code>.list-inline</code></td> </tr> <tr> <td><code>.muted</code></td> <td><code>.text-muted</code></td> </tr> <tr> <td><code>.label</code></td> <td><code>.label .label-default</code></td> </tr> <tr> <td><code>.label-important</code></td> <td><code>.label-danger</code></td> </tr> <tr> <td><code>.text-error</code></td> <td><code>.text-danger</code></td> </tr> <tr> <td><code>.table .error</code></td> <td><code>.table .danger</code></td> </tr> <tr> <td><code>.bar</code></td> <td><code>.progress-bar</code></td> </tr> <tr> <td><code>.bar-*</code></td> <td><code>.progress-bar-*</code></td> </tr> <tr> <td><code>.accordion</code></td> <td><code>.panel-group</code></td> </tr> <tr> <td><code>.accordion-group</code></td> <td><code>.panel .panel-default</code></td> </tr> <tr> <td><code>.accordion-heading</code></td> <td><code>.panel-heading</code></td> </tr> <tr> <td><code>.accordion-body</code></td> <td><code>.panel-collapse</code></td> </tr> <tr> <td><code>.accordion-inner</code></td> <td><code>.panel-body</code></td> </tr> </tbody> </table> </div> <h2 id=new>What's new</h2> <p>We've added new elements and changed some existing ones. Here are the new or updated styles.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Panels</td> <td><code>.panel .panel-default</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td> </tr> <tr> <td>List groups</td> <td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td> </tr> <tr> <td>Glyphicons</td> <td><code>.glyphicon</code></td> </tr> <tr> <td>Jumbotron</td> <td><code>.jumbotron</code></td> </tr> <tr> <td>Extra small grid (<768px)</td> <td><code>.col-xs-*</code></td> </tr> <tr> <td>Small grid (≥768px)</td> <td><code>.col-sm-*</code></td> </tr> <tr> <td>Medium grid (≥992px)</td> <td><code>.col-md-*</code></td> </tr> <tr> <td>Large grid (≥1200px)</td> <td><code>.col-lg-*</code></td> </tr> <tr> <td>Responsive utility classes (≥1200px)</td> <td><code>.visible-lg</code> <code>.hidden-lg</code></td> </tr> <tr> <td>Offsets</td> <td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td> </tr> <tr> <td>Push</td> <td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td> </tr> <tr> <td>Pull</td> <td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td> </tr> <tr> <td>Input height sizes</td> <td><code>.input-sm</code> <code>.input-lg</code></td> </tr> <tr> <td>Input groups</td> <td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td> </tr> <tr> <td>Form controls</td> <td><code>.form-control</code> <code>.form-group</code></td> </tr> <tr> <td>Button group sizes</td> <td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td> </tr> <tr> <td>Navbar text</td> <td><code>.navbar-text</code></td> </tr> <tr> <td>Navbar header</td> <td><code>.navbar-header</code></td> </tr> <tr> <td>Justified tabs / pills</td> <td><code>.nav-justified</code></td> </tr> <tr> <td>Responsive images</td> <td><code>.img-responsive</code></td> </tr> <tr> <td>Contextual table rows</td> <td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code> <code>.info</code></td> </tr> <tr> <td>Contextual panels</td> <td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td> </tr> <tr> <td>Modal</td> <td><code>.modal-dialog</code> <code>.modal-content</code></td> </tr> <tr> <td>Thumbnail image</td> <td><code>.img-thumbnail</code></td> </tr> <tr> <td>Well sizes</td> <td><code>.well-sm</code> <code>.well-lg</code></td> </tr> <tr> <td>Alert links</td> <td><code>.alert-link</code></td> </tr> </tbody> </table> </div> <h2 id=dropped>What's removed</h2> <p>The following elements have been dropped or changed in v3.0.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Element</th> <th>Removed from 2.x</th> <th>3.0 Equivalent</th> </tr> </thead> <tbody> <tr> <td>Form actions</td> <td><code>.form-actions</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Search form</td> <td><code>.form-search</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Form group with info</td> <td><code>.control-group.info</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Fixed-width input sizes</td> <td><code>.input-mini</code> <code>.input-small</code> <code>.input-medium</code> <code>.input-large</code> <code>.input-xlarge</code> <code>.input-xxlarge</code></td> <td>Use <a href=../css/#forms-controls><code>.form-control</code></a> and <a href=../css/#grid>the grid system</a> instead.</td> </tr> <tr> <td>Block level form input</td> <td><code>.input-block-level</code></td> <td>No direct equivalent, but <a href=../css/#forms-controls>forms controls</a> are similar.</td> </tr> <tr> <td>Inverse buttons</td> <td><code>.btn-inverse</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Fluid row</td> <td><code>.row-fluid</code></td> <td><code>.row</code> (no more fixed grid)</td> </tr> <tr> <td>Controls wrapper</td> <td><code>.controls</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Controls row</td> <td><code>.controls-row</code></td> <td><code>.row</code> or <code>.form-group</code></td> </tr> <tr> <td>Navbar inner</td> <td><code>.navbar-inner</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Navbar vertical dividers</td> <td><code>.navbar .divider-vertical</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Dropdown submenu</td> <td><code>.dropdown-submenu</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Tab alignments</td> <td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Pill-based tabbable area</td> <td><code>.pill-content</code></td> <td><code>.tab-content</code></td> </tr> <tr> <td>Pill-based tabbable area pane</td> <td><code>.pill-pane</code></td> <td><code>.tab-pane</code></td> </tr> <tr> <td>Nav lists</td> <td><code>.nav-list</code> <code>.nav-header</code></td> <td>No direct equivalent, but <a href=../components/#list-group>list groups</a> and <a href=../javascript/#collapse><code>.panel-group</code>s</a> are similar.</td> </tr> <tr> <td>Inline help for form controls</td> <td><code>.help-inline</code></td> <td>No exact equivalent, but <code>.help-block</code> is similar.</td> </tr> <tr> <td>Non-bar-level progress colors</td> <td><code>.progress-info</code> <code>.progress-success</code> <code>.progress-warning</code> <code>.progress-danger</code></td> <td>Use <code>.progress-bar-*</code> on the <code>.progress-bar</code> instead.</td> </tr> </tbody> </table> </div> <h2 id=notes>Additional notes</h2> <p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p> <ul> <li>By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the <code>.form-control</code> class on the element to style.</li> <li>Text-based form controls with the <code>.form-control</code> class applied are now 100% wide by default. Wrap inputs inside <code><div class="col-*"></div></code> to control input widths.</li> <li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes.</li> <li><code>.btn</code> must also use <code>.btn-default</code> to get the "default" button.</li> <li><code>.row</code> is now fluid.</li> <li>Images are no longer responsive by default. Use <code>.img-responsive</code> for fluid <code><img></code> size.</li> <li>The icons, now <code>.glyphicon</code>, are now font based. Icons also require a base and icon class (e.g. <code>.glyphicon .glyphicon-asterisk</code>).</li> <li>Typeahead has been dropped, in favor of using <a href="http://twitter.github.io/typeahead.js/">Twitter Typeahead</a>.</li> <li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior. Also, you should no longer apply <code>.hide</code> to <code>.modal</code> in your markup.</li> <li>As of v3.1.0, the HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal-content</code> (from v3.0.0 to v3.0.3, into the <code>.modal</code>) instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li> <li>The checkbox and radio features of the button.js plugin now both use <code>data-toggle="buttons"</code> instead of <code>data-toggle="buttons-checkbox"</code> or <code>data-toggle="buttons-radio"</code> in their markup.</li> <li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc.</li> </ul> <p>For more information on upgrading to v3.0, and code snippets from the community, see <a href="http://bootply.com/">Bootply</a>.</p> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm"> <ul class="nav bs-docs-sidenav"> <li> <a href=#classes>Major class changes</a> </li> <li> <a href=#new>What's new</a> </li> <li> <a href=#dropped>What's removed</a> </li> <li> <a href=#notes>Additional notes</a> </li> </ul> <a class=back-to-top href=#top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer role=contentinfo> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href="../about/">About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a rel=license href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank>MIT</a>, docs <a rel=license href=https://creativecommons.org/licenses/by/3.0/ target=_blank>CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script><script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>');</script><script src=../dist/js/bootstrap.min.js></script><script src=../assets/js/docs.min.js></script><script src=../assets/js/ie10-viewport-bug-workaround.js></script><script>var _gauges=_gauges||[];!function(){var e=document.createElement("script");e.async=!0,e.id="gauges-tracker",e.setAttribute("data-site-id","4f0dc9fef5a1f55508000013"),e.src="//secure.gaug.es/track.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}();</script></body></html>
\ No newline at end of file
projects / thirdparty / bootstrap.git / commitdiff
