I’m having trouble getting Bootstrap carousel components to work alongside HubSpot custom modules. The issue arises from HubSpot adding extra HTML wrappers around custom modules, disrupting the carousel’s expected layout.
This is the situation I am facing:
<div class="carousel-container">
<!-- HubSpot wrapper spans around all slides -->
<span id="hs_cos_wrapper_slider_content" class="hs_cos_wrapper hs_cos_wrapper_widget_container" data-hs-cos-general-type="widget_container">
<!-- HubSpot div wrapper for individual slide -->
<div id="hs_cos_wrapper_module_1234567890" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" data-hs-cos-type="custom_widget">
<!-- My actual slide content -->
<div class="slide">
<div class="banner" style="height: 600px; background-image: url(photo.jpg);"></div>
<div class="wrapper slide-text">Sample slide content</div>
</div>
</div>
</span>
</div>
Since there are these additional wrapper layers, the carousel plugin struggles to find the elements it needs. Has anyone figured out a way to get Bootstrap carousel functioning properly with these HubSpot wrappers?
Yeah, the Bootstrap carousel wrapper issue is super annoying, but you don’t need to rebuild the whole DOM. I’ve had good luck customizing the carousel setup to work with HubSpot’s wrapper structure instead of fighting it. Here’s what works: target the hs_cos_wrapper_widget divs as your slide containers and make Bootstrap treat each HubSpot module wrapper as a carousel item. Just apply your carousel styling directly to those wrapper elements. You’ll need some custom CSS to make sure the wrapper divs handle positioning and transitions properly. The controls and indicators need minor selector tweaks, but this approach stays stable when HubSpot updates since you’re using their structure the way they intended.
HubSpot wrapper situation is annoying but totally fixable with the right automation.
I’ve hit this exact problem multiple times. Bootstrap carousel needs a specific DOM structure, but HubSpot keeps injecting wrapper elements that break everything.
What worked for me: set up an automated solution that restructures the DOM after HubSpot loads its modules. Create a script that finds those wrapper elements and either removes them or moves the slide content where Bootstrap expects it.
Manual JavaScript works, but it’s a pain to maintain. Every HubSpot update or new slide means adjusting your selectors.
Cleaner solution: use Latenode to automate the whole process. Set up workflows that monitor your HubSpot pages, detect carousel modules, and automatically inject the proper DOM restructuring scripts. Handles all wrapper detection and cleanup without manual coding for each scenario.
Bonus: if you need to sync carousel data between HubSpot and other systems, Latenode automates that too. I use it to pull slide content from external sources and push it directly to HubSpot in Bootstrap-compatible format.
I encountered a similar issue when integrating Bootstrap with HubSpot as well. The key is to adapt your JavaScript to correctly target the inner elements of the carousel. Instead of relying on Bootstrap’s automatic selectors, you should select the actual slide divs directly. This may involve updating your initialization code to navigate through the extra wrappers. Additionally, applying specific CSS to the HubSpot wrappers can help maintain layout integrity during transitions. Setting properties like overflow and positioning on those wrappers is crucial to prevent issues while the carousel operates.
Had this exact issue last year on a client site. Bootstrap carousel needs direct parent-child relationships, but HubSpot’s wrapper system breaks that completely. I ditched Bootstrap’s default setup and wrote custom JavaScript that actually works with HubSpot’s nested mess. Skip the standard carousel constructor - build your own event handlers that calculate slide positioning based on whatever wrapper elements HubSpot throws at you. Here’s the key: let HubSpot load everything first, then use MutationObserver to catch when all wrappers are done loading. After that, apply transform animations directly to slide content while leaving HubSpot’s containers alone. Way more stable than trying to manipulate the DOM and fighting HubSpot’s rendering. You’ll need to override carousel indicators and controls too - make them reference your actual slides instead of letting Bootstrap auto-detect. Takes extra setup but survives HubSpot updates.
try using jQuery to clone the slide content and rebuild the carousel structure after the page loads. use something like $(‘.hs_cos_wrapper_widget .slide’).each() to grab your slides, then recreate the bootstrap markup without HubSpot’s wrappers screwing everything up.