CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Sam Holder
Sam Holder

Reputation: 32936

Add space between input and button in bootstrap

I am using bootstrap 3 and have this HTML:

<body>
    <div class="container body-content">
        <div class="row">
            <div class="col-lg-6">
                <label class="control-label" for="parameterValue">sdsd</label>
                <div class="input-group">
                    <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
                    <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
                </div>
                <label class="control-label" for="parameterValue">sdsd</label>
                <div class="input-group">
                    <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
                    <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
                </div>
                <button class="btn btn-default btn-primary" data-bind="click: $root.completeStep">Complete Step</button>
            </div>
        </div>
    </div>
</body>

fiddle

I want the final button to be spaced away vertically from the input-group div and not touching it.

An example I found using a form has the button spaced out: fiddle

and this is how I'd like my button. How can I get that?

Upvotes: 8

Views: 23780

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99464

Simply wrap each pair of <label> and <div class="input-group"> by a <div> having .form-group class. (Or just wrap the last pair if needed so)

The reason is that twitter bootstrap applies a margin-bottom of 15px to .form-group. You could also do this manually by giving the <button> a top margin or giving the last input a bottom margin.

EXAMPLE HERE

<div class="container body-content">
    <div class="row">
        <div class="col-lg-6">

            <div class="form-group">
                <label class="control-label" for="parameterValue">sdsd</label>
                <div class="input-group">
                    <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
                    <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
                </div>                    
            </div>

            <div class="form-group">
                <label class="control-label" for="parameterValue">sdsd</label>
                <div class="input-group">
                    <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
                    <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
                </div>                    
            </div>

            <button class="btn btn-default btn-primary" data-bind="click: $root.completeStep">Complete Step</button>

        </div>
    </div>
</div>

Upvotes: 14

Related Questions