CODEWITHSUNDEEP
html
thimal deemantha
thimal deemantha

Reputation: 193

bootstrap form-horizontal left align

Can someone tell me how to align the username label to the left please. 

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-sm-3" for="username">Username</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="username" placeholder="Enter username">
        </div>
    </div>
</form>

Upvotes: 3

Views: 21780

Answers (4)

Sergey Nudnov
Sergey Nudnov

Reputation: 1429

I would suggest adding an extra class to your CSS:

.form-horizontal .control-label-left {
    text-align: left;
}

Then use it for your labels:

<label class="control-label control-label-left col-sm-3" for="username">Username</label>

Upvotes: 1

jitendra varshney
jitendra varshney

Reputation: 3562

need to remove form-horizontal

<form >
    <div class="form-group">
        <label class="control-label col-sm-3"for="username">Username</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="username" placeholder="Enter username">
        </div>
    </div>
</form>

Note:if you want any text-left or right then use text-left or text-right class but your code will work fine without these classes.

read this documentation

http://getbootstrap.com/css/

you may further use grid-framework.less file for your view it will manage data in row(for more controlling)

Upvotes: 4

Blesswin rince
Blesswin rince

Reputation: 1

Remove the class "form-horizontal" from the form tag. It provides the additional right align

Your html should be:

<form>
    <div class="form-group">
        <label class="control-label col-sm-3" for="username">Username</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="username" placeholder="Enter username">
        </div>
    </div>
</form>

Reference: http://www.w3schools.com/bootstrap/bootstrap_forms.asp

Upvotes: 0

Pingbeat
Pingbeat

Reputation: 305

You could float the label to the left by adding a extra class to it and then float it via CSS.

 <label class="control-label col-sm-3 label" for="username">Username</label>

.label { float: left; }

https://jsfiddle.net/p0pob33d/

Upvotes: 2

Related Questions