CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Paul Taylor
Paul Taylor

Reputation: 13210

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>

Upvotes: 0

Views: 1122

Answers (2)

Bednic
Bednic

Reputation: 71

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.

Upvotes: 2

Giorgi Tsiklauri
Giorgi Tsiklauri

Reputation: 11120

I think W3Schools has a very clear definition on this:

Bootstrap requires a containing element to wrap site contents.

and it says site, an entire web site, because these classes (container or container-fluid) provide facilities to contain and adjust an entire web site document and you put an entire website in this element, whenever you use Bootstrap CSS Framework.

There are two container classes to choose from:

  1. The .container class provides a responsive fixed width container
  2. The .container-fluid class provides a full width container, spanning the entire width of the viewport

Upvotes: 0

Related Questions