1

I'm trying to override a bootstrap shadow-sm class with my own shadow class. Here is the bootstrap class.

for some reason I don't want to change class name

.shadow-sm {
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

I tried to override with my custom style

.shadow-sm {
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12)!important;
}

but only bootstrap style applies

Now how do I override? 

.shadow-sm {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)!important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row m-2">
    <div class="col-lg-6 col-6 p-1">
      <a class="btn fb btn-block shadow-sm rounded-pill" href="#" role="button"><strong>Facebook</strong></a>
    </div>
  </div>
</div>

my custom style with class that bootstrap already has

tried below question but nothing works

How can I override Bootstrap CSS styles?

How can I override bootstrap classes?

How to override bootstrap?

Override Bootstrap CSS with custom CSS

EternalHour
  • 8,308
  • 6
  • 38
  • 57
sanoj lawrence
  • 951
  • 5
  • 29
  • 69

3 Answers3

1

You need to add the link to your css file after the bootstrap css file. No need to use !important doing it that way.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/styles.css" rel="stylesheet" />
<div class="container">
  <div class="row m-2">
    <div class="col-lg-6 col-6 p-1">
      <a class="btn fb btn-block shadow-sm rounded-pill" href="#" role="button"><strong>Facebook</strong></a>
    </div>
  </div>
</div>
EternalHour
  • 8,308
  • 6
  • 38
  • 57
  • yes this works. i named second file as `main-style.css` when i rename it to style it works now. **does the file name has to be style.css** also can you mention why the file name should be `style.css` – sanoj lawrence Sep 01 '19 at 08:18
  • More than likely the file was locally cached and by renaming it you got a fresh copy. – EternalHour Sep 02 '19 at 18:30
  • Maybe you need press `shift+f5` to reload with cache cleared after change some css – nandur Jun 18 '20 at 03:17
0

Add a class or id to your element and assign your attributes there, example

if class .imp has !important attribute

<div class="main">
<div class="imp newclass">
</div>
</div>

You will have to access the element like;

.main .newclass{}

OR

div.newclass{
}
Abiudeko
  • 83
  • 1
  • 7
0

That;s related to CSS Specificity (basically order of precedence). You can know more here: https://www.w3schools.com/css/css_specificity.asp

In Your Case:

You can super-override CSS properties, by adding additional class of your choice.

Let's add shadow-custom class along with shadow-sm class.

Then using both to override default behaviour: 

.shadow-sm.shadow-custom{
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)!important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row m-2">
    <div class="col-lg-6 col-6 p-1">
      <a class="btn fb btn-block shadow-sm shadow-custom rounded-pill" href="#" role="button"><strong>Facebook</strong></a>
    </div>
  </div>
</div>
Pulkit Aggarwal
  • 623
  • 7
  • 6