html - Styling multiple jumbotrons - Bootstrap -


i want homepage feature multiple jumbotrons, when try style jumbotron class in css.css file, stylings applied each jumbotron. without using inline css, how can modify jumbotrons individually within css file?

my css.css file, jumbotron class. changes applied both jumbotrons on home page, when want css below applied first.

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

my homepage. 2 jumbotrons different

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

add class 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


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -