CODEWITHSUNDEEP
csstwitter-bootstrap
sagesky36
sagesky36

Reputation: 4692

Bootstrap 3 horizontal form spacing

Is there any way to place the labels closer together to the controls using horizontal forms with the below code?

I've been experimenting with "pull-left", "pull-right", "nopadding" on different controls, but just can't seem to move them together more closely.

<div class="page-header">
        <h1>sample</h1>
    </div>
    <div class="container nopadding">
        <div class="row">
            <div class="form-group nopadding">
                <label for="recordId" class="col-sm-2 control-label">Record Id</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="recordId" placeholder="Record Id">
                </div>
            </div>
            <div class="form-group nopadding">
                <label for="id" class="col-sm-2 control-label">Id</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="id" placeholder="Password">
                </div>
            </div>
            <div class="form-group nopadding">
                <label for="familyName" class="col-sm-2 control-label">Family Name</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30">
                </div>
            </div>
        </div>
    </div>

Upvotes: 1

Views: 5174

Answers (2)

Cassie
Cassie

Reputation: 474

The width of the label is determined by the col-sm-2 classes attached to them. You could modify this to be col-sm-1 instead, but this could cause problems on smaller devices.

Though bootstrap recommends doing the horizontal forms similarly to the way you do them (see here), I don't feel like this approach allows for much flexibility in spacing.

Personally, I'd change the form to behave like this. Because you're declaring the widths yourself in the CSS, you can customize spacing as you wish. This may not collapse down well, but if you wish you can write further CSS to handle low-resolutions.

Upvotes: 0

MattD
MattD

Reputation: 4420

I think this is what you want.

FIDDLE

You can reduce the space between the labels and the inputs by adding a negative margin to the labels.

CSS:

label {
    margin-right: -20px;
}

HTML:

<div class="page-header">
        <h1>sample</h1>
    </div>
    <div class="container nopadding">
            <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="recordId" class="col-sm-2 control-label">Record Id</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="recordId" placeholder="Record Id"></input>
                </div>
            </div>
            <div class="form-group">
                <label for="id" class="col-sm-2 control-label">Id</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="id" placeholder="Password"></input>
                </div>
            </div>
            <div class="form-group">
                <label for="familyName" class="col-sm-2 control-label">Family Name</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30"></input>
                </div>
            </div>
        </form>
    </div>

Also, not sure why you had a div with class row on there. Should be a form tag. I've adjusted that in the HTML for my answer and Fiddle.

Upvotes: 2

Related Questions