Designing and Coding to Bootstrap Grid Columns or Gutters?

Often designers prototype our websites by using tools like Illustrator, Sketch, etc. and when doing so designers try to keep in mind the grid that the developer will be using to best communicate exact measurements to the developer.

Grids are often implemented in the following order:

1. Margin (Optional)
2. Column
3. Gutter
4. Repeat 2&3
5. Margin (Optional)

After setting up a grid in a tool, designers will attempt to place blocks to the grid system, starting with the column and NOT the gutter. As shown below:

However, in Bootstrap v3 some elements take up the width of the gutters and thus this may be inappropriate and leads to confusion on how properly to design for these websites. In the example below these are form inputs. Notice how the input starts and includes the 15px gutter padding (inserted twelve .col-xs-1 with spans inside to indicate borders). Codepen Link

.col-xs-1, .col-xs-3   background-color: blue  .col-xs-1 span, .col-xs-3 span    background-color: pink  .form-control   background-color: black !important` 

Yet in my design, I've attempted to start from the column as shown below (The columns are indicated by the space in GRAY, the columns are just thin due to responsiveness but the gutters remain the same -- sized down for the iPhone 6 Plus).

Am I misunderstanding something? As I'm developing and designing the product myself, I'm unsure as to how I can get exact measurements in Bootstrap for these elements that contain the gutter in the design, then develop it to match the design. How do I design to a Bootstrap grid when some elements, it seems, take up the width of the gutter? Or conversely, how do I alter the Bootstrap code so that some elements do NOT take the width of the gutter?

Do elements TYPICALLY take the width of the gutter? If so, why are designers expected to design from the column?

(PS I am aware that there's a design Stack Exchange, but I feel like this question may come from a misunderstanding of Bootstrap rather than design principles)

4 Answers

Answers 1

I see your conundrum.

To truly understand TWBS' grid system one needs to disregard prior learning... the design framework of the margin-column-gutter, though correct, applies to frameworks like 960gs. This framework is based on fixed width grid systems with "columns" set a fixed px-based width. You've assumed this as your wireframe.

TWBS is a responsive framework - the major difference is that one cannot fix the widths because beeing responsive; the width needs to scale ("move" as the screen resizes), and thus based on percentages.

Web layout is a set of columns, like this:

<div class="container">   <div class="row">     <div class="col-md-*">content</div>     ...   </div> </div> 

and the columns have "padding" (both left and right). The framework is thus padding-column-padding-repeated.

See this JSFiddle for an example.

Answers 2

although I am not quite sure I understand your question, let me give you some insight that might help you.

Although I have met clients that want their designs replicated 1:1, imho it doesn't really matter if a column is 90 or 100px wide as long as it follows the same principles along the whole site and looks uniform.

Bootstrap doesn't have gutter between columns as a margin but as a padding withing the columns. That is, each column has a specific percentage width - by default divided by 12ths - and within this column a padding exists in either side of the column - by default 15px.

The container of these columns - the row class, has a negative margin equal to the padding within this columns. This way, the first and last columns' width is actually the column-width minus one padding from either side of the column, but in total they end up the width of the parent wrapper container. The negative margin and the column padding should be defined depending on the GUTTER width you prefer between columns like:

gutter width = 2x padding width padding width = row negative margin width

Hope it makes sense.

Answers 3

Thought of adding more to the answers above,

12 columns grids system is the default of TWBS 3.xx, as well as the 15px padding/gutter.

Note: 12 column grid system is a tested design for the best user experience for screen responsive

So the design template you used above is clearly for the default bootstrap. And designers does not have to be stick to it. Unless they are ok with it. And if designers want to have different gutter rhythm other than 15px, e.g. 10px. or different column numbers, still they can generate a custom version by compiling the bootstrap sourcecode. Or the easiest way is to use the customize tool on the site.

Tip: You can remove the gutters by using simple css lines if needed. See below for the solution

---

So explaining the TWBS grid system

• Bootstrap starts with 100%/12 width column cells
• And then each cells has 15px padding left & right

Explaining further,

<div class="container">   <div class="row">     <div class="col-md-*">content</div>     ...   </div> </div> 

• Starts with class="container" comes with 15px padding both left and right
• Then class="row"comes with -15px padding both left and right
• So this resets the 15px starting and ending gaps
• Then class="col-md-*" has padding of 15px. So if you put another container inside and change the background color for it, you can see gaps in between.

So this is why you see the gutters there in your example.

Quick solution,

.no-gutter > [class*='col-'] {     padding-right:0;     padding-left:0; } 

Answers 4

If you want to achieve condition like given in the last picture, you can do likewise:

e.g,

<div class="col-sm-6">Sign Up</div> <div class="col-sm-6"><div class="row">Login</div></div>

Just add extra div with class "row", so you can utilize the space of gutter as well. hope you get my point.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati