Why is bootstrap's 'container' class not full-width?

Question

container, by default, puts contents in the centre (with margins on the side) instead of filling up the whole screen.

What is the rationale behind this?

@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

Solution 1

Is this a question regarding why, by design, container doesn't fill out the entre screen?

While I can't claim I know for sure, I can imagine this is a decision based upon the fact that you rarely would want your content to start right at the edge of a screen. I can also imagine many people are more comfortable doing a couple of static layouts rather than a completely liquid design, not to mention some layouts can be very challenging to design with a percentage based width.

You could obivously go liquid and use max-width: 100% and apply padding to the container instead. Personally this is my preferred approach.

There's no best practice here, the better approach is largely based on the layout in question.

Solution 2

You can also use the container-fluid class, which makes everything percentage based. So instead of the container having a fixed width and being centered on the page, you then have container-width equal to 100% of the viewport.