How to put a background image on Jumbotron? Bootstrap 4

Navigation
-2

Could anyone help me put a background image on jumbotron?

This is the code: 

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

    
asked by anonymous 23.12.2018 / 18:49

1 answer

1

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

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

This is where you load this file after loading 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 is true for any other customization in Bootstrap, creating a new class to complement it, rather than redefining existing classes.

    
23.12.2018 / 19:54
Count in PHP via variable value Change of state in accounts current accounts