Layout breaks in my Bootstrap theme.

Agreed, great module, been working around these layout issues and this is great is pretty much exactly what I needed (even the older version was just fine). But... I concur, same issue:

Theme: Bootstrap 8.x-3.23
Drupal Version: 8.9.1

Hi guys,

So excited that you like it, I am going to try to reproduce that issue, if you can provide me with the steps to reproduce it would be great:)

Thanks
Mahmoud

Hi Mahmoud-Zayed,

From what I checked the attached library bootstrap_layout_builder/base is loaded correctly. Both css and js files are loaded in by ajax call. The problem might be related to the css selector called 'blb_ui ' that for some reason is removed by the bootstrap theme:

Without boostrap:

With boostrap

I suggest to add the selector blb_ui in the container.html.twig of the boostrap subtheme to fix.

{%
  set classes = [
    not attributes.hasClass('toolbar-menu-administration') ? 'form-group blb_ui',
    has_parent ? 'js-form-wrapper',
    has_parent ? 'form-wrapper',
  ]
%}

Additionally, for some reason it also removes the tab selector .blb_nav-tabs so we should change the selector from class selector id selector #blb_nav-tabs in base.css

Another thing that should be do is to disable the modal in bootstrap sub theme configuration.

Let me know yout comments,

Julian Mancera

Thank you both for flagging this issue.

We will test some more local installs with the Drupal bootstrap theme and see how we can replicate/fix the issues.

Hi all,

I have been working in a patch to fix the problem with style and javascript behaviors it is attach, can you please give it a try? Steps to make it work:

1. Disable the modal in bootstrap sub theme configuration. /admin/appearance/settings/my_bootstrap_theme
2. Run the patch

https://www.drupal.org/files/issues/2020-07-06/blb-breaks-with-boostrap-theme-3156391-13732652.patch

Hi @julianmancera,

Thanks for your patch, I have checked the issue from a while. And I agree with you using IDs instead of classes is a good solution for this issue. Would you make your update on SCSS files since we are using it to build the CSS styles?

Thanks,
Mahmoud

Hi Mahmoud-Zayed,

Here is the fixed patch. It is good to mention that there is a js fix for the selected breakpoints as the bootstrap template for label differs from the default one.

Regards,

Julian

Reviewing, thanks for the patch julianmancera!

Patch #11 works great!

Thanks julianmancera for the patch.
Thanks Freddy, Aaron, mindhunter75, presseyj for testing and catching this issue.

I have committed the patch to 1.x with some other code to solve the same issue with Bario bootstrap4 theme. so now the latest commit tested with:

• Bootstrap 3 drupal theme.
• Bario Bootstrap 4 theme.
• Bartik theme "To make sure that the form works correctly".
• Custom Bootstrap 4 theme.

I appreciate if you can test this in the Dev branch, hopefully, we can release a release "1.3" by tomorrow.

Regards,
Mahmoud

Hey mindhunter75,

Please follow this thread if you are using the latest dev version, the issues is related to the no gutters enhancement.

https://www.drupal.org/node/3157518

Added to 1.3 Release.