引导按钮填充未加载

Question

I'm trying to get some buttons to work in Bootstrap 5:

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-12"> <a class="btn-primary">0000</a> <button class="btn-primary">0000</button> </div> </div> </div>

But the styles aren't being applied correctly, the buttons appear to be missing the rounded corners and the padding:

I'm only loading the styles from <link href="css/bootstrap.min.css" rel="stylesheet"> which I'm pretty sure is what I always do.

Answer 1

Change class class="btn-primary" to class="btn btn-primary"

Answer 2

Need to btn align with other custom bootstrap classes. Read about buttons here

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-12"> <a class="btn btn-primary">0000</a> <button class="btn btn-primary">0000</button> </div> </div> </div>

Answer 3

It misses the "btn" class.

<a href="#" class="btn btn-primary">asdasda</a>

Answer 4

you forgot the btn class

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-12"> <a class="btn btn-primary" role="button">0000</a> <button class="btn btn-primary">0000</button> </div> </div> </div>

https://getbootstrap.com/docs/4.5/components/buttons/

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Button tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button " to appropriately convey their purpose to assistive technologies such as screen readers.