Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

CSS not changing the text color

Using Bootstrap4, have set up a div with the class of greenfooter (that takes care ofthe background color and padding), inside I created a container with four columns.

I set up the css to turn the H5 a lighter green color, and set the a tag to be white and lighter green/no text decoration when hovered.

The css code for the color change isn’t working, and I think my css is incorrect, can anybody see where I went wrong?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

html

    <div class="w-100 g-py-30 greenfooter">
        <div class="container">
            <div class="row">
            <div class="col-md-3">
                <h5>McDowell Technical<br>
                Community College</h5>
                <p>54 College Drive<br>
                  Marion, NC 28752</p>
                <p>
                <a href="https://www.google.com/maps/place/McDowell+Technical+Community+College/@35.6555866,-81.9620476,15z/data=!4m5!3m4!1s0x0:0xf42cd81f2a7dd3ec!8m2!3d35.6555866!4d-81.9620476" target="_blank" class="g-color-white">Get Directions</a> </p>
                <h5>call: 828-652-6021 </h5>
            </div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            </div>
        </div>
    </div>

css

    .greenfooter {
        background-color: #5C8627;
        color: white;
    }
    .greenfooter.container.row.col-md-3 h5 {
        color: #C8E72F;
    }

    .greenfooter.container.row.col-md-3 a {
        color: #ffffff;
    }

    .greenfooter.container.row.col-md-3 a:hover {
        color: #C8E72F;
        text-decoration: none;
    }

>Solution :

container is child of greenfooter class element so, a space is needed and so on for row, col-md-3 and h5

.greenfooter {
    background-color: #5C8627;
    color: white;
}
.greenfooter .container.row.col-md-3 h5 {
    color: #C8E72F;
}

.greenfooter .container .row .col-md-3 a {
    color: #ffffff;
}

.greenfooter .container .row .col-md-3 a:hover {
    color: #C8E72F;
    text-decoration: none;
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading