CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-designtwitter-bootstrap-3
Brett
Brett

Reputation: 20049

What to use to get full screen element in twitter bootstrap?

I've just started to learn the responsive framework Bootstrap and I'm trying to figure out how to make a full width element for the whole screen.

Like, I was reading an article and it pointed out that normally you would use .container as this centers things on the screen and adds padding on the edges; it then went on to say that you should use .container-fluid if you want it to go full screen as it is set to a width of 100%.

I have downloaded Bootstrap 3.20 and that is not true, they are exactly the same:

CSS:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

So, if I am wanting to use a full screen method, what do I use for the container?

Upvotes: 0

Views: 140

Answers (1)

omma2289
omma2289

Reputation: 54629

The difference is in the media queries they use to set the size of .container:

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.container-fluid is always 100% so in your case you'd want to use that or depending on the scenario you may just use a plain <div>

Upvotes: 2

Related Questions