CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sajan Parikh
Sajan Parikh

Reputation: 4940

Why No Line Break After Input In Bootstrap

Here is the code that I'm using for a simple form. I pretty much copied the entire form from the example on Bootstrap's website, and removed all controls except a text input and the submit button.

<form>
    <fieldset>
        <legend>About You</legend>
        <input class="input-medium" type="text" placeholder="First Name">
        <button type="submit" class="btn">Get Started</button>
    </fieldset>
</form>

For some reason, the submit button doesn't drop to a new line when it comes right after an input.

Demonstration of it not working.

You'll see, if I just add the checkbox w/ label back from the example, the submit button drops to a new line as expected.

<form>
    <fieldset>
        <legend>About You</legend>
        <input class="input-medium" type="text" placeholder="First Name">
        <label class="checkbox">
            <input type="checkbox"> Check me out
        </label>
        <button type="submit" class="btn">Get Started</button>
    </fieldset>
</form>

Working when button does not come after text input.

What am I doing wrong? I'm using the latest bootstrap CSS and JS (2.3.2), loaded from BootstrapCDN.com.

Upvotes: 6

Views: 19784

Answers (1)

Artyom Neustroev
Artyom Neustroev

Reputation: 8715

Both <input> and <button> have display: inline-block.
<label> has display: block and forces button to be rendered on the next line.

The workaround for displaying button in the next line is simply wrap it in an element with display: block, i.e. in a <div> element.
Look at this FIDDLE DEMO

Upvotes: 10

Related Questions