Bootstrap Off Canvas Content

Utilising a Bootstrap 4 WordPress theme – below code snippets to toggle off-canvas content. For multiple panels of content the trigger button data attribute – data-trigger needs a unique value that matches its content panel in the case below it is the article element which has the matching id value. HTML <b class=”screen-overlay”></b> <button data-trigger=”#card_mobile”…

Read More
Bootstrap Collapse Beaver Builder

If you have the Beaver Theme here is how you can add Bootstraps Collapse effect to a Beaver Builder row or module can be achieved using the Bootstrap data-toggle attribute. Let’s say you have a button which when clicked reveals a module below it and another click hides the module again. As below… Example Pellentesque…

Read More
Accordion Acf Repeater

Create An ACF Repeater Bootstrap Accordion for use in WordPress. Accordions can be a handy way of managing larger amounts of data to display only certain bits at a time this guide shows how to use a Boostrap accordion with ACF, a non-bootstrap guide is here. Create the ACF Repeater fields for the Bootstrap accordion.…

Read More
Boostrap Acf Repeater Tabs

This tutorial looks to Create a while loop of Bootstrap 4 Tabs with an ACF Repeater field in WordPress. You need to already have Bootstrap 4 enabled in your theme and ACF Pro plugin installed. Create the ACF Repeater fields for the tabs.   You can create as many tabs as needed, assign the field…

Read More
Boostrap Acf Repeater Tabs

Create a Responsive Bootstrap 4 Tab/Accordion ACF Repeater Loop for use in WordPress. Bootstrap 4 Tabs stay as tabs in all viewport sizes which isn’t great responsively for larger content, however, this code has been adjusted to go from Bootstrap tabs to accordions at a certain breakpoint. (There is also another non-Bootstrap script that does…

Read More
Foreach Loop Bootsrap Modals

Create a while loop of Bootstrap Modals with an ACF Repeater field in WordPress. Create the ACF Repeater fields.   You can create as many fields as needed, this example uses 3 basic fields, assign the field group to a post or page and populate the repeater rows. Add the ACF Loop Code View the…

Read More