Bootstrap 5 Page Builder

Building pages without coding

Back to Bootstrap 5 Page Builder Support

volodymirchudovskiy64446
volodymirchudovskiy64446

Hello. Thank you for your plugin. It's really cool. But I have a question how to add custom blocks which can be a container for another block. As example I have such block (block 1) https://ibb.co/Yyr9qnT and another one (block 2) https://ibb.co/ngk2zZs I want to put (block 2) inside (block 1) but when I drag and drop block on edit page I always get it outside https://ibb.co/PDNc4jV https://ibb.co/7nJqjdQ https://ibb.co/3v2Ts0d

How can I do it?

Vladimir
Vladimir

Hi!
Columns need to add the data-gjs-type="box" attribute.
I also added a minimum height style for convenience.

My example:

CustomBlock.add('my-first-block1', {
  label: 'Заголовок',
  category: 'Extra',
  content: `<div class="_h2 _uppercase">Заголовок</div>`,
});

CustomBlock.add('my-first-block2', {
  label: 'Колонки',
  category: 'Extra',
  content: `<div class="row" style="min-height: 40px;">

    <div data-gjs-type="box" class="col-md-9 col-12" >

    </div>

    <div data-gjs-type="box" class="col-md-3 col-12" >

    </div>

</div><style> div.row, div.col-12 {min-height: 40px;}</style>`,
});

1-2 of 2