How can I add Bootstrap's carousel to my site without affecting css styling?

Question

This is what my website looks like without Bootstrap CDN:

This is how it looks with the bootstrap CDN after my Style Sheet link in the head tag:

It's causing changes in other parts of the website too. Why is this happening? How do I avoid it? Also, how do I make Bootstrap to apply to only a certain part of the code, suppose Bootstrap applies to particular section

This is my code for the red banner section you see on the bottom of the landing page:

 /* Chat Card Section */ #chat-card{ position: absolute; bottom: 1px; } #chat-card, #chat-card div{ background: #e50914; width: 100%; height: 11vh; display: flex; justify-content: center; color: white; align-items: center; } #chat-card h3{ margin: 0; font-weight: 500; width: 70%; display: inline-block; margin: 1rem; text-align: center; margin-left: 0; } #chat-card img{ width:15%; } #chat-card .space_chat{ width:25rem; }

 <section id="chat-card"> <div class="space_chat"> </div> <div class="Satisfaction"> <img src="images/smile.png"> <h3>100% SATISFACTION GUARANTEE</h3> </div> <div class="support"> <img src="images/chat-support.png"> <h3>FREE VIDEO CHAT SUPPORT</h3> </div> <div class="at-home"> <img src="images/shipping.png"> <h3>DELIVERED AT HOME</h3> </div> <div class="customized"> <img src="images/veneers.png"> <h3>CUSTOMIZED VENEERS</h3> </div> <div class="space_chat"> </div> </section>

Answer 1

Things to look out for when using bootstrap

When using bootstrap cdn there are some common classes and ids used for bootstrap. When you automatically add elements with similar names as in bootstrap these changes you are seeing occur.

A solution Find similar ids and classes that are linked to the bootstrap cdn. You can start by checking out the documentation on bootstrap https://getbootstrap.com/docs/5.2/layout/containers/