title: Styling multiple jumbotrons - Bootstrap
body: <p>I want my homepage to feature multiple Jumbotrons, but when I try to style the Jumbotron class in my css.css file, they stylings are applied to each jumbotron. Without using inline css, how can I modify jumbotrons individually within my css file?</p>
  
  <p>My css.css file, jumbotron class. Currently the changes are applied to both jumbotrons on my home page, when I just want the css below to be applied to the first. </p>
  
  <pre><code>.jumbotron{
      width:100%;
      height: 1400px;
      background-color:#f39c12;
      padding:0px;
      margin:0px;
      opacity: 0.7;
      text-align: center;
  }
  </code></pre>
  
  <p>My homepage. I would like the two jumbotrons to be different</p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
      &lt;div id="firstJBox"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="jumbotron"&gt;
  &lt;/div&gt;
  </code></pre>