I am just starting with Bootstrap and going through docs. Right now, seems very confusing and have some queries as follows:
In the Grid Options table, why the container width is always less than device width, why not equal to device width for e.g.Small devices Tablets (≥768px).
How the width 750px is determined, why not 743px or 755px or any other size. How did they determine that 750px as container width.
As given, bootstrap scales up to 12 columns with gutter between columns and each column width is
~62px and gutter is 30px (15px on each side) therefore
(12(cols)*62px ) + (11(gutters) * 15(width)) equals to 909px instead of the given 750px container width. Why ?
This is all is very confusing to me. Could someone plz show how the container widths are calculated for different breakpoints and why the container width is not equal to device width ?
Thanks
dk
The Bootstrap .container is used as a centered container, if you want full-width on all devices use .container-fluid
The 62px is actually 62.5px at the small breakpoint. 62.5 x 12 = 750px, and this includes the 15px padding around each column. The gutter is within the column since padding is used (as opposed to a margin where the gutter would be outside the column).
Here's a nice visual demo: http://www.codeply.com/go/Sul9kw8Kne
Aside from the container width, take a look at this article about the BS3 grid
First of, If you want a container to equal to device width use
container-fluid instead of container
For the Grid system there are two concepts
Boxed layout (.container provide this)
wide layout (.container-fluid provide this)
in bootstarp there is no pixels for grid every thing in in percentage (%) only.
all media quire break points are setup through bootstartp it self you may change those values through bootstrap customizer http://getbootstrap.com/customize/.
Related
I need to have one 740px column for the content and one 320px for the sidebar so the container must be 1060px.
Is there anyway to get this exact grid size in bootstrap ?
I know I can customize there http://getbootstrap.com/customize/ but i dont know the exact numbers for get it.
You won't really get this "exact grid size in bootstrap" since the Bootstrap grid uses percentage-based columns widths.
The simplest approach is to override the Bootstrap css to set a specific width on those columns, which will (of course) result in the columns no longer being responsive. You can still use the responsive grid nested inside the outer columns, and other Bootstrap features.
2-columns fixed width layout: http://bootply.com/B9ti0Rjer1
You could optionally use a media query to apply the fixed widths on larger screens only: http://bootply.com/5Kv1z1XCQK
The main content column of my website is too wide for 1920x1080 resolution, so I'm trying to limit the size by using the max-width property, but when I do that the column is no longer centered. So every time I reduce the maximum width (let's say from 1600 to 1400px), the main content gets "chopped off" on the right side instead of being centered. Here's screenshot to demonstrate:
Note: I can't use margins for this because it will make the column too small on lower resolution devices.
Add the following CSS:
margin: 0 auto;
This sets the margin-left and margin-right properties to auto which centers a fixed width element (such as your max-width element).
Now, as for lower screen stuff, you should try to reset the margins on lower screen devices with a media query.
If my browser is sized to be 992px wide, then .container has a max-width of 970px. If my browser is sized to be 991px wide, then .container has a max-width of 750px. Why is there this big jump in the max width? Why not just have a max-width of 1170px or so with 20px of margin on each side or something so that as you resize your browser window the container width scales smoothly instead of having a big jump?
E.g. at 992px screen width I have only very little margin on each side (11px). Yet at 991px wide I have 120px of margin on each side, which means nearly 25% of the screen real estate is empty margin on the sides. This doesn't make a lot of sense to me. Is there a reason this was done? Can I remove this behavior of preferring certain container widths without breaking things?
The official answer from the Bootstrap folks:
What it boils down to is that designing for specific breakpoints is
easier (in my mind) than designing for unlimited, unknown sizes. The
alternative you mention isn't wrong or bad, just different. I'd rather
us maintain the tiers with very specific ranges
This is because fixed-width + margin = break point. In bootstrap the margin grows while the container remains at a fixed width. When the browser is res-sized past break-point the container jumps just below break-point.
This is how Bootstrap and its grids work. Bootstrap defines 4 grids, see this table. Depending on screen size, one of these four grids will be used. 992px screen width is the breakpoint between the small and the medium grid.
Grids fit horizontally and scroll vertically as we are used to. For this reason the smaller grid will be applied below 992px.
The maximum container width can be "calculated" by finding which width can contain 12 equal-width columns plus any gutters. For the small grid 12 x 60 makes 720. The padding is constructed of 15 pixels on both sides of the column, minus 2 x 15 pixels on the outside of the grid. Those missing pixels (constructed with a negative margin) make 720 + (2 x 15) = 750.
750 px seems very small in relation to the 991px your mentioned. The small grid is intended for use on devices with a screen width of 768px and the medium grid for screen widths of 992px.
I used
.container {
max-width: 100%;
}
in Bootstrap 4, and that removed it for me. Be careful applying that globally though. You can do this for specific containers instead:
.container.some-specific-class {
max-width: 100%;
}
<div class="container some-specific-class">
xyz...
</div>
Thanks to Dorian for the initial tip.
While I see the $row-width: emCalc(1000px); in _variables.css, I can't find where the small width is defined for mobile devices. I'm assuming it's just set to 100% but I'd like to play around with changing this.
Your assumption is correct : The row-width variable just sets the maximum width.
The width of the .row is always 100%
When it's a large screen, the width is constrained by the max-width variable, so it's by default 1000px
When it's a small screen (as a mobile device), the .row width is 100%.
I'm assuming it's just set to 100% but I'd like to play around with
changing this.
You may consider to change the breakpoint width, or using different structure (columns?).
From my understanding, gutters are the white space between columns. Questions:
In Bootstrap, I assume gutters are the spaces between .container and .container-fluid. Is this correct?
Gutter width seems to be between 20px - 30px based on display size. What to do if the design doesn't require spacing between containers?
1. Gutters
Gutters are the space between .span, whether it's in a .row or a .row-fluid. But the gutter width is defined by a different setting for the normal grid and the fluid one (one is fixed in px, the other is relative in %).
Additional values are set depending on the screen width, if you use the responsive layout.
Check this doc (same with v3)
Important : the gutter width is used in several others rules, for example the margin-left of the .row, or the width of the .container.
2. No gutters
Gutter widths are defined as LESS variables. If you want to use a grid that doesn't have gutters, you should download a customized version of bootstrap - see Grid System (same with v3).
I myself prefer to download the LESS files, import an override file after variables.less, set my own variables and compile it myself, so that I can upgrade Bootstrap without worrying about my previous modifications.