I'm currently working on a unique control that is directly integrated into the parent page, without the use of an iFrame. This custom control utilizes react-bootstrap, so the bootstrap4 css is automatically included alongside my implementation.
During the development phase of my standalone application, everything functioned perfectly. However, upon integration, issues arose with certain "global" bootstrap styles affecting elements throughout the entire page, rather than just those with bootstrap classes applied.
This unintended consequence has led to layout disruptions within the parent page once my control is loaded. Specifically, problematic bootstrap classes that are being applied universally include styles such as:
dl, ol, ul {
margin-top: 0;
margin-bottom: 1rem;
}
and
label {
display: inline-block;
margin-bottom: .5rem;
}
This situation is less than ideal for my specific requirements. Is there a method to eliminate any bootstrap styles that do not correspond to explicit bootstrap classes? I aim to avoid styling conflicts on HTML tags not directly associated with bootstrap classes.
Your assistance in resolving this issue is greatly appreciated.