CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Souvik Ray
Souvik Ray

Reputation: 3018

How to align labels of multiple input fields vertically?

I have two input fields for the user to fill namely username and password. This is how it looks like

enter image description here

Here is the code below for the same

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="control-label col-sm-2" for="email">Email:</label>
          <div class="col-sm-3">
            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2" for="pwd">Password:</label>
          <div class="col-sm-3">          
            <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
          </div>
        </div>
      </form>
    </div>
    
    </body>
    </html>

Now I want the Email and Password to be aligned vertically just like the input fields are aligned.

I read about form-control-static but I am unable to see the effect here. I tried using it for the classes for Email and Password something like

<label class="control-label col-sm-2 form-control-static" for="pwd">Password:</label>

But I do not see any change. What am I doing wrong?

Note: I am using Bootstrap 3

Upvotes: 0

Views: 2430

Answers (2)

Renzo Calla
Renzo Calla

Reputation: 7696

Your code seems to work as expected..., try verifying if you have made any css changes...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<body>

<div class="container">
  <form class="form-horizontal">
    <div class="form-group">
      <label class=" col-sm-2 col-xs-3" for="email">Email:</label>
      <div class="col-sm-3 col-xs-3">
        <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
      </div>
    </div>
    <div class="form-group">
      <label class=" col-sm-2 col-xs-3" for="pwd">Password:</label>
      <div class="col-sm-3 col-xs-3">          
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
      </div>
    </div>
  </form>
</div>
UPDATE the control-label class is by default aligning items to the right on bigger screens.. to solve it you can remove it.. or use bootstrap alingment classes...

Upvotes: 1

Charu Maheshwari
Charu Maheshwari

Reputation: 1643

The above style is coming from Bootstrap 3 only, "Text-align:right"

@media (min-width: 768px)
.form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
}

If you want to align labels to left, override the above property in your code as follows: 

@media (min-width: 768px)
    .form-horizontal .control-label {
        text-align: left;
    }

Upvotes: 1

Related Questions