CODEWITHSUNDEEP
csstwitter-bootstrap
Mahtab Alam
Mahtab Alam

Reputation: 627

Aligning the Bootstrap Form Labels

I have this Bootstrap horizontal form but the problem is label text is not aligned . How can I align the label text. 

 <!DOCTYPE HTML>
 <html>

    <head>
    <link  rel="stylesheet"  href="bootstrap/css/bootstrap.min.css" />  
    </head>

    <body>

        <div class="container">            
            <div class="row">
                <div class="col-md-12">

                 <h3>Signup Form</h3><hr/>
                 <form class="form-horizontal" role="form">

                    <div class="form-group">
                      <label for="username" class="col-sm-2 control-label">Username</label>
                        <div class="col-sm-4">
                        <input type="text" placeholder="Your Username ..." class="form-control"/>
                        </div>
                    </div>

                    <div class="form-group">
                      <label for="email" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-4">
                        <input type="email" placeholder="Your Email ..." class="form-control"/>
                        </div>
                    </div>

                 </form>

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

        <script src="bootstrap/js/jquery-1.11.3.js"></script> 
        <script src="bootstrap/js/bootstrap.min.js"></script>         
    </body>

</html>

enter image description here

I want Email label to be aligned with Username label

Upvotes: 0

Views: 5142

Answers (3)

Amit singh
Amit singh

Reputation: 2036

simply use this.

CSS:

.control-label {
  text-align:left!important;
}

Upvotes: 0

Kamran Ahmed
Kamran Ahmed

Reputation: 7761

It is aligned right by default in Bootstrap stylesheet, you can give your form and id and add something like this to your stylesheet:

#signup-form label {
 text-align: left;
}

This will align all the labels in your form to left, you may modify the selector to your needs to limit the scope of this style.

Working sample at JSBin.

Upvotes: 1

Mofarjul Molla
Mofarjul Molla

Reputation: 114

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

Upvotes: 0

Related Questions