Overriding Bootstrap CSS

user_14839114 0
Viewed 100

I recently referenced a bootstrap css in my code like this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

However, I do not like the border it puts on .card elements. I tried to override the bootstrap and remove the border by inserting style="border: 0" into the card div, but it didn't do anything.

.card {
  border: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="card card-sm" id="localcard">
  <p> See Thin Border </p>
</div>

How can I remove this border?

bootstrap-4 css html
2 Answers

No need of custom style, use built-in class : https://getbootstrap.com/docs/4.1/utilities/borders/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="card card-sm border-0" id="localcard">
  <p> See, no  Border! </p>
</div>

user_24420990

You can set the !important tag in the css like this:

.card {
  border: 0 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="card card-sm" id="localcard">
  <p> No Border </p>
</div>

user_144659570
Related