How can I set the width of fluid Bootstrap containers?

Question

I just want to clear out one thing. If I am using "container-fluid" class, it means I can not have something like this in bootstrap.css:

.container-fluid{
width: 1170px;
}

I tried to set in pixels and the responsive nature simply switched off. While setting in % it works. In other words, my question is like this: How can I set the fixed width of container-fluid? Or was it simply not meant by default by bootstrap developers?

I already read this link: Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap

But simply can not find anything there regarding the responsive nature and fixed width with container-fluid.

responsiveness means that the width is to be decided by the viewport size. Giving the width in terms of percentage in also not correct as it will distort somehow on some devices so better to use max-width here. — Amit

Patrick Evans Patrick Evans · Accepted Answer · 2013-09-23T16:39:16

setting a px width is making it static, you would have to employ a different technique to make it responsive after that like javascript that is why a % is used.

If you are wanting to make the container not go wider than 1170px use

.container-fluid {
   max-width:1170px;
}

max-width will make it so if the users screen is wider than 1170px the container will go only up to 1170px wide. This will make it so the responsive mechanisms will still work.

Of course using .container-fluid as the selector will change how all container-fluid elements act so think about adding a second class to that element and setting the style to it.

html

<div class="container-fluid maxWidth"></div>

css

.maxWidth {
       max-width:1170px;
}

If you are wanting the container to be fixed no matter what, that will make the contents inside non-responsive as they would not be able to tell when the screen has changed size as the container would not change size.

How can I set the width of fluid Bootstrap containers?

1 Answers