Give ID to a Jumbotron

Asked

Viewed 538 times

1

I have a few pages with a Jumbotron of the same formatting on each page. I need you to have background-image different on each page.

How can I give an ID to each of these jumbotrons, so I can edit their background-image, without touching other type settings 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

  • if they are on different pages, you can even instantiate based on the page ids if they have an id, #index .jumbotron... The fact that he is more specific will override the others. Another alternative is to have a class for each Jumbotron ex: class="Jumbotron first"" and in css . first change the image for each class.

  • Michel, thank you so much for the tip! Solved.

1 answer

1


You don’t necessarily need different id’s, 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 selector .jumbotron.nome-da-classe specifies an element that has the two classes, you can do the same with a id: .jumbotron#id, the use gets 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>

  • Eduardo, thank you so much. I used . Class with #Id Solved! Great tip.

Browser other questions tagged css twitter-bootstrap background

You are not signed in. Login or sign up in order to post.