Bootstrap way to add vertical space between the fields

Question

How can I add vertical space between the div's. Is there any bootstrap class I can add here? Any help?

Below is the snippet from my code:

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label class="control-label col-lg-4"> Project: </label>
            <div class="col-lg-8">
                @Html.TextBoxFor(model => model.detailsConfig.Project, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Project" })
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label class="control-label col-lg-4">Quantity:</label>
            <div class="col-lg-8">
                @Html.TextBoxFor(model => model.detailsConfig.Quantity, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Quantity" })
            </div>
        </div>
    </div>
</div>

Possible duplicate of [Twitter Bootstrap - add top space between rows](https://stackoverflow.com/questions/10085723/twitter-bootstrap-add-top-space-between-rows) — Rémy Testa, Aug 02 '17 at 13:06

score 4 · Answer 1 · answered Aug 02 '17 at 13:06

You need to use <div class="form-group"> as parents like this

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-group">
<div class="row">
<div class="col-md-12">
            <div class="col-md-6">
              
                    <label class="control-label col-lg-4"> Project: </label>
                    <div class="col-lg-8">
                        @Html.TextBoxFor(model => model.detailsConfig.Project, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Project" })
                    </div>
                    </div>
            </div>
            </div>

        </div>

  <div class="form-group">
     <div class="row">
     <div class="col-md-12">
            <div class="col-md-6">
              
                    <label class="control-label col-lg-4">Quantity:</label>
                    <div class="col-lg-8">
                        @Html.TextBoxFor(model => model.detailsConfig.Quantity, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Quantity" })
                    </div>
                </div>
            </div>
</div>
           </div>

score 1 · Accepted Answer · answered Aug 02 '17 at 13:06

1

There are no class in the bootstrap toolbox to do this.

So the best way to do it's to add a top-buffer class on your row.

.top-buffer{
  margin-top: 40px;
}

Here the codepen : https://codepen.io/boydow/pen/ayZeGW

answered Aug 02 '17 at 13:06

Rémy Testa

897
1
11
24

score 0 · Answer 3 · answered Aug 02 '17 at 13:52

You can add the class "mt-#" or to your divs to add top margin, where # is a number between 1-5, varying in lengths. If you want to add margin to the top and bottom, you can do "my-#." This class is part of Bootstrap documentation.

<div class="your-class mt-3">Your column</div>

score 0 · Answer 4 · answered May 03 '21 at 17:43

0

You could use this : <div class="d-flex align-content-around flex-wrap">

answered May 03 '21 at 17:43

Ridge

11
1

score 0 · Answer 5 · answered Jul 21 '23 at 12:57

0

I just found out about gutter. It can used both horizontally and vertiacally in the following way:

g-2
gx-2
gy-2

Bootstrap way to add vertical space between the fields

5 Answers5