Bootstrap fluid container after non-fluid container

0
votes

I want to have the lower part of a webpage to be full width (in a container-fluid div), as opposed to the top part of the page, which is in a conventional class="container" div.

However, with the following html, my lower div is not full-width:

<div class="container">
Restricted width
</div>

<div class="container-fluid">
Full-width
</div>

If I make the top div fluid too, both become fluid. But why can't I have a fluid container below a non-fluid container?

2
htmltwitter-bootstrapbootstrap-4
Can't reproduce: codeply.com/go/EUKP7X7vcQ - Zim
I've just pasted that code in codepen, and it's working just as you wanted. How is it not working for you? Can you provide screenshots or some additional code? - nemanja
Everything works normal here bootply.com/kV2a021RPX what is your expectation?? Can you describe the problem in clear with any working example?? - Maniraj Murugan
Ha, the good thing about these questions is that every day I am learning about some new online editor/ code playground :). Keep 'em coming. - nemanja

2 Answers

0
votes

Test ist

<div class="container-fluid">
    <div class="container">
        Restricted width
    </div>
    Full-width
</div>
0
votes

you must have missed closing some <div> in the top container div, otherwise, it won't affect, as per your code it would definitely work.