Bootstrap 4 support

Hi Stef,

I tend to agree with the maintainer of the Bootstrap theme that waiting for the full release of Bootstrap 4 is the best move.

As far as I have dabbled, my css should work with BS4. I have added a couple of things like .card (v4) and .panel (v3) classes on the Accordion, and .carousel-item (v4) and .item (v3) on the Carousel.

Have you noticed something not working? If so, please post it here.

Thanks!

Jim

Hello
What now?
Bootstrap 4 is still not stable?
Can the alpha version be used?

Hi @_HeDiN_,

Bootstrap has not released 4 yet. They are still in alpha.

This module may work with Bootstrap 4, but it is untested. If you do try it, please report back and let us know how it goes!

Thanks,
Jim

Hi thejimbirch.
Sorry please that i have not written for a long time.
I used "Barrio" on my site (https://www.drupal.org/project/bootstrap_barrio)
And I created a subtheme based on it.
Now I have no problems.

Thanks @_HeDiN_,

Great to hear. If you do find any bugs let me know.

I am still going to leave this opened and postponed until the full release of Bootstrap 4.

Bootstrap 4.0.0 has been released.

https://blog.getbootstrap.com/2018/01/18/bootstrap-4/

Are there any new features that should be included? Is anything not working? Let's list here and create issues linked from here.

@thejimbirch Hi in my company we are using bootstrap paragraphs with bootstrap 4. I've found some issues in caroussel due to missing gilyphicons font (not available in bootstrap 4) and in my specific case caroussel didn't work properly unless I deleted the .item class in the template. Are you working on this? and if so do you need any help? We are testing the funcionality and i'll post any issues that I find here. (if you want you can email me at paulo.calado@javali.pt.

@thejimbirch any code to be tested? Thanks :)

Hi @candelas,

Sorry, no I haven't worked on a BS4 site yet. The only thing that has been posted here is that there are differences in the carousel. That the item class needs to be changed and the arrows should be made with CSS rather than glyphicons. Thanks @kallado!

Are you seeing other changes that need to be made?

Thanks,
Jim

@thejimbirch thanks for your answer. At the end I created all paragraphs that I needed and didn't use your module. I hope I can for next site. Have a good coding :)

@thejimbirch.
Hi Jim,
not sure if it is a Paragraphs problem.
It just came to my attention that the handling of i.e. unordered lists is also somewhat different in v4 (I'm using Zymphonies Qatar-theme based on v4). Menu's and column/rows are (as a default?) displayed vertical rather than horizontal. Sorry I'm not a tech-person but maybe the discussion or issue-list was closed premature?
Hopefully it helps to refine your awesome paragraphs-module.
Greetings
Jaybee - the Netherlands.

Radix is now using BS4, will do some testing and report back with any issues.

The accordion is not working properly in BS4 due to changes to data and aria tags. Just adding the card classes isn't enough and I don't think the same twig template can be used for both BS versions. I've added the overwritten template I'm using in Radix that seems to work, but a patch would depend on how you want to take this forward in regards to compatability.

One way would be a global config variable in the module where you can choose which BS version is used. Then you could serve a different template in cases where compatibility is not an option.

{# Prints Accordion template. #}
<div class="paragraph--bp-accordion-container">
  {% if content.bp_accordion_expand['#items'].getString() %}
    <button type="button" class="btn btn-primary bp-accordion-button" title="{{ 'Click to expand all accordions in this section.'|trans }}">
      {{ 'Expand All'|trans }}
    </button>
  {% endif %}
  <div{{ attributes.addClass(classes).setAttribute('id', paragraph_id) }} role="tablist">
    <div class="paragraph__column">
      {% if content.bp_show_indicators['#items'].getString() %}
        {% set indicator_class = 'display' %}
      {% else %}
        {% set indicator_class = 'normal' %}
      {%  endif %}
      {# Loop through all of the accordion sections. #}
      {% for key, item in content.bp_accordion_section if key|first != '#' %}
        {# Set variables if accordion should be shown. #}
        {% if item['#paragraph'].bp_show_button.value %}
          {% set show_accordion = ' show' %}
          {% set aria = 'true' %}
        {% else %}
          {% set show_accordion = '' %}
          {% set aria = 'false' %}
        {% endif %}
        <div class="card">
        <div class="card-header panel-heading" role="tab" id="heading-{{ paragraph_id }}-{{ key + 1 }}">
          <div class="card-title">
            <a class="{{ (indicator_class) }}" role="button" data-toggle="collapse" data-target="#collapse-{{ paragraph_id }}-{{ key + 1 }}" href="#collapse-{{ paragraph_id }}-{{ key + 1 }}" aria-expanded="{{ aria }}" aria-controls="collapse-{{ paragraph_id }}-{{ key + 1 }}">
              {# Print the accordion section title. #}
              {{ item['#paragraph'].bp_accordion_section_title.value }}
            </a>
          </div>
        </div>
        <div id="collapse-{{ paragraph_id }}-{{ key + 1 }}" class="collapse{{ show_accordion }}" role="tabpanel" aria-labelledby="heading-{{ paragraph_id }}-{{ key + 1 }}" data-parent="#{{ paragraph_id }}">
          {# Loop through all of the accordion section bodies. #}
          {% for body_key, body_item in item['#paragraph'].bp_accordion_section_body %}
            {# Use the same render array as item and set the '#paragraph'. #}
            {% set section_body = item %}
            {% set lang = section_body['#paragraph'].langcode[0].value %}
            {# Check if a translation exists #}
            {% if section_body['#paragraph'].bp_accordion_section_body[body_key].entity.hasTranslation(lang) %}
              {# Load the entity for the current translation #}
            	{% set section_translation= section_body['#paragraph'].bp_accordion_section_body[body_key].entity.getTranslation(lang) %}
            {% else %}
              {# Load the source entity #}
            	{% set section_translation= section_body['#paragraph'].bp_accordion_section_body[body_key].entity %}
            {% endif %}
            {% set section_body = section_body|merge({'#paragraph': section_translation}) %}
            {# Remove the cache keys so it doesn't repeat the first value. #}
            {% set section_body = section_body|merge({'#cache': {}}) %}
            {# Print the compiled section body. #}
            {{ section_body }}
          {% endfor %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

Jim Birch just spent a bunch of time trying to help me see if we could get Bootstrap 4 working with Bootstrap_Paragraphs; it was a bust!

I have an up to date Core 8.7.8 Local Development Site I am working from to move past my wireframes to component level mockups of various features I want to include. I have had Bootstrap 4 installed with the Barrio Subtheme, under which I have my custom theme. I have Debugging turned on so I can examine templates and select which I want to uniquely override with TWIG edits calling Bootstrap 4 components on or across cascading pages on the development site. Through native code editing the Bootstrap 4 seems well behaved; excepting some extra CSS styling called from the site yml library to pretty some things up.

I ran into some presentations on Bootstrap_Paragraphs and decided it might be nice to use it in combination with Layout Builder for variations of content display within nodes versus the potential for performance drag of a massive number of anticipated nodes without it. The install was fine on Core 8.7.8 and the procedure to get the Bootstrap components active within the UI worked fine. But after I used them on pages to type to build a three column display with image/title(simple)/text(simple) presentation, the contents failed to style at all. Jim confirmed I hadn't done any obviously stupid stuff and then we stepped down first removing my custom theme (to no avail), the Barrio theme (to no avail), and not until a composer install of Bootstrap that defaulted to version 3.20 did Bootstrap_paragraphs function with 'sort of' level styling (meaning not pretty or stacked correctly but at least sized and ordered). So it appears that Bootstrap_paragraphs DOES NOT WORK WITH BOOTSTRAP 4.

Should anyone find an approach to doing so that works, I would love to hear about it since I am working on this local development site and can do lots of testing and diagnostics without issue of messing up a production site.

Thanks ...

I just want to add my own experience:

1. I installed the bootstrap paragraphs modules, the paragraphs were installed as expected.
2. Once I set a paragraphs field up, I added an accordion + sections, these displayed as expected but the javascript didn't work.
3. I installed bootstrap_barrio and created a subtheme.
4. I ran gulp to compile the bootstrap assets. The bootstrap styling works, but now I get a javascript error whenever I click an accordion item, the accordion content will not expand.
5. I enabled the 'expand all' button. This works. In fact, once I click on this, the individual accordion items work as expected (but only after clicking the expand all button).

So bootstrap 4 exists, but it is buggy.

Attached a screenshot of the associated js error.

I've release 8.x-2.0-beta7 which had a previous patch in to try to fix the accordion. I am going to close this and re-open if needed.