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

Asked

Viewed 407 times

4

I have 2 input-group, they are "glued", I want to give a blank space, follows code below:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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 example of Jsfiddle

html5 bootstrap-3

2 answers

2

You can set a margin for the input-group

.input-group {
    margin: 5px;
}

  • Hi @Rafael Acioly, in that case I don’t want to move his height.

  • how to move height? margin only adds MARGINS to the element; that is; 5px above, below and sides.

  • You can only change from the side and not from the top and the bottom ?

2

Can use the br/, as an alternative.

<br/><br/>
<div class="input-group" style="width:1px">

Browser other questions tagged html5 bootstrap-3

You are not signed in. Login or sign up in order to post.