Bootstrap 3 Grid, do I need a container?

Bootstrap 3 Grid, do I need a container?

I’ve been playing with bootstrap 3 and I noticed that if you use the Grid System without a container it becomes fluid, someone told me I shouldn’t do that because the system was design to be within a container. What happens if I don’t use the container class?, do I need it?, if so could I make the container class width 100% without messing up bootstrap’s media-queries, or is there any other or better way to build a fluid layout with bootstrap 3.

Solutions/Answers:

Solution 1:

Update Bootstrap 4

Rows should also be wrapping in container or container-fluid in Bootstrap 4 to prevent horizontal scolling caused by negative margins on the .row.

Bootstrap 3

You should wrap row in container or you’ll have a problem with the negative margins that BS 3 uses for the row element. Basically the row is designed to be within a container. Read more on the Bootstrap grid

Play with this example on Bootply: http://bootply.com/83751

Related:  How to Customize Bootstrap Column Widths?

Solution 2:

I think you need it.
Without the container it kind a works – but it shows a horizontal scroll bar at the bottom of the page and around 20px are cut off from rightside of the screen.

See yourself how it works without the container class – just go to http://getbootstrap.com/ and remove the container class using inspect element.

Solution 3:

Just use the container-fluid class instead of the container class.
class=”container-fluid” will allow you to use full width.

References