How to avoid bootstrap css overriding the custom css?

Question

I am using a custom css which looks as follows for a html page exactly as per this example, lets say index.html:

html {
  overflow-y: scroll;
}

body {
    font-family: Helvetica, Arial, Verdana;
    background: #efefef url('../img/ticks.png') repeat 0 0;
    margin:15px 0 0 0;
    font-size:12px;
}


.container { 
    position: relative; 
    width: 960px; 
    margin: 0 auto; 
    -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;  
}

#filters {
    margin:1%;
    padding:0;
    list-style:none;
}

    #filters li {
        float:left;
    }

    #filters li span {
        display: block;
        padding:5px 20px;       
        text-decoration:none;
        color:#666;
        cursor: pointer;
    }

    #filters li span.active {
        background: #e95a44;
        color:#fff;
    }



#portfoliolist .portfolio {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    width:23%;
    margin:1%;
    display:none;
    float:left;
    overflow:hidden;
}

    .portfolio-wrapper {
        overflow:hidden;
        position: relative !important;
        background: #666;
        cursor:pointer;
    }

    .portfolio img {
        max-width:100%;
        position: relative;
        top:0;
    -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);     
    }

    .portfolio .label {
        position: absolute;
        width: 100%;
        height:40px;
        bottom:-40px;
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    }

        .portfolio .label-bg {
            background: #e95a44;
            width: 100%;
            height:100%;
            position: absolute;
            top:0;
            left:0;
        }

        .portfolio .label-text {
            color:#fff;
            position: relative;
            z-index:500;
            padding:5px 8px;
        }

            .portfolio .text-category {
                display:block;
                font-size:9px;
            }

    .portfolio:hover .label {
    bottom:0;
  }
    .portfolio:hover img {
    top:-30px;
  }  





/* #Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container {
        width: 768px; 
    }
}


/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
    .container { 
        width: 95%; 
    }

    #portfoliolist .portfolio {
        width:48%;
        margin:1%;
    }       

    #ads {
        display:none;
    }

}


/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        width: 70%;
    }

    #ads {
        display:none;
    }

}

/* #Clearing */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.row:after,
.clearfix:after {
  clear: both; }
.row,
.clearfix {
  zoom: 1; }

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

To match the template of index.html with rest of the pages of the website (which is completely dependent on bootstrap css and independent of this css), especially to the header and footer part, I added the following lines to the header field of index.html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-jhdkjsahd#SomeRandomCheckSumProvidedByBootstrap#asjdhasdkjhsdkj" crossorigin="anonymous">

This alters the actual behavior from the following

to something like this

where the text on hover disappears.

The html code of the above element is as follows:

<div class="portfolio logo" data-cat="logo">
                <div class="portfolio-wrapper">             
                    <img src="img/portfolios/logo/5.jpg" alt="" />
                    <div class="label">
                        <div class="label-text">
                            <a class="text-title">Bird Document</a>
                            <span class="text-category">Logo</span>
                        </div>
                        <div class="label-bg"></div>
                    </div>
                </div>
            </div>

I use the boostrap css only for header and footer of index.html page, and hence, I tried to use <style scoped> tag as described here, but I am afraid that it is not a good way of dealing with this.

How to fix this issue?

Instead of doing scoped, you can inspect the element and show the hierarchy of inheritance, so that we can change the rule to match the specificity. Is it possible to make a demo of it so that we can check if we can help you in correcting the specificity? — Praveen Kumar Purushothaman, Apr 21 '17 at 12:37
Sorry, I am super bad with css. I took the example from https://www.queness.com/resources/html/simple-portfolio-page/index.html and added the line `````` to the header. So thats the demo, you can check. Thank you. — kingmakerking, Apr 21 '17 at 12:40
Place the bootstrap `css` file above your custom `css` file. — Red, Apr 21 '17 at 12:41
@RichardMauritz That didn't solve the issue. I already tried. — kingmakerking, Apr 21 '17 at 12:44
@kingmakerking Can you show us a demo in [JSBin](http://jsbin.com)? — Praveen Kumar Purushothaman, Apr 21 '17 at 12:47
@PraveenKumar here it is https://jsbin.com/xacuduweka/1/edit?html,css,output. But like I said, it is easy to download the acutual folder from queness.com/resources/html/simple-portfolio-page/index.html and add the line to it — kingmakerking, Apr 21 '17 at 13:00
@PraveenKumar I don't think you can see it in the demo. Can you? — kingmakerking, Apr 21 '17 at 13:15

score 4 · Accepted Answer · answered Apr 21 '17 at 13:58

Without seeing the actual code its impossible to give you an actual markup for your situation. However, at the root of the problem is Specificity. You can read more about it here.

Basically, the more selectors you use in your CSS, the higher it will rank in specificity. For example, referencing your HTML above,

.text-title {}

is not very specific.

.label-text .text-title {}

is more specific and will take precedence.

.label .label-text .text-title {}

is even more specific. And:

div.label > .label-text > .text-title {}

is yet even more specific and will take precedence over all the others.

So the solution to the problem is that your CSS needs to get more specific than the Boostrap CSS. Inspect the problem elements in the browser and see what selectors Bootstrap is using. Then use more specific ones in your custom CSS.

Unfortunately, Bootstrap uses !important in a number of situations, so you will be forced to use it as well to over ride theirs.

Useful thing to know. Thanks! – kingmakerking Apr 26 '17 at 08:11 — kingmakerking, Apr 26 '17 at 08:11

score 0 · Answer 2 · answered Aug 08 '17 at 17:37

0

I faced the same issue with what you are trying to do and finally solved it by setting the display property of the label div to block. I also noticed that chrome automatically fixes the issue contrary to Safari.

answered Aug 08 '17 at 17:37

Raef Khaled

21
2

score 0 · Answer 3 · edited Nov 21 '20 at 02:14

0

What you can do is that you can add strong text !important in each attribute of your code in CSS.

I Found that to be the most useful and easiest solution.

edited Nov 21 '20 at 02:14

liakoyras

1,101
12
27

answered Nov 20 '20 at 07:22

Cadet Hasib

59
2

I don't think this is a good solution. CSS means cascading, using !important on everything beats some of the purpose. – liakoyras Nov 20 '20 at 08:55

score -1 · Answer 4 · answered Apr 21 '17 at 12:58

You can add !important after each style in your class. Adding !important basically will give the CSS more priority/weight which allows you to override other styles.

OR you can do this with-

Link your custom.css file should be the last entry below the bootstrap.css. Custom.css style will override bootstrap.css

Ex Html:-

How to avoid bootstrap css overriding the custom css?

4 Answers4

Linked