Best way to give a newline

Question

I have a form that looks like this:

    <form class="navbar-form text-center">
        <input type="text" class="span2">
        <p></p>
        <input type="text" class="span2">
        <p></p>
        ...
        <button type="submit" class="btn btn-success">I'm Done</button>
    </form>

Right now I'm using the <p></p> block, but that seems far from elegant to me.

I'd like to know if there was a better way because I searched a bit and couldn't find one. Thanks!

EDIT: I'd like to avoid additional HTML if possible like br and p tags.

.span { margin-bottom: 1em; } – Tamil Selvan C Apr 30 '13 at 05:19 — Tamil Selvan C, Apr 30 '13 at 05:19

Danny Beckett · Answer 1 · 2013-04-30T05:25:28.163

2

Very simple answer: use a breaking space.

For example:

a
<br>
b

Will render like this:

a
b

If you want a space between your elements, just add another <br>, like so:

a
<br>
<br>
b

Which will render like this:

a

b

edited Apr 30 '13 at 05:25

answered Apr 30 '13 at 05:15

Danny Beckett

20,529
24
107
134

You can also make new lines with `\n` too – classicjonesynz Apr 30 '13 at 05:19
Good idea, but the space is either too little or too much with a single or double br. I know I'm really picky... – Apr 30 '13 at 05:20
@Killrawr `\n` is different to `
`. `\n` renders a new-line only in the source code. `
` renders a new-line to the screen. – Danny Beckett Apr 30 '13 at 05:20
@Xaranke Take a look at the accepted answer here: [How to change height of a
?](http://stackoverflow.com/q/1409649) – Danny Beckett Apr 30 '13 at 05:21

score 1 · Answer 2 · answered Apr 30 '13 at 05:18

1

See http://twitter.github.io/bootstrap/base-css.html#forms

<div class="controls controls-row">
  <input type="text" >
</div>

answered Apr 30 '13 at 05:18

Tom Carchrae

6,398
2
37
36

This would be excellent for larger forms, but I think that I'll be working with a dozen elements at max so it feels like overkill. Thanks for the link and I will keep this in mind. – Apr 30 '13 at 05:33
this is the recommended way of breaking up bootstrap forms! :) you're generally not supposed to use any kind of 'fudge' HTML code with bootstrap. – Tom Carchrae Apr 30 '13 at 14:47

score 1 · Accepted Answer · answered Apr 30 '13 at 05:23

1

As a pure CSS solution, you could use:

input.span2 {
    display: block;
    margin-bottom: 10px;
}

answered Apr 30 '13 at 05:23

Danny Beckett

20,529
24
107
134

score 1 · Answer 4 · answered Apr 30 '13 at 05:23

1

You are correct in thinking that you shouldn't add additional HTML purely for presentation that adds no semantic value. CSS Is on your side.

.span2 {
    display: block;
    margin-bottom: 25px;
}

http://jsfiddle.net/AGp2g/

answered Apr 30 '13 at 05:23

Explosion Pills

188,624
52
326
405

Best way to give a newline

4 Answers4