CSS for a Bootstrap 4 button does not work when applied, why?

Question

I just started creating my first Bootstrap project. However, my CSS for my Bootstrap button does not work. It is not applied. I wonder why, because it worked in the past.

I just want to set my button to green. This is my button (I am talking about the blue one):

Here is my code:

   button {
        padding-top: 200px;
        background-color: #388E3C;  
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
        <div class="row">
          <div class="col-lg-6" id="function2">
            <div class="input-group" id="input">
                <div class="custom-file">
                  <input type="file" class="custom-file-input" id="inputGroupFile01"
                    aria-describedby="inputGroupFileAddon01">
                  <label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label>
                </div>
            </div>

            <button type="button" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button> <!-- This is the button! -->

        </div>
  
    </div>

I use the padding to check if anything is applied. I appreciate every kind of help.

Probably fails in terms of specificity compared to Bootstrap's CSS. Also do you load your CSS before or after Bootstrap? — j08691, Mar 27 '20 at 16:32
What do you mean? The blue color is also by me, I just cannot change the color anymore. My style css comes after bootstraps css — , Mar 27 '20 at 16:33
@AndroidAnton there are multiple ways to fix it, either you can create a `selector` class(I answered it below) and assign the property so that it will work or you should inherit from the parent then the selector. — Manjuboyz, Mar 27 '20 at 16:50

score 1 · Answer 1 · answered Mar 27 '20 at 16:35

It's definitely an specificity problem,

You are targeting just button elements, which is less specific than a class, that's why you style isn't applying and is being overwritten by bootstrap's class.

Either add your own class to the button to apply your styles, or target the button + a bootstrap class.

I would advise against using !important, it is not really necessary

button.btn {
  padding-top: 200px;
  background-color: #388E3C;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-6" id="function2">
      <div class="input-group" id="input">
        <div class="custom-file">
          <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
          <label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label>
        </div>
      </div>

      <button type="button" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button>
      <!-- This is the button! -->

    </div>

  </div>

Manjuboyz · Answer 2 · 2020-03-27T16:48:44.137

you can solve it in multiple ways

Use button.btn {....} than button {....} this should take care of your issue.
Use a selector class for the button then assign the property(which is what I have done).

#cssBtn {
  padding-top: 200px;
  background-color: #388E3C;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-6" id="function2">
      <div class="input-group" id="input">
        <div class="custom-file">
          <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
          <label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label>
        </div>
      </div>

      <button type="button" id="cssBtn" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button>
      <!-- This is the button! -->

    </div>

  </div>

Alex · Accepted Answer · 2020-03-27T17:05:41.797

0

Odds are that Boostrap's CSS file is overriding yours, ensure that you load your CSS file after the Boostrap one. You'd be best assigning a custom class to the button

<button id="customButton" type="button" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button>

Then setting your CSS to

button#customButton {
padding-top: 200px;
background-color: #388E3C;  
}

edited Mar 27 '20 at 17:05

answered Mar 27 '20 at 16:34

Alex

531
1
8
22

1

`!important` should be the last option since it overrides all the values, this may not be the best answer!. – Manjuboyz Mar 27 '20 at 16:35
Thank you, but my style.css loads after bootstraps. I will try your solution in few minutes and give feedback – Mar 27 '20 at 16:35
@Manjuboyz That's true - Maybe best to apply a class or id to that button to stop it overriding the whole stylesheet. Looks like you beat me to it! – Alex Mar 27 '20 at 16:52
1

hahaha nothing such bro! I don't ever use `important` as a property, cheers to that you agreed ! – Manjuboyz Mar 27 '20 at 16:53
Thank you, the !important does its job but I will check to make it cleaner – Mar 27 '20 at 16:56
@AndroidAnton `!important` may solve the issue, I am not against @Alex's answer but it is not the best answer in the list! you shouldn't use this snippet in your code!. – Manjuboyz Mar 27 '20 at 16:59
@Alex you may curse me! lol but your code will not work now, at-least it works for `!important` but not now! Kindly use this `button#customButton` (remove space in-between). – Manjuboyz Mar 27 '20 at 17:03
1

@Manjuboyz Oh for goodness me! Hahah! That's what I get for trying to do two things at once... – Alex Mar 27 '20 at 17:06
Happens! happy coding! – Manjuboyz Mar 27 '20 at 17:06

score 0 · Answer 4 · answered Mar 27 '20 at 16:35

Works for me when i copy your exact html and css into an environment, i would say that it's because you already have a lot of classes attached to the button

class="btn btn-primary btn-lg btn-block"

you may need to edit some of these classes as they are probably taking priority over the button itself

the best way to know is to do

button {
    padding-top: 200px!important;
    background-color: #388E3C;  
}

although important is not best practice but that will give you your answer

I think you are most likely right. As you just mentioned, I just remember that I cannot style my button after I applied btn-block I think — , Mar 27 '20 at 16:36

score 0 · Answer 5 · answered Mar 27 '20 at 16:48

If green button is all you need then add btn btn-success instead of btn btn-primary

<div class="container">
    <div class="row">
      <div class="col-lg-6" id="function2">
        <div class="input-group" id="input">
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="inputGroupFile01"
                aria-describedby="inputGroupFileAddon01">
              <label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label>
            </div>
        </div>

        <button type="button" class="btn btn-success btn-lg btn-block">Convert p12 to jks</button> <!-- This is the button! -->

    </div>

</div>

CSS for a Bootstrap 4 button does not work when applied, why?

5 Answers5