CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Daniel
Daniel

Reputation: 57

Bootstrap input-group issues

I checked other solutions out there and nothing seems to work. I tried that width:200px and still same problem. My form was pretty old so I wanted to change it to bootstrap version. Others, while using input-group have like 1px differece. For me is way bigger.
I will leave the form here maybe something will work for me.

.form-control{
  margin-top:10px;
  margin-bottom: 10px;
}
label{
  color:#03A0D3;
  font-size: 15px;
  margin-right:10px;
}
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<form id="updatesettings" method="post">

  <label for="link">WEBSITE LINK</label>
  <div class="input-group">
    <input type="text" name="link" class="form-control" placeholder="LINK">
    <span class="input-group-addon"><span class="fa fa-check green"></span></span>
  </div>

  <label for="email">E-MAIL</label>
  <div class="input-group">
    <input type="text" name="email" class="form-control" placeholder="E-MAIL">
    <span class="input-group-addon"><i class="fa fa-check green"></i></span>
  </div>

  <div class="btn-group">
    <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">English><span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#"><span class="flag flag-usa flag-1x"></span> English</a></li>
      <li><a href="#"><span class="flag flag-rou flag-1x"></span> Romana</a></li>
    </ul>
  </div>
  <button type="submit" class="btn btn-primary">Save</button>
</form>

If I try to add some margin between the inputs and other elements of the form it is not working. I would like to keep the labels close to inputs and at the top of label a 10px margin. This is what it looks for me

Upvotes: 0

Views: 2149

Answers (1)

neophyte
neophyte

Reputation: 6626

Give the margins to the class="input-group"..not to the form control class. That's breaking the layout.

Working example

.input-group{
  margin-top: 10px;
  margin-bottom: 10px;
}
label{
  color:#03A0D3;
  font-size: 15px;
  margin-right:10px;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <form id="updatesettings" method="post">

              <label for="link">WEBSITE LINK</label>
              <div class="input-group">
              <input type="text" name="link" class="form-control" placeholder="LINK">
              <span class="input-group-addon" id="ln"><i  class="fa fa-times red"></i></span>
             
            </div>

              <label for="email">E-MAIL</label>
              <div class="input-group">
              <input type="text" name="email" class="form-control" placeholder="E-MAIL">
              <span class="input-group-addon"><i class="fa fa-check green"></i></span>
             </div>

            <div class="btn-group">
              <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">English><span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#"><span class="flag flag-usa flag-1x"></span> English</a></li>
                <li><a href="#"><span class="flag flag-rou flag-1x"></span> Romana</a></li>
              </ul>
            </div>
		       <button type="submit" class="btn btn-primary">Save</button>
		      </form>

Upvotes: 3

Related Questions