Bootstrap 4 create div before column

Question

I'm using the new Bootstrap 4 and I need to create a DIV before a bootstrap column in order to hide or show the columns when a button is pressed.

So what I need is something like this:

<div class="container">
    <div class="row">
        <div class="menu-page" data-page="1">
            <div class="col-lg-6" style="background-color: red; height: 200px;">
            </div>
            <div class="col-lg-6" style="background-color: yellow; height: 200px;">
            </div>
        </div>
        <div class="menu-page" data-page="2">
            <div class="col-lg-6" style="background-color: red; height: 200px;">
            </div>
            <div class="col-lg-6" style="background-color: yellow; height: 200px;">
            </div>
        </div>
    </div>
</div>

But when I create this, the col-lg-6 divs lose all the bootstrap properties.

I need this to when a button is pressed it shows, using javascript, the div with the data-page associated to that button and hides the others.

How can I create this? Or there is a more simple way to do this?

Maybe `container > row > 2 times col-12 (where menu-page is) > row > 2 times col-lg-6`? — Klooven, May 07 '18 at 13:04
make two `.row`s instead of one, and add the `.menu-page` class and the `data-page` attribute to the `.row`s. Then you don't need wrapping divs and lay-out will not be messed up at all. — Brainfeeder, May 07 '18 at 13:05
Why don’t you give an extra class to your column? You could hide that. — Serge Inácio, May 07 '18 at 13:14

score 2 · Accepted Answer · answered May 07 '18 at 13:09

Make two .rows instead of one, and add the .menu-page class and the data-page attribute to the .rows. Then you don't need wrapping divs and lay-out will not be messed up at all.

<div class="container">
   <div class="row menu-page" data-page="1">
        <div class="col-lg-6" style="background-color: red; height: 200px;">
        </div>
        <div class="col-lg-6" style="background-color: yellow; height: 200px;">
        </div>
    </div>
    <div class="row menu-page" data-page="2">
        <div class="col-lg-6" style="background-color: red; height: 200px;">
        </div>
        <div class="col-lg-6" style="background-color: yellow; height: 200px;">
        </div>
    </div>
</div>

score 0 · Answer 2 · answered May 07 '18 at 13:07

This would help you achieve the same style as you want it.

<div class="container">
   <div class="row">
      <div class="menu-page col-lg-12" data-page="2">
         <div class="col-lg-6" style="background-color: red; height: 200px;">
         </div>
         <div class="col-lg-6" style="background-color: yellow; height: 200px;">
          </div>
       </div>
    </div>
</div>

score 0 · Answer 3 · answered May 07 '18 at 13:07

try this :

<div class="container">
    <div class="row" data-page="1">
        <div class="menu-page col-lg-12">
            <div class="col-lg-6" style="background-color: red; height: 200px;">
            </div>
            <div class="col-lg-6" style="background-color: yellow; height: 200px;">
            </div>
        </div>
    </div>
    <div class="row" data-page="2">
        <div class="menu-page col-lg-12">
            <div class="col-lg-6" style="background-color: red; height: 200px;">
            </div>
            <div class="col-lg-6" style="background-color: yellow; height: 200px;">
            </div>
        </div>
    </div>
</div>

score 0 · Answer 4 · answered May 07 '18 at 13:12

Actually Bootstrap 4 ignores any new class after row. It only accepts bootstrap col but if still you want that class then you can add following css:

.menu-page {
    display: flex;
    width: 100%;
}

And if you want different style in mobile then you can change the css

Bootstrap 4 create div before column

4 Answers4