Plan Display Issue (Check Input)

I was hoping for some help with the recent appearance of the check input falling outside the box for each plan (see images).   I found the CSS, but having trouble pinpointing it to add as a CSS override.

I am not sure when and how it happened, as I have not made any styling changes.   It makes a difference to know I am using a YooTheme for the site template.  I commented out the "margin-left" and "margin-top" as shown below in inspecto,r which seems to place the input button back where it's supposed to be.

.cb_template .form-check-input {
    /* margin-left: -1.25rem; */
    /* margin-top: .3rem; */
    position: absolute;
}

 

 

That CSS is from Bootstrap 4 scoped to CB. Probably just a conflict with your template. Your template is probably Bootstrap 5.

Within CB > Configuration > Integrations set "Bootstrap (Frontend)" to "Bootstrap 5 Compatibility" and CB will load a minimized Bootstrap CSS file that backports some Bootstrap 5 styles into Bootstrap 4 giving more compatibility with Bootstrap 5 templates.

Alternatively you can override it specifically for CBSubs using the below.

See the below on how to add CSS overrides to CB.

www.joomlapolis.com/blog/kyle/18711-template-css-overrides-made-easy

Thanks Kyle.  Both options worked.   The override provided a bit better layout!  Much appreciated!