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.
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
I am using flex-mode and I would like a 'deck' of 'cards' that all have the same height and width, and the width to be consistent and based on different breakpoints. I have not found a way to do this, though. Whenever I add a card-deck class around a group of cards, they ignore any width set, whether with col-* classes or by setting a specific width on them.
This is the hierarchy I was trying to make work:
.row>.card-deck-wrapper>.card-deck>(.col-md-3>.card>.card-block)*4
And here is a codepen with what I was attempting to make work
The card-group and card-desk both use display: table (or display:flex when $enable-flex is set to true), so you should not wrap your cell into col-* classes to set their width. The col-* classes not only set the width but also float: left, see also: https://stackoverflow.com/a/35804749/1596547
For display: table the widths are is the result of the automatic table layout algorithm as implemented by the browser, see https://stackoverflow.com/a/21130851/1596547.
For display:flex you can set the flex-basis to a fixed width (with both flex-grow and flex-shrink set to 0) see https://stackoverflow.com/a/23794791/1596547
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/.
Looked through Foundation zurb documentation. Noted that rows, columns and container are not defined in width as in documentation, but if want the wrapper container to be set at 1000px to wrap header, body, sidebar, footer inside, does the wrapper need to be defined in width to contain everything inside?
Also the header, body, sidebar, footer are placed in each row with medium-# or large-# so that they can be resized according to browser size.
Sorry and I am trying Foundation for the first time.
Thanks
If you properly download all the foundation material (use bower from the command line or you can download a zip from the github page), you'll find:
$row-width: emCalc(1000);
in the sass files under _settings.scss
You can adjust this, and many other values that affect widths, within this file.
The specified .small or .medium or .large classes for rows are used for foundation's grid layouts and are designed especially for screen widths matching those relevant sizes. If you're new, I would work with "small columns" first as foundation is designed as a mobile first platform, and it has less problems scaling up than down. Good luck!
I have a basic Bootstrap question regarding the grid system. When you use the standard grid and apply the container class your container width ends up being 940px by default. If I want my container to be larger do I then use the fluid grid system so my span classes expand to fill the entire container?
When you use a standard grid, the container, row and spans sizes are fixed (in pixels) and with a fluid grid that sizes are dynamic (in percentages).
As you said, container width is 940px by default in standard grid and 100% in fluid grid. It's not necessary to use fluid grid just to make your container larger, that depends of on your needs (if you need your design to be responsive or not). An easy solutions is just to override the width value of container class (.container) after the inclusion of bootstrap.css file.
.container {
width: 1024px;
}
Hope this helps!
EDIT: Also need to override span widths!