Give ID for a Jumbotron

Question

Give ID for a Jumbotron

Navigation

#1 by (1 votes)

1

I have some pages with a jumbotron of the same formatting on each page. I need them to have background-image different on each page.

How can I give an ID for each of these jumbotrons, so I can edit their background-image , without touching the other settings type font-size , font-family , etc?

.titulo{
  font-size: 4em;
  font-weight: bolder;
  font-family: "oswald"
}

.jumbotron{
  background-image: url("../imagens/jumbotron/bg-mochilas.jpg");
  background-size: cover;
}

css twitter-bootstrap background

asked by anonymous 03.06.2015 / 19:41

1 answer

Report generation error JasperReport + Netbeans net.sf.jasperreports.engine.JRException: java.net.MalformedURLException Performance for multiple domains on a single server

score 1 · Accepted Answer

You do not necessarily need different id's, you can do using same classes, see:

.jumbotron.success {
    background-color: #4CAF50;
}
.jumbotron.warning {
    background-color: #FF9800;
}
.jumbotron.danger {
    background-color: #F44336;
}
.jumbotron#beach {
    background-color: transparent;
    background: url(beach.jpg) no-repeat;
    color: #fff;
}

The .jumbotron.nome-da-classe selector specifies an element that has both classes, you can do the same with id : .jumbotron#id , use looks like this:

<!-- Exemplo com classe -->
<div class="jumbotron danger">
  <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-lg" href="#" role="button">Learn more</a></p>
</div>
<!-- Exemplo com ID -->
<div class="jumbotron" id="beach">
  <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-lg" href="#" role="button">Learn more</a></p>
</div>