Why is my Bootstrap class style not taking effect?

Question

So I'm new to HTML, CSS and bootstrap and I can't update the value of my stylesheet in preview, here is my button label and it's value:

<button class="btn btn-primary btn-xl">Find out More</button>

But when I try to change the style of the btn-xl value in my CSS,

.btn-xl {
    padding: 1rem 2rem;
}

Any changes I make will not show up in the preview. Please someone tell me where am I going wrong?

So I tried checking my links, maybe there is an error in the link header connecting my HTML and CSS, but there is nothing wrong there. I checked for any typos that might conflict, but this is definitely not a typo, so I'm completely lost.

Answer 1

It looks like your problem is caused by Bootstrap overriding the value. It could be an issue with the order in which you added the stylesheets, or it could be a specificity issue. If you change the class name, it will become:

.btn.btn-xl {
    padding: 1rem 2rem;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.css" rel="stylesheet"/>

<button class="btn btn-primary btn-xl">了解更多</button>

If you want to change the style of all buttons, you can update the variables used by Bootstrap to adjust the padding.