css - create bootstrap columns inside editor group block

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.

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.

• css
• block-editor
• twitter-bootstrap

Share Improve this question asked Dec 5, 2019 at 11:28 sialfasialfa 3291010 silver badges2929 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.