how to give space for every row (CSS issue)

Question

Below my output there is no space for every Row, how to give space for every row using Bootstrap CSS? please check the code

 <div class="form-group" >

                       <div class="col-sm-2">
                           <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                       </div>
                   </div>

Thanks in Advance

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>


<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>





<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>





<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

I think your html structure is not correct according to bootstrap, however, add `clearfix` to each `.form-group`. — Alex, Dec 22 '15 at 10:58
Possible duplicate of [Twitter Bootstrap - add top space between rows](http://stackoverflow.com/questions/10085723/twitter-bootstrap-add-top-space-between-rows) — Anwar, Dec 22 '15 at 11:13

score 3 · Accepted Answer · answered Dec 22 '15 at 11:36

3

.form-group > * {
           margin:5px;
        }

answered Dec 22 '15 at 11:36

Suresh B

1,658
1
17
35

score 0 · Answer 2 · answered Dec 22 '15 at 11:25

The proper markup should be (using your col width as an example):

    <div class="row">
        <div class="col-sm-2">
            <div class="form-group">
                <label for="input1">Some label</label>
                <input id="input1" placeholder="Type something…" type="text">
            </div>
            <div class="form-group">
                <label for="input2">Some label 2</label>
                <input id="input2" placeholder="Type something…" type="text">
            </div>
        </div>
    </div>

As it stands, you don't have any rows defined.

how to give space for every row (CSS issue)

2 Answers2