CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Nelson
Nelson

Reputation: 383

how to give space for every row (CSS issue)

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>

Upvotes: 3

Views: 152

Answers (2)

Suresh B
Suresh B

Reputation: 1652

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

Upvotes: 3

JesseEarley
JesseEarley

Reputation: 1032

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.

Upvotes: 0

Related Questions