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
Related
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/.
New to Susy. I have a 12-column grid with side-by-side content areas: content-left: span-columns(3,12); content-right: span-columns(9 omega, 12). both content areas must have equal height, matching the area with the longest content. Ordinarily I'd use a clearfix in this situation, but that doesn't seem to apply to susy grids. What am I missing?
Clearfix works fine with Susy, but clearfix won't give you equal height columns. It only forces the container to clear the columns. CSS doesn't actually have a good solution for equal height, but there are various workarounds you can try. Susy won't have any affect, for better or worse. All Susy really does is float columns and set their width.
I can't establish the difference between Fluid and Fluid Grid design. Arguably any elements in a fluid layout will share a lowest common denominator, so surely any layout is a grid based on the LCD.
Grid based layout is based on the use of pre-defined 'columns' which are used to set the width of elements on the page.
As you are probably aware, a fluid layout is something that will proportionaly adjust to the browser width. This still hold true with fluid grid systems with the added advantage of also using columns.
Grid layouts come with added advantages over standard (or non-grid) layouts:
design consistency
rapid, easy layout development
encourages correlation and consistency between different page elements
helps produce a visualy balanced layout
usualy allow for flexibility in terms of setting number of columns, gutters, etc.
Fluid grid systems are just a grid system with a fluid style (the column widths are proportional rather than fixed).
If you do not already use grid based layouts then I can definatly recommend getting into them!
Some refs for you:
(fixed grid) http://960.gs/
(fluid grid) http://www.tinyfluidgrid.com/
(fixed, fluid, fixed grid, fluid grid) http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
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.
I'm starting off building a site which should be responsive to different screen sizes. I'm using the Fluid Baseline Grid template which uses percentages for columns and adjusts according to screen sizes using media queries. Now that I'm adding my own custom CSS, I am wondering whether I should be using pixels, percentages or ems for positioning my elements (within the fluid grid elements). For example, margins and padding between divs, widths of input fields etc. Font sizes and line heights are the only things set to use ems for measurement.
Can anyone provide any pointers on this? At the moment I'm leaning towards just using pixels within the percentage based layout that the grid template has preset.
Ideally, you should be using percentages whenever possible, at least on the horizontal plane, so the margins and padding can expand/contract proportionally with the rest of the content. A 10px margin might be great at small resolutions, but it could look much too tight at much larger ones.