Search code examples
csstwitter-bootstrapbootstrap-4

For Bootstrap 4 site should I add container-fluid at body or main level

For Bootstrap 4 site should I add container-fluid at body or main level

i.e

<html>
<head></head>
<body class= "container-fluid">
<header></header>
<main></main>
<footer></footer>
</body>
</html>

or

<html>
<head></head>
<body>
<header></header>
<main class= "container-fluid"></main>
<footer></footer>
</body>
</html>

What would be more usual ?

In the second, would it be usual to have a container for each section, i.e.

<html>
<head></head>
<body>
<header class= "container-fluid"></header>
<main class= "container-fluid"></main>
<footer class= "container-fluid"></footer>
</body>
</html>
Solution

  • First: In my opinion container is something, what is sub-body part and can be multiple times on page. And btw I don't see benefit from using header, main and footer blocks. But at your case I would do this:

    <html>
<head></head>
<body>
<header></header>
<main>
    <div class="container-fluid"></div>
    <div class="container-fluid"></div>
</main>
<footer></footer>
</body>
</html>

    Ad.: Some css frameworks has some styles for elements header, main, footer. In that case, you should inspect these elements.

    Second: I don't think that's good idea. At least < head > cannot have styles. Other element like header, main and footer usually work same as div, so you can add class to them.