Possible to make single div both a container and a row with Bootstrap mixins?

Question

In Bootstrap's grid system, the standard way to create a "row" is to use a markup like this:

<div class="container">
    <div class="row">
       ... columns here ...
    </div>
</div>

In our project we use LESS and mixins and semantic classes so this would usually look like:

<div class="content-wrapper">
    <div class="content">
       ...
    </div>
</div>

// LESS:
.content-wrapper {
    .container;
}

.content {
    .make-row();
}

However, those two DIVs are artificial, really, from the semantic point of view I only need one DIV. In Bootstrap, is there a way to somehow make it work with single containing DIV only? Obviously something like this doesn't work:

#content {
    // doesn't work
    .container;
    .make-row();
}

score 2 · Accepted Answer · edited May 23 '17 at 10:28

You do not explain, what is not working in your situation.

When you inspect the compiled CSS code, you will find:

#content {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: -15px;
  margin-right: -15px;
}

The above makes clear what happens. The margin-left and margin-right properties from your .make-row() (or even .row) mixins override the margin-left and margin-right properties of the .container which center your grid.

When you understand why the .row adds a negative margin you should consider if you do really need it. The negative margin play a role in nesting. Because of the .container has a padding of 15 pixels on each side (and Bootstrap uses the border-box) the .row (and columns) become smaller than the .container itself (the negative margin makes them the same width). When you nest a new row its width became 1 / x * (the width of the container - the padding of the container).

Depending of your needs, you can consider to skip the row and the padding of the .container:

#content {
    .container;
    padding-left: 0;
    padding-right: 0; 
}

Possible related:

Possible to make single div both a container and a row with Bootstrap mixins?

1 Answers1