1

I don't know how to use Bootstrap Grid classes combined with BEM. Especially I mean container, row and col- classes. I want to do this in the best semantic way too.

I found a question like that in: How to properly mix Bootstrap and BEM? but there was not a satisfactory answer there.

when the "header" is a block I should do like this?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<header class="header">
  <div class="container"> 
 <div class="row justify-content-center">
   <div class="col-xl-3">
     <div class="header__logo">...</div>
   </div>
   <div class="col-xl-3">
     <div class="header__logo">...</div>
   </div>
 </div>
  </div>
</header>

this looks like a lot of unnecessary nesting

Ayush Kumar
  • 833
  • 2
  • 13
  • 30
Mateusz Daniluk
  • 115
  • 2
  • 9
  • One suggestion, `
    ` should be the parent and `container` should be a direct child of `
    ` because `container` helps to wrap content.
     – OM PRAKASH May 10 '19 at 07:23
  • Thanks, you're absolutely right – Mateusz Daniluk May 10 '19 at 07:44
  • I don't think so @OMPRAKASH. `
    ` doesn't have to be the parent. You can use it anywhere that makes sense. The example in OP is completely fine. It just means the header is the header of the container. When the container is an article for example. Then `
    ` means article's header.
     – David Liang May 10 '19 at 07:51
  • Yes @David Liang, You're right. I just meant it as the page's header. – OM PRAKASH May 10 '19 at 08:00

0 Answers0