Form partial submit button could use some padding above it in full-width

[JeffCohen]

One thing about bootstrap that puzzles me, there's no horizontal padding in the grid, so I often get buttons that are feel too "high" up against whatever's above it.

But the bootstrap site itself never has that problem...? Any idea why?

[raghubetina]

It's for when rows are used for layout and you don't want any space between them. You are expected to define your own "buffer" class and tack it on, I guess. Seems like they could include such a class for easy usage, never understood why they don't.

The bootstrap site itself has a massive custom stylesheet on top of Bootstrap :) It's worth a read, actually:

http://getbootstrap.com/assets/css/docs.css

[JeffCohen]

Hmm, we could go down the road of providing a starter.css.scss, like how scaffold generates a css file. But not sure it's worth the effort for a learning tool or not.

[raghubetina]

That's a cool idea! It could simply start with a .spacer class. That's one thing I add to every single Bootstrap app.

http://stackoverflow.com/questions/10691442/adding-a-simple-spacer-to-twitter-bootstrap

[JeffCohen]

Wouldn't it be better to do this?

.row { margin-bottom: 40px; }

That way it gets applied to every row automatically without affecting the top row?

[raghubetina]

Maybe, but when used for layout, you very often don't want rows to have space between them. Viz the endless number of sites that are high-contrast sections one after the other:

http://www.android.com/kitkat/

http://www.kitkat.com/

Those aren't the greatest examples due to their funny scrolling behavior, but I thought you'd like them :)

Now that I think about it, it makes more sense to me to, if anything, do something like [class^="col"] { margin-bottom: 40px }, since cols (née spans) are what usually hold content (and thus require spacing).

[JeffCohen]

ok that's some crazy css syntax right there

[raghubetina]

Touché. Probably the simplest solution is to do something like the .spacer class that people can sprinkle in as needed. Though maybe a better name. .spaced? .gutter?

<div class="row spaced"> <div class="row gutter">

Meh.