Search code examples
htmlcssbootstrap-4carousel

How to skip some modified CSS component and use the original one in a certain situation instead?

I have a modified Bootstrap file that changes some components, but in a certain scenario, especially when I move to Bootstrap 4, it does not work correctly, and I want to use component defined in the original Bootstrap file just for that component.

For example:

 <link href="path-to-original-bootstrap" rel="stylesheet">

/* here carousel was overridden with original one and work badly */ 
 <link href="path-to-modified-bootstrap" rel="stylesheet"> 

  <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

I want to have a carousel which uses the original Bootstrap and skip the modified one just for this component. Could you please advise me on how to approach this?

Solution

  • I think you can move that CSS file which is related to the modified component under the component you want to be used by the original CSS.