Você não precisa necessariamente de id's diferentes, pode fazer usando classes mesmo, veja:
.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;
}
O seletor .jumbotron.nome-da-classe
especifica um elemento que tem as duas classes, você pode fazer o mesmo com um id
: .jumbotron#id
, o uso fica assim:
<!-- 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>