Bootstrap. The container liquid with a mask .container-like

Question

I have a Bootstrap site built using .container for layout with an extra CSS property for .container on my CSS site:

 .container { width: 1170px; } 

Now I'm trying to go to the .container-fluid layout so that I have full-screen background images in my divs, but at the same time I still need the actual contents of my divs to have the .container - like the layout. I have so far tried to embed .container in .container-fluid , but this doesn't seem like the best solution or good practice in this regard.

Everyone is welcome any guide.

Answer 1

I recently wanted to do this, but some of the solutions found were more complex than necessary. What I did was pretty much exactly what uʍopǝpısdn has already stated in the comments on your question, i.e. Wrap .container in div .

I created several color styles for each of the sections that I need:

 .bg-black { background-color: #111; } //add more colors, even background images in a similar manner 

And used these styles as the classes of each packaging div :

 <div class="bg-black"> <div class="container"> //content here </div> </div> <div class="bg-red"> <div class="container"> //other content here </div> </div> //...and so on 

This solution obviously requires you to restructure your HTML to use one .container for each section instead of one .container per body , which, it seemed to me, works quite well.

Answer 2

 <div class="container-fluid"> <div class="wrap"> <div class="container"> <div class="row"> here u can use span or u can provide the style property </div> </div> </div> </div> 

think this should help u :)