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>

Try load bootstrap before your custom styles. Bootstrap will reset certain styles and apply it’s own opinion based styles to every element. You may also have clashing class names in your custom styles. Typically one would begin a project with bootstrap and then add custom styles on top of that, to add bootstrap in after styling elements will naturally have unexpected side effects — Simp4Code, Jul 13 '22 at 19:01
@DeepakYadav, I don't have any bootstrap local files, and the CDN version are ver5 — Sahil Singh, Jul 13 '22 at 19:08
Bootstrap is an opinionated CSS framework. It will make some changes to elements and their margins, padding, box-sizing and etc. So it's pretty much either you use it exclusively (and modify it), or not use it at all. — IT goldman, Jul 13 '22 at 19:15
@ITgoldman is there a way how I can apply bootstrap only to a particular part of the code — Sahil Singh, Jul 13 '22 at 19:19
What part of bootstrap would you need? Like a component? You can (and should!) compile your own version of bootstrap when working with it. So you can try to leave out some files like `reboot.scss` and see what happens. My guess it won't look good. — IT goldman, Jul 13 '22 at 19:23
@ITgoldman yes, I want to make a carousel in a particular section, and I want bootstrap to function only in that section. Could you please explain this in more detail. — Sahil Singh, Jul 13 '22 at 19:28
Does this answer your question? [Limit scope of external css to only a specific element?](https://stackoverflow.com/q/17667874/1264804) Like has been said, your site is either built with Bootstrap or it isn't. There's no gentle application of a comprehensive style library. — isherwood, Jul 13 '22 at 19:51

score 0 · Answer 1 · edited Jul 13 '22 at 19:52

0

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/

edited Jul 13 '22 at 19:52

isherwood

58,414
16
114
157

answered Jul 13 '22 at 19:01

tip. rock

14
2

Yes, I understand that, but is there a way how I can apply bootstrap only to a particular part of the code – Sahil Singh Jul 13 '22 at 19:05
Yes. If you haven't tried this. Change the id you are using to a unique class if you dont want to use bootstrap, otherwise when using bootstrap you should use it only in the tags you want to include.For example,. Secondly if you are using a fontawesome and google font CDN make sure you put them before the bootstrap CDN. Lastly, your page might be behaving like that because you reloaded it offline or you have poor connection. – tip. rock Jul 13 '22 at 19:18

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

1 Answers1

Things to look out for when using bootstrap