CODEWITHSUNDEEP
formstwitter-bootstrap-3inline
Ryan Salmons
Ryan Salmons

Reputation: 1459

Bootstrap 3 remove space between inline inputs

I am doing a simple inline form. How can I adjust the blank space in between each input form? I would like to have the inputs basically touching.

    <div class="row">
<form class="in-line" role="form">
<div class="col-md-3 col-md-offset-3">
    <div class="form-group">
        <input type="email" class="form-control input-lg" id="EmailInput" placeholder="Email Address">
    </div>
</div>
<div class="col-md-2">
    <div class ="form-group">
        <input type="text" class="form-control input-lg" placeholder="City">
    </div>
</div>
<div class="col-md-3">  
        <button class="btn btn-lg btn-success" type="button">Submit</button>
</form>
</div>

Upvotes: 4

Views: 4507

Answers (1)

Jamie Collingwood
Jamie Collingwood

Reputation: 689

The spacing is caused by Bootstraps inherent padding between grid columns. If you want the form elements to butt up against each other (left and right) you can just float container divs.

http://jsfiddle.net/2n9AH/1/

HTML

<div class="row">
    <div class="formElement">
        <input type="email" class="form-control input-lg" id="EmailInput" placeholder="Email Address">
    </div>
    <div class="formElement">
        <input type="text" class="form-control input-lg" placeholder="City">
    </div>
</div>

CSS

 .formElement {
    float:left;
    width:200px;
}

Upvotes: 3

Related Questions