CODEWITHSUNDEEP
responsive-designtwitter-bootstrap-3
Fa773N M0nK
Fa773N M0nK

Reputation: 120

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

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;
  }
}

Upvotes: 3

Views: 10712

Answers (2)

Elijah Murray
Elijah Murray

Reputation: 2172

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.

Upvotes: 2

Nils Kaspersson
Nils Kaspersson

Reputation: 9464

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.

Upvotes: 3

Related Questions