Overwriting bootstrap buttons


#1

In BestBite, simply targeting .btn and changing it's properties alters bootstrap's .btn-default:focus properties. Like this:

.banner .btn {
    background-color: rgba(216, 25, 47, .5);
    color: #fff;
    border: 0px;
    margin-top: 30px;
}

When I try and replicate this outside of the project, though, it doesn't work. Why? See here and notice what happens when the .btn is focused on.

Here's my project, too. The btn I'm talking about is the one in the middle of the page (div .banner).


#2

i went into the bootstrap file, and found the declaration of btn:

.btn
{
    display:inline-block;
    padding:6px 12px;
    margin-bottom:0;
    font-size:14px;
    font-weight:400;
    line-height:1.42857143;
    text-align:center;
    white-space:nowrap;
    vertical-align:middle;
    -ms-touch-action:manipulation;
    touch-action:manipulation;
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    background-image:none;
    border:1px solid transparent;
    border-radius:4px
}

What they do very clever in the exercise is use .banner .btn as css selector. A class is worth 10 points, so .btn is 10 points, and .banner .btn is 20 points (you can read about this in detail here), if there are conflicting property's, the css selector with the most points get used. if points are equal, the order is important (last property gets applied), hope this helps


#3

Thanks! That clicked after thinking about it a bit. Would've clicked faster if you had mentioned .btn-default:focus is equal to 20 points.


#4

I missed that. Sometimes thinking about it is good, you will gain a better understanding because you puzzle things out yourself :smile: