Miles

Hi @cantbelieveitsnotbutter

Thank you for your patience on this one. We have just released an update which includes functionality for the CSS grid along with including the latest version of Bootstrap.

To use the new functionality, first you’ll need to select the correct Bootstrap version (5.3+). You can do this by logging into your WP site and clicking Bootstrap down the left hand side. The first option is Bootstrap Version, select the relevant one.

Then you need to turn on CSS Grid which you can do under Customize > Options > $enable-cssgrid. Check the box and recompile your Bootstrap.

The relevant classes will be added to the row and column blocks throughout your site. When you go to edit the blocks, if CSS grid is switched on you’ll have a few different options on each block to cover the different options available with CSS grid.

Hopefully, it works as you expected, but if you have any issues please don’t hesitate to get back in touch.

Thanks
Miles

Hi @cantbelieveitsnotbutter,

We are planning on adding 5.3 very soon (hopefully before the end of the month). Looking at the $enable-cssgrid function it will require a few additional blocks to be created but should definitely possible. When we do the development for 5.3, we will be sure to include the additional blocks for you.

As mentioned, we’ll aim to get this sorted by the end of the month.

Thanks
Miles

Hi @adamzeliasz

Thanks for reaching out!

The purpose of the plugin is to allow you to create Bootstrap layouts directly in the WP editor without needing to write code so you shouldn’t need to code your own blocks.

In the block editor click the + icon in the top left and you should see a list of blocks under “Bootstrap Layout” and “Bootstrap Components”, these blocks cover all of the different elements of Bootstrap so all you need to do is drag and drop the relevant blocks to your page in order to build up your layout. Click here to see a quick example.

If you watch the video you will see I select the container block, this automatically adds a row block within the container and a column block within the row. I can then select each of these blocks and change the relevant settings as well as adding more blocks where needed.

There’s a good tutorial written by Elegant Themes which you can view on this link.

Hopefully, this is enough to get you started but if you need any more help feel free to get back in touch.

Thanks
Miles

Hi @juuliadevadze, @ddiomede1,

I have released an update which should resolve the issue you were having with the accordion header. I’ve tested it an all looks to be working ok now so I’m going to mark this ticket as solved.

However, if you continue to have issues or need any more assistance, please don’t hesitate to get back in touch.

Thanks again for flagging this.

Miles

Hi @juuliadevadze, @ddiomede1,

Thank you for reaching out and raising this issue.

I’m going to look in to it over the weekend and if I can identify the issue I should have an updated version of the plugin available by Monday. I will drop you an update once the fix has been implemented.

Thanks for your patience and thanks again for reporting this issue.

Miles

Hi @bevibrant1

I haven’t heard anything back for a while, hopefully this means you managed to resolve your issue. So, I’m going to mark this ticket as resolved.

However, if you need anymore help please don’t hesitate to get back in touch.

Thanks
Miles

Hi @bevibrant1

Thanks for reaching out! Sorry to hear you’re having issues.

I’ve just visited the link you provided and the inputs seem to be working as they should eg: responsive and filling the main page area. Apologies if I’m missing something or if you’ve made a change to rectify the issue.

In regards to only including the cards and grids you should be able to exclude all other includes from the SCSS Compiled section then click the Save & Recompile CSS button.

If however, this isn’t giving you the desired effect another option is to include your own version of Bootstrap CSS which only includes the styling you need. Once you have included this on your site you can uncheck the Include Bootstrap CSS option. This way the plugins Bootstrap CSS will not be included.

Hopefully this helps, but if I have missed something or not answered your query properly please let me know and I’ll do my best to help.

Thanks

Miles

Hi Patrick,

I haven’t heard anything back on this so I’m going to mark the ticket as resolved. However, if I haven’t answered your question sufficiently then please feel free to open the ticket back up and I’ll do my best to help.

If you need help with anything in the future, please don’t hesitate to get back in touch.

Thanks
Miles

Hi?@waldirb,

I’ve just released an update (1.3.12) which should resolve your issue. I made the CSS selectors more specific but unfortunately that didn’t resolve it as if your .row was the last child in the .card-body it would still override the margin.

So, along with making the selector more specific I have also changed it to only apply a margin to the bottom of the element, this way it won’t override the .row left and right margins.

I’ve tested it and the row block now works as expected when within the .card-body. Let me know if you have any issues with it and I can take another look.

Thanks again for flagging this issue.

Miles

Hi @waldirb,

Thank you for flagging this issue!

I’m going to look into it and once I resolve it I will send you an update. It will most likely be next week so I appreciate your patience on this.

Thanks
Miles

Hi Patrick,

Thank you for the additional detail. I just want to check is it classes that look like this block-549dc7a2-5815-4090-9fb1-c6050099408f that you’re referring to?

If so, these are essential for the plugin to function correctly. These are dynamically created classes that are unique for each block and make it possible for the plugin to apply styles within the head of the site.

For example within the plugin, if you change the padding or margin for a block using the settings panel, the plugin will then generate styles and attach them to this unique class, without it that wouldn’t be possible. Here’s an example of a style that gets created when I apply padding to a block.

.block-549dc7a2-5815-4090-9fb1-c6050099408f {
    padding-top: 100px;
    padding-bottom: 100px;
}

For any additional classes that are added other than the default Bootstrap classes, there is most likely a reason for it and removing them would have knock on effects for the plugins functionality.

Hopefully, this clears it up for you but if not, please let me know and I will try my best to help you.

Thanks

Miles

Hi @pwcredia,

Thanks for reaching out. I’ll do my best to assist.

Would you be able to provide a little more detail around the problem you’re facing? It would be good if you could give me an example of the cryptic classes you’re talking about and just explain how these are causing you problems.

If you can provide this, hopefully I can help you with a solution.

Thanks
Miles

Hi @jimmyygee

Yes this plugin is specifically for block themes. I don’t think it would be as simple as converting the theme to a block theme as this would require you to build out the whole site again using blocks which could be very time consuming and you would most likely lose all of the features of the theme.

It sounds to me like your best option would be to build the offcanvas menu yourself without worrying about Bootstrap. There’s a simple example of how you could do that here https://codepen.io/ammit/pen/emBwmm with jQuery and CSS.

It also may be worth speaking to the theme author as they can probably offer you better guidance on the best option as the problem you’re having is with the theme.

I’m going to mark this ticket as resolved as at the moment there’s not much I can do to help. But, if you use All Bootstrap Blocks on your block themes in future please don’t hesitate to get back in touch if you need any assistance.

I’m sorry I couldn’t be more help and I hope you manage to resolve your issue!

Thanks

Miles

Hi @kyashan22

As the list group block is limited you would need to use the div block along with custom classes to build up this structure. The div blocks essentially allows you to build up any component you want in the same way you would if you were writing the code yourself.

To save you some time I have converted your code above into blocks which you can see below. If you edit a page then click the three dots in the top right, then select Code Editor and paste the below in you should see your list group.

<!-- wp:areoi/div {"block_id":"898046e8-3ba1-46f3-840c-c66077bd86c6","className":"list-group"} -->
<!-- wp:areoi/div {"block_id":"70deb6be-4aff-4f86-bc54-731bb6f09ddb","url":"#","className":"list-group-item list-group-item-action active"} -->
<!-- wp:areoi/div {"block_id":"66d79041-8219-4184-97a7-30c4c46813d8","className":"d-flex w-100 justify-content-between"} -->
<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">List group item heading</h5>
<!-- /wp:heading -->

<!-- wp:areoi/div {"block_id":"fc7b4ec1-c052-47fd-9c3a-5f0d43b64add","className":"small"} -->
<!-- wp:paragraph -->
<p>3 days ago</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->
<!-- /wp:areoi/div -->

<!-- wp:paragraph -->
<p>Some placeholder content in a paragraph.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"small"} -->
<p class="small">And some small print.</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->

<!-- wp:areoi/div {"block_id":"3608faba-4c78-42de-8eae-4316833b369e","url":"#","className":"list-group-item list-group-item-action"} -->
<!-- wp:areoi/div {"block_id":"0880704c-c611-4ae3-a6c8-60980d6f72ba","className":"d-flex w-100 justify-content-between"} -->
<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">List group item heading</h5>
<!-- /wp:heading -->

<!-- wp:areoi/div {"block_id":"fc7b4ec1-c052-47fd-9c3a-5f0d43b64add","className":"small"} -->
<!-- wp:paragraph -->
<p>3 days ago</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->
<!-- /wp:areoi/div -->

<!-- wp:paragraph -->
<p>Some placeholder content in a paragraph.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"small"} -->
<p class="small">And some small print.</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->

<!-- wp:areoi/div {"block_id":"c1b6ee18-9fa1-4647-928c-0d3fb4a1355e","url":"#","className":"list-group-item list-group-item-action"} -->
<!-- wp:areoi/div {"block_id":"e0d15af1-dcb7-466f-9a5e-5a4da3397a2a","className":"d-flex w-100 justify-content-between"} -->
<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">List group item heading</h5>
<!-- /wp:heading -->

<!-- wp:areoi/div {"block_id":"fc7b4ec1-c052-47fd-9c3a-5f0d43b64add","className":"small"} -->
<!-- wp:paragraph -->
<p>3 days ago</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->
<!-- /wp:areoi/div -->

<!-- wp:paragraph -->
<p>Some placeholder content in a paragraph.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"small"} -->
<p class="small">And some small print.</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->
<!-- /wp:areoi/div -->

Hopefully you can use this to create whatever component you need. You could then save this as a pattern to make it easily accessible across your site. If you have any other issues, please don’t hesitate to get back in touch.

Thanks
Miles

Hi @cyrilbatillat

This is available in the latest release. Hopefully, I’ve fully understood your issue and the fix I have put in place resolves it for you, but if not please let me know.

Thanks

Miles