Bootstrap container and row class

Forum /

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?

9 years ago

tadatuta

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

9 years ago

mrttl

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?

9 years ago

tadatuta

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>

9 years ago

mrttl

Perfect! Thank you so much for the awesome help!

In order to leave a comment you need to login.