Custom css was overwritten by locked bootstrap css

Hi,
Im trying to get rid of the default .w-100 class behaviour meaning that I do not wish for the images to be stretched out 100% width of the card. As I understand its not possible to change the class but I should copy the existing .w-100 css in my own stylesheet and that should overwrite the default locket bootstrap css. I kind of did that but Im still receiving a message that my custom css was overwritten by the default one. Am I doing something wrong?

I would either start over with the card and add div label card add image etc…(not using the card-image-overlay component)

or

just create a class in your styles called .barista-card-image and set the width to 185px!important (make sure class is on images)

use that class for all your barista card images…

1 Like

You can also easily control some of these things with utility classes such as px-1 or even more narrowed down for various screen sizes you can add px-xs-1 px-md-2 and so on. p being padding which you can switch out for margin with m. Lots of ways to do what you need to do, but I truly wouldn’t limit yourself with exact width/heights unless they won’t change a lot as it can be a pain.

One other thing I would suggest is not to add attributes in as inline which is what you have done in your image. As Twinstream mentioned, add a class to your CSS and put that class name in the Class box of your component to use it. That way it will be reusable which is always a win win. :slight_smile:

1 Like

For whatever reason, Bootstrap has embraced the use of !important on their utility classes. When I learned CSS, I read that you should try to avoid using !important as much as possible, because it usually means that something in the cascade in not in the correct order. Sometimes overriding custom bootstrap.min.css stylesheets can be tricky if it’s being loaded via CDN.