1

According to this answer I'm trying to use the new default block editor of wordpress to set the bootstrap classes on the content of the blocks. I'm using the group block to set the container and another group block to set the row that are required from the grid of bootstrap. My question is how I can set the columns inside the second block group that will contain the columns? If I use paragraph the result isn't what I expect, and I have no idea of how to create columns inside a group block.

If you look at the screen you can see that the columns classes are set on the tag <p>, I need instead to add two divs with the classes. NB: I was using the anchor field of the block editor to set the classes, but I've fixed this using the class field instead.

Thanks for the help.

enter image description here

0

Inside your .row container choose a "Columns Block" instead of a paragraph block. Each column can be assigned the desired bootstrap CSS class. It will look like this:

<div class="wp-block-group container">
   <div class="wp-block-group__inner-container">
      <div class="wp-block-group row">
         <div class="wp-block-group__inner-container">
            <div class="wp-block-columns">
               <div class="wp-block-column col-sm-12 col-md-6 col-lg-6">
                  <p>Text Here</p>
               </div>
               <div class="wp-block-column col-sm-12 col-md-6 col-lg-6">
                  <p>More Text</p>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

The "Columns Block" is already a flex container by default, so in this case you may not even need the .row container. Or you could give the .row class to the "Columns Block" itself.

  • I need the row to reflect the bootstrap grid layout. I will give a try, thank you for the help – sialfa Dec 6 '19 at 22:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.