margin-bottom: 0;
}
-.hero-unit {
+.jumbotron {
padding: 60px;
margin-bottom: 30px;
font-size: 18px;
border-radius: 6px;
}
-.hero-unit h1 {
+.jumbotron h1 {
margin-bottom: 0;
font-size: 60px;
line-height: 1;
color: inherit;
}
-.hero-unit li {
+.jumbotron li {
line-height: 30px;
}
<h1>Typographic components</h1>
</div>
- <h2>Hero unit</h2>
+ <h2>Jumbotron</h2>
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
<div class="bs-docs-example">
- <div class="hero-unit">
+ <div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>
</div>
<pre class="prettyprint linenums">
-<div class="hero-unit">
+<div class="jumbotron">
<h1>Heading</h1>
<p>Tagline</p>
<p>
<h1>Typographic components</h1>
</div>
- <h2>Hero unit</h2>
+ <h2>Jumbotron</h2>
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
<div class="bs-docs-example">
- <div class="hero-unit">
+ <div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>
</div>
<pre class="prettyprint linenums">
-<div class="hero-unit">
+<div class="jumbotron">
<h1>Heading</h1>
<p>Tagline</p>
<p>
@import "progress-bars.less";
@import "accordion.less";
@import "carousel.less";
-@import "hero-unit.less";
+@import "jumbotron.less";
// Utility classes
@import "utilities.less"; // Has to be last to override when necessary
//
-// Hero unit
+// Jumbotron
// --------------------------------------------------
-.hero-unit {
+.jumbotron {
padding: 60px;
margin-bottom: 30px;
font-size: 18px;
font-weight: 200;
line-height: @line-height-base * 1.5;
- color: @hero-lead-color;
- background-color: @hero-background;
+ color: @jumbotron-lead-color;
+ background-color: @jumbotron-background;
border-radius: 6px;
h1 {
margin-bottom: 0;
font-size: 60px;
line-height: 1;
- color: @hero-heading-color;
+ color: @jumbotron-heading-color;
letter-spacing: -1px;
}
li {
@pagination-border: #ddd;
-// Hero unit
+// Jumbotron
// -------------------------
-@hero-background: @grayLighter;
-@hero-heading-color: inherit;
-@hero-lead-color: inherit;
+@jumbotron-background: @grayLighter;
+@jumbotron-heading-color: inherit;
+@jumbotron-lead-color: inherit;
// Form states and alerts