Search code examples
csstwitter-bootstrapinputiconsadminlte

Bootstrap 3 - Space between inputs with Icons and custom width

I'm facing a problem I don't really know how to deal with. I'm working on BootStrap 3 and i'm trying to make some inline forms because it is more user-friendly than a full vertical form (I don't want to scroll for ever)

I find some way to inline the normal inputs, but when it comes to the input with icons (font awesome), I can figure how to inline them, but they inline side to side without any space between them. Also, I don't figure out how to change their width as I would do with normal input (col-sm-4 for example).

I would like the "Email" and "Telephone" to be scaped and to change their width

Please have a look at my code and the following image explaining it: http://www.bootply.com/T8w3oRE3Sn

enter image description here

Solution

  • You were missing few things in the form group so I have wrapped things up. Hope it will help you :)

    Below is the working snippet:

    .myform .form-inline .input-group .input-group-addon{ width:20px;}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row myform">
  <div class="col-xs-12">
    <form name="myform" role="form" novalidate>

      <div class="form-inline ">
        <div class="form-group col-xs-6">
          <div class="input-group col-xs-12">
            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
            <input type="email" class="form-control" placeholder="Email de l'interlocuteur">
          </div>
        </div>
        <div class="form-group col-xs-6">
          <div class="input-group col-xs-12">
            <span class="input-group-addon"><i class="fa fa-phone"></i></span>
            <input type="email" class="form-control" placeholder="Téléphone de l'interlocuteur">
          </div>
        </div>
      </div>

    </form>
  </div>

</div>