Buttons run together in Bootstrap 2.0.1

Question

I'm using Bootstrap 2.0.1, and in my pages I often have a couple of buttons next to each other:

<a class="btn btn-primary btn-large x-create-quiz">Create Quiz</a>
<a class="btn x-cancel">Cancel</a></div>

The buttons render next to each other, with no spacing between them.

I've had to add a   between the two.

Looking at the source of the Twitter Bootstrap documention, they do the same thing, but get a small space between the buttons.

Any idea why? I'd prefer to eliminate the  . Could there be some enclosing <div> somewhere that provides the gap?

I've gotten the same results in Chrome and FireFox.

Answer 1

I had the same issue. I'm using node/express/jade and found that jade will remove any whitespace on delivery by default, resulting in something like this:

<button class="...">reset</button><button class="...">save</button>

Your buttons won't run together if there is whitespace between them. For jade you may explicitly add space via = ' ' between your buttons or choose to enable pretty printing:

app.set('view options', { pretty: true })

Hope this is of help to you, took me some time to realize this behavior...