0

I have a component with the following markup to use the advantages of the Bootstrap grid.

<div class="row">
  <div class="col-6">...</div>
  <div class="col-6">...</div>
</div>

But I had someone raise the concern that this means the component's parent then needs to deal with the row's negative margins. The component should be wrapped in a container class to be a "complete" Bootstrap grid layout.

<div class="container">
  <div class="row">
    <div class="col-6">...</div>
    <div class="col-6">...</div>
  </div>
</div>

But, if I do this, the child component now has outer gutters, which are unnecessary to this small component and creates double gutters when combined with a parent's col or container and the child's container.

Per this answer, Bootstrap doesn't trivially let you remove these outer gutters but preserve the inner gutters.

Is it possible to use Bootstrap in a component's styles without its parent having to know and deal with its child's padding choices?

MattTreichel
  • 1,418
  • 3
  • 18
  • 35

1 Answers1

1

The purpose of container class is to help you center your contents. If your parent element was already defined with a .container, I do not see any reason to nest a direct child with another .container. Like you said, it only adds double "outer gutters".

Taken from https://getbootstrap.com/docs/4.0/layout/grid/ :

Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.

The answer you had hyperlinked refers to bootstrap 3 and not bootstrap 4. Bootstrap 4 has more spacing utitilies

I really do not see a purpose of "removing outer gutters" because the purpose of the outer gutters is to center your contents.

However, if you requirements really need so, you can actually do so with px-0 class in bootstrap 4.

Using .container and .row

enter image description here

  • green dashed line is .container
  • red line is .row
  • as observed, containers has 15px left and right padding
  • row has -15px left and right margin
  • col-6 has 15px left margin. Hence, 15px - 15px + 15px = 15px

Using only .row (hence, with negative margins)

enter image description here

  • row has -15px left and right margin
  • col-6 has 15px left and right margin
  • (-15px) + 15px = 0px. Hence, there is no "outer gutter width" at all.

simple codepen example

terahertz
  • 2,915
  • 1
  • 21
  • 33
  • This is a good outline, but if I don't use a `.container` or use `.px-0`, `.row` being the top level Bootstrap class of a component will give it negative margins that need to be dealt with by its parent. – MattTreichel Jul 27 '19 at 17:26
  • `negative margins that need to be dealt with by its parent.` are you sure you don't have custom CSS defined by yourself or your team in other stylesheets that has overriden the default margins in either .row or .col-6?. Do double check using your developer console. I have updated my answer to show that using .row only with .col shouldn't caused "negative margin" issue. – terahertz Jul 28 '19 at 08:46
  • waht about use .no-gutters? – Eliseo Jul 28 '19 at 10:38
  • I guess it's true that the negative margins shouldn't cause an issue if you're using `.col` within. I guess I'm thinking if you were to use a component independently on the top-level, the negative margins would cause awkward scrolling behaviour. But then really, you should be expected to `.container`ize any Bootstrap thing at the top-level. I guess these examples are kind of accurate to all the possibilities and helped me logic it out. – MattTreichel Jul 29 '19 at 12:11
  • @Eliseo .row.no-gutters removes the inner gutters as well, which isn't really desired. – MattTreichel Jul 29 '19 at 12:12