Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap Grid, do I need a container?

Tags:

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.

like image 650
Jose Rodriguez Masis Avatar asked Sep 28 '13 06:09

Jose Rodriguez Masis


People also ask

Can I use Bootstrap grid only?

The Bootstrap Grid can be used alone, without the Bootstrap JavaScript and other CSS Components. You just need to download and reference the “ bootstrap-grid. css ” which contains the Grid and Flexbox classes. More info on only using the Bootstrap Grid CSS is here in the docs.

Why do we use container-fluid in Bootstrap?

container-fluid: The . container-fluid class provides a full-width container which spans the entire width of the viewport. In the below example, the div with class “container-fluid” will take up the complete width of the viewport and will expand or shrink whenever the viewport is resized.

How the Bootstrap grid really works?

How does Bootstrap work? To align and layout, the Bootstrap grid system uses a series of containers, rows, and columns. This grid system supports a max value of 12 columns. Anything after the 12th column will be shifted to a new line.

Should I use grid or Bootstrap?

If you're layout-first, meaning you want to create the layout and then place items into it, then you'll be better off with CSS Grid. But if you're content-first, meaning you have items that you want to place into a container and space out evenly, go with Bootstrap.


2 Answers

Update Bootstrap 4

Outermost 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

like image 192
Zim Avatar answered Sep 29 '22 18:09

Zim


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.

like image 38
Aajahid Avatar answered Sep 29 '22 18:09

Aajahid