RU
mrttl
mrttl
26 March 2017

How does BEM work with Bootstrap´s .container and .row classes? Say if I have a block called .design-news with a background image that spans the entire page and then a .container and .row under that block which would center my content, can I just keep the default classes or does it have to be .design-news__container and .design-news__row?

tadatuta
#tadatuta
26 March 2017

You may keep default classes, consider them as separate blocks.

mrttl
#mrttl
27 March 2017

OK so they not considered part of the block then right? Just so I understand you correctly.

<div class="design-news">
  <div class="container">
    <div class="row">
      <div class="design-news__foo">foo</div>
      <div class="design-news__bar">bar</div>
    </div>
  </div>
</div>

Is the OK way with BEM?

tadatuta
#tadatuta
27 March 2017

yes, they are blocks by them selves.

but you may mix them to semantic blocks as well:

<div class="design-news container">
    <div class="design-news__item row">
      <div class="design-news__foo">foo</div>
      <div class="design-news__bar">bar</div>
  </div>
</div>
mrttl
#mrttl
27 March 2017

Perfect! Thank you so much for the awesome help!