how to disable/remove/override css property of a CDN-CodePudding

i am using swiper.js via CDN...the problem is that in swiper-bundle.min.css CDN file .swiper-button-next, .swiper-button-prev are set to top:50%; like this:-

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
}

I want to set .swiper-button-next, .swiper-button-prev to bottom:11px; i tried doing it in my own css file but CDN's top:50% is overriding it. And i've tried using !important too but nothing happened.

CodePudding user response：

You can select the same class in your project's main css file and do the styling with !important keyword.

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: unset !important;
    bottom: 11px;
}

Here is fiddle with a simple example. In this Fiddle, I have included bootstrap CDN and overridden the padding of .container class to demonstrate