CSS rule is not affecting HTML

Question

I use bootstrap v.3 and I wanted to make a diferrent button, so I copy all the css classes for btn-primary, renamed to myBigButton and apply my changes. Here works perfect. However in my page the new class 'myBigButton' doesnt exist (when I inspect element from the broswer..) I have the same code in my page

<div class="container">
    <div class="row ">
        <div class="col-md-4">               
            <button type="button" class="btn myBigBtn btn-block ">aaaaaa</button>
        </div>
        <div class="col-md-4">               
            <button type="button" class="btn myBigBtn btn-block">bbbbbb</button>
        </div>
        <div class="col-md-4">               
            <button type="button" class="btn myBigBtn btn-block">cccccc</button>
        </div>
    </div>
</div>

any ideas why?

The strangest is that if double write the css class

.myBigBtn {
    color: #ffffff;
    background-color: #5A6E9E;
    border-color:#5A6E9E;
    line-height: 100px;
    font-size: 23px;
}

.myBigBtn {
    color: #ffffff;
    background-color: #5A6E9E;
    border-color:#5A6E9E;
    line-height: 100px;
    font-size: 23px;
}

works..

UPDATE

I add all the css file here where it doesn't work either..

cross check your css file, I suspect it might be causing because of any closing bracket "}" — Nilesh Mahajan, Sep 23 '15 at 10:03
include your css top of the bootstrap or using `!important` or clear browser catch — Arun Kumar, Sep 23 '15 at 10:03
Always ensure yourself that your customize.css files are included after (below) the default bootstrap.css file. — mtszkw, Sep 23 '15 at 10:03
Sounds like you have a typo in your css above the first class - like Nilesh says, there may be a missing closing curly brace. Can you copy your whole css file into the bootply — Pete, Sep 23 '15 at 10:05
Well.. I double checked I don't have any missing closing curly brace. I add the css class at the end of the existing boostap.css — yaylitzis, Sep 23 '15 at 10:17
do you actually have this line in: `//here is my class`? comments in css should be done like this: `/* I am a comment */` — Pete, Sep 23 '15 at 10:29
oh my GOD... yes... that's was the reason.... Submit an answer to take the credits — yaylitzis, Sep 23 '15 at 10:31

score 1 · Answer 1 · answered Sep 23 '15 at 10:25

Everything works fine!

Include your CSS file in the <head> after the Bootstrap CSS:

...
<head>
    Bootstrap CSS
    Custom CSS
</head>
...

HTML should look like this:

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>BOOTSTRAP TEMPLATE</title>

        <!-- Bootstrap CSS -->
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link rel="stylesheet" href="css/custom.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body id="body">
        <div class="container">
            <div class="row ">
                <div class="col-md-4">
                    <button type="button" class="btn myBigBtn btn-block ">aaaaaa</button>
                </div>
                <div class="col-md-4">
                    <button type="button" class="btn myBigBtn btn-block">bbbbbb</button>
                </div>
                <div class="col-md-4">
                    <button type="button" class="btn myBigBtn btn-block">cccccc</button>
                </div>
            </div>
        </div>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    </body>
</html>

The custom CSS:

<link rel="stylesheet" href="css/custom.css">

It's good practice to link to an external CSS file.

It works indeed.. However I am curious why it doesn't worked when i added in the same .css — yaylitzis, Sep 23 '15 at 10:28
At the end there is `.myBigBtn .badge`. What means class `.badge` in `.myBigBtn`. What you want is **only** `.myBigBtn` ! — , Sep 23 '15 at 10:40

score 1 · Accepted Answer · answered Sep 23 '15 at 10:33

1

Your problem is the comment:

//here is my class

Comments in css are done like this

/* here is my class */

Change the comment to this and it should work

answered Sep 23 '15 at 10:33

Pete

57,112
28
117
166

score -1 · Answer 3 · answered Sep 23 '15 at 10:07

-1

.myBigBtn and .btn have same prioprity, so styles are applied in order css files are included to page. And so .btn override your styles. That's the most probable cause.

answered Sep 23 '15 at 10:07

ZyXEL

163
1
12

Actually, as the `.myBigBtn` is declared after the bootstrap style, it should take precedence if it is the same level of specifity – Pete Sep 23 '15 at 10:08
You don't understand..... `class="btn myBigBtn btn-block"` this doesnt matter at all. `` vs `` this does. – ZyXEL Sep 23 '15 at 10:19
*You* don't understand: the custom styles are included **after** the bootstrap styles so `.myBigBtn` will be decalred **after** `.btn` and therefore will override `.btn`. In your comment above, the first version will work, the second will not: http://jsfiddle.net/2ubwzurn/ – Pete Sep 23 '15 at 10:22
Yes, 1st is correct. 2nd isn't. And how you could possibly know how author includes his css styles until he mentioned it? – ZyXEL Sep 23 '15 at 10:31
Look at the bootply link in the question – Pete Sep 23 '15 at 10:35
And? `/* CSS used here will be applied after bootstrap.css */` is default comment when creating new bootply. – ZyXEL Sep 23 '15 at 10:42
How about the fact that OP says they include the style twice and it works - obviously points to some sort of parse error above the first style rather than an ordering issue – Pete Sep 23 '15 at 10:45

CSS rule is not affecting HTML

3 Answers3