Alex Zhukovskiy Alex Zhukovskiy - 7 months ago 14
HTML Question

Grid do not have margins in bootstrap

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:
enter image description here

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

Without show-grid see screenshot 2:enter image description here

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

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-cs-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 contain larger columns
A sm column does contain 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>
Comments