html5 – How to give a blank space between 2 input-group?

Question:

I have 2 input-group , they are "tacked together", I want to give a blank space, follow code below:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div class="panel panel-default">
  <div class="panel-heading">
  
    <div class="input-group" style="width:1px; float:left">
      <label class="input-group-btn">
        <span class="btn btn-primary" style="width:111px">
Teste1&hellip;
        </span>
      </label>
      <input type="text" style="background-color:white; width:239px;" class="form-control" value="Teste 1" readonly>
      <label class="input-group-btn" title="Teste 1">
        <span style="top:-0px" class="btn btn-danger glyphicon glyphicon-trash"></span>
      </label>
    </div>
    
    
    <div class="input-group" style="width:1px">
      <label class="input-group-btn">
        <span class="btn btn-primary" style="width:111px">
         Teste2&hellip;
        </span>
      </label>
      <input type="text" style="background-color:white; width:239px;" class="form-control" value="Teste 2" readonly>

      <label class="input-group-btn" title="Teste 2">
        <span style="top:-0px" class="btn btn-danger glyphicon glyphicon-trash"></span>
      </label>
    </div>

  </div>
  <div class="panel-body">...</div>
</div>

or JSFiddle example

Answer:

You can set a margin for the input-group

.input-group {
    margin: 5px;
}
Post Views: 2
Scroll to Top