Overriding Bootstrap CSS

Question

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?

Add a custom stylesheet that you link to after bootstrap, then rewrite the class there to override the base bootstrap one. — Nathaniel Flick, Dec 16 '20 at 18:19
@NathanielFlick could you show an example? I am new to css, and don't really know what that means — Dark Prism, Dec 16 '20 at 18:22
Yep this has been answered very well already here: https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles — Nathaniel Flick, Dec 16 '20 at 18:25
read the doc : https://getbootstrap.com/docs/4.1/utilities/borders/ — G-Cyrillus, Dec 16 '20 at 18:35

score 2 · Accepted Answer · answered Dec 16 '20 at 18:33

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>

score 1 · Answer 2 · answered Dec 16 '20 at 18:09

1

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>

answered Dec 16 '20 at 18:09

divinelemon

1,925
2
23

2

Don't use important. To override Bootstrap (or any CSS) you need to rewrite the style to be loaded after Bootstrap (further down the global cascade). – Nathaniel Flick Dec 16 '20 at 18:19
2

Use boostrap class before firing an !important ;) – G-Cyrillus Dec 16 '20 at 18:34

Overriding Bootstrap CSS

2 Answers2