Bootstrap 3 .control-label width?

Question

I have this kind of form in bootstrap 3 (fiddle: http://jsfiddle.net/52VtD/2052/)

<div class="container-full">         
<form class="form-horizontal">
<fieldset>

<!-- Text input-->
<div class="form-group">
    <label class="control-label col-sm-4" for="name">Name</label>
    <div class="col-sm-8 col-md-4">
        <input id="name" value="Johnatan Dodsworth" />
    </div>
</div>
<!-- Text input-->
<div class="form-group">
    <label class="col-md-4 control-label" for="language">Based On</label>
    <div class="col-md-4">
        <select id="language">
            <option selected>English</option>
            <option>German</option>
        </select>
    </div>
</div>

<!-- Select Basic -->
<div class="form-group">
    <label class="col-md-4 control-label" for="language">Type</label>
    <div class="col-md-4">
        <select id="language">
            <option selected>English</option>
            <option>German</option>
        </select>
    </div>
</div>

<!-- Button -->
<div class="form-group">
    <div class="col-md-9">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary pull-right"> <span class="k-icon k-si-plus"></span> Add</button>
    </div>
</div>

</fieldset>
</form>
</div>

I think i have problem with .control-label because my form does not goes to the middle of the screen, and i can not adjut button to line in with last select input? Or just aligh form in the middle of the page, i have tried to change col-md and everything! What is witdh of .control-label class? Does anybody have solution?

Scrocchi Scrocchi · Accepted Answer · 2014-01-26T18:08:03

The problem isn't the width of .control-label, it's the width of the columns, the bootstrap 3 default grid has 12 columns, if you assign col-XX-6 to .control-label it gets the first 6 colmuns (to the middle of the screen), and the same thing happend with the inputs.

you can also use text-align:center on the button container to make it centered.

See it on bootply

<div class="container-full">         
<form class="form-horizontal">
<fieldset>

<!-- Text input-->
<div class="form-group">
    <label class="control-label col-sm-6" for="name">Name</label>
    <div class="col-sm-6">
        <input id="name" value="Johnatan Dodsworth">
    </div>
</div>
<!-- Text input-->
<div class="form-group">
    <label class="col-sm-6 control-label" for="language">Based On</label>
    <div class="col-sm-6">
        <select id="language">
            <option selected="">English</option>
            <option>German</option>
        </select>
    </div>
</div>

<!-- Select Basic -->
<div class="form-group">
    <label class="col-sm-6 control-label" for="language">Type</label>
    <div class="col-sm-6">
        <select id="language">
            <option selected="">English</option>
            <option>German</option>
        </select>
    </div>
</div>

<!-- Button -->
<div class="form-group">
    <div class="col-sm-12 centered">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary "> <span class="k-icon k-si-plus"></span> Add</button>
    </div>
</div>

</fieldset>
</form>
</div>

`

Bootstrap 3 .control-label width?

2 Answers