Grid do not have margins in bootstrap

Question

I have a simple page with bootstrap, and I want to create a grid which is one-line or two-line on smaller screend, but I always get something incorrect: with show-grid option see screenshot 1:

Button's div and IsDescending's div doesn't take all height, so layout looks ugly.

Without show-grid see screenshot 2:

all paddings are missing, design is even more terrible than previous.

How can I achieve behaviour like on their page, when all margins are correct and everything is beautiful?

My markup for now is:

<div class="row show-grid">
    <div class="col-sm-5">
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">Query</span>
            <input asp-for="Query" type="text" class="form-control" placeholder="Query" name="query">
        </div>
    </div>
    <div class="col-sm-5">
        <div class="input-group">
            <span class="input-group-addon">Language</span>
            <select asp-for="Language" asp-items="@Model.Languages" name="language" class="form-control">
                <option disabled>Choose language</option>
            </select>
        </div>
    </div>
    <div class="col-sm-7">
        <div class="col-sm-8">
            <div class="input-group">
                <span class="input-group-addon">Sorting field</span>
                <select asp-for="SortField" asp-items="@Model.SortFields" name="sortField" class="form-control">
                    <option disabled>Choose sorting field</option>
                </select>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="input-group">
                Is Descending: <input asp-for="IsDescending" />
            </div>
        </div>
    </div>
    <div class="col-sm-1">
        <button type="submit" id="searchButton" class="btn btn-default"><i class="fa fa-search fa-fw"></i></button>
    </div>
</div>

Answer 1

Rules to Bootstrap:

Use rows and columns alternating
Rows have a negative margin to ensure that the columns respect the containers width.

container
|   row
|   |   column
|   |   |   row
|   |   |   |   column
|   |   |   |   column
|   |   |   row
|   |   |   |   column
|   |   |   |   column
|   |   column

---

Always include col-xs-* on columns
This is to prevent floating issues. If your column is supposed to be 12 wide anyways dont just ignore the col-xs-12

<div class="row">
  <div class="col-xs-12 col-md-6">
      Some stuff
  </div>
</div>

---

Mobile first
Start with the smallest screen size. Go from xs < sm < md < lg and you should be all good!

<div class="row">
  <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      Some stuff
  </div>
</div>

---

Small columns serve as larger columns
A sm column does serve as a md column as well, if not specified otherwise.

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-6">
      This is the same
  </div>

  <div class="col-xs-12 col-sm-6">
      as this one
  </div>
</div>

---

And at last: Do not style rows and columns!
Feel free to add classes to modify them, but do not override them in any way!

Bad example:

.row {
  border: 5px solid pink;
  margin: 0 10px;
}

<div class="row">
  <div class="col-xs-12">
    This is a no-go!
  </div>
</div>

Good example

.pink-bordered {
  border: 5px solid pink;
  margin: 0 10px;
}

<div class="row pink-bordered">
  <div class="col-xs-12">
    Totally fine
  </div>
</div>

Answer 2

At the moment, there are several things wrong with your structure so it seems like going over some basics of Bootstrap will help you move toward a nicer looking design. You should have columns that add up to 12 within each row. For example:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <!-- left column -->
        </div>
        <div class="col-sm-6">
            <!-- right column -->
        </div>
    </div>
</div>

If you want elements that divide those columns further, you will need new rows, and the children of those rows should also add up to 12 (or less than 12 if you want empty space to the right). That might look something like this:

<div class="container">
    <div class="row">
        <div class="col-sm-6">

            <!-- left column -->
            <div class="row"><!-- Nested Row. Children columns add up to 12 -->
                <div class="col-sm-7">
                    7/12 of the left side
                </div>
                <div class="col-sm-5">
                    5/12 of the left side
                </div>
            </div>

        </div>
        <div class="col-sm-6">
            <!-- right column -->
        </div>
    </div>
</div>

Here's a final example with background colors and a screenshot to visualize it:

<div class="container">
    <div class="row">

        <div class="col-sm-6" style="background-color:gray;">
            <h3>Left Column</h3>
            <div class="row"><!-- Nested Row. Children columns add up to 12 -->
                <div class="col-sm-7" style="background-color:lightblue;">
                    This is 7/12 of the left side
                </div>
                <div class="col-sm-5" style="background-color:lightgreen;">
                    This is 5/12 of the left side
                </div>
            </div>
        </div>

        <div class="col-sm-6" style="background-color:orange;">
            <h3>Right Column</h3>
            <div class="row"><!-- Nested Row. Children columns add up to 12 -->
                <div class="col-sm-4" style="background-color:lightblue;">
                    This is 4/12 of the right side
                </div>
                <div class="col-sm-8" style="background-color:lightgreen;">
                    This is 8/12 of the right side
                </div>
            </div>
        </div>

    </div>
</div>

Hopefully this will help you understand how to have structure your elements. Also, as you pointed out, rows don't have any space between them by default so you can add space between rows with some simple css such as

.row { 
  margin-top: 10px;
  margin-bottom: 20px;
}

One last tip: when using inputs, checkboxes, selects, etc., I always look at the classes and structure being used in the Bootstrap docs here. Without using the correct classes and DOM element structure, things won't look quite right. Bootstrap takes practice so good luck!

Answer 3

In a row, there are 12 cols, so calculate... and put in a container.

test this

https://jsfiddle.net/marcDX/33v44bw0/

    <div class="container">
  <div class="row show-grid">
    <div class="col-sm-6 one">
      <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">Query</span>
        <input asp-for="Query" type="text" class="form-control" placeholder="Query" name="query">
      </div>
    </div>
    <div class="col-sm-6 one">
      <div class="input-group">
        <span class="input-group-addon">Language</span>
        <select asp-for="Language" asp-items="@Model.Languages" name="language" class="form-control">
          <option disabled>Choose language</option>
        </select>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6 one">
      <div class="input-group">
        <span class="input-group-addon">Sorting field</span>
        <select asp-for="SortField" asp-items="@Model.SortFields" name="sortField" class="form-control">
          <option disabled>Choose sorting field</option>
        </select>
      </div>
    </div>
    <div class="col-sm-5 one">
      <div class="input-group">
        Is Descending:
        <input asp-for="IsDescending" />
      </div>
    </div>
    <div class="col-sm-1 one">
      <button type="submit" id="searchButton" class="btn btn-default"><i class="fa fa-search fa-fw"></i></button>
    </div>
  </div>

and CSS to be happy with the little screens

    .one {
  margin-top: 20px;
}