CODEWITHSUNDEEP
htmlcssruby-on-rails-4twitter-bootstrap-3
user3133810
user3133810

Reputation:

Styling multiple jumbotrons - Bootstrap

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?

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. 

.jumbotron{
    width:100%;
    height: 1400px;
    background-color:#f39c12;
    padding:0px;
    margin:0px;
    opacity: 0.7;
    text-align: center;
}

My homepage. I would like the two jumbotrons to be different

<div class="jumbotron">
    <div id="firstJBox">
    </div>
</div>
<div class="jumbotron">
</div>

Upvotes: 2

Views: 10121

Answers (3)

user16556707
user16556707

Reputation: 11

Used this to work html <div class="jumbotron" id="jumbotron-body"> </div>

css .jumbotron#jumbotron-body { background-color: red; }

Upvotes: 1

Sean Cooley
Sean Cooley

Reputation: 21

Classes work, but they are meant to be re-usable. an ID seems more suited for this situation, since it is used to identify unique DOM objects, and can only be used once.

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362470

Add another class for specificity..

<div class="jumbotron jumbotron-special">
    <div id="firstJBox">
    </div>
</div>
<div class="jumbotron">
</div>

CSS

.jumbotron-special{
    width:100%;
    height: 1400px;
    background-color:#f39c12;
    padding:0px;
    margin:0px;
    opacity: 0.7;
    text-align: center;
}

Demo: http://www.bootply.com/122798

Upvotes: 6

Related Questions