How to put a background image on Jumbotron? Bootstrap 4

Asked

Viewed 2,467 times

-2

Could someone help me put a background image on the Jumbotron ?

That is the code:

<div class="jumbotron jumbotron-fluid">
   <div class="container">
       <h1 class="display-4">Biblioteca</h1>
   </div>
</div>

inserir a descrição da imagem aqui

twitter-bootstrap

1 answer

1


The best way to do this is to create a new file to store CSS customizations, a "style.css" or "custom.css" etc and define the new attributes for "Jumbotron":

.jumbotron-with-background {
    background-image: url(
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
}

Hence it is loading this file after loading the Bootstrap CSS:

<link rel='stylesheet' href="/css/bootstrap.min.css">
<link rel='stylesheet' href="/css/style.css">

And finally put your customization in HTML...

<div class="jumbotron jumbotron-fluid jumbotron-with-background">
    ...
</div>

This applies to any other customization in Bootstrap, creating a new class to complement it instead of redefining existing classes.

Browser other questions tagged twitter-bootstrap

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