External CSS file not working with Bootstrap CSS

Question

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="author" content="Emily Thacker">
        <title>[Insert Name of Business Here]</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        <link rel="stylesheet" type="text/css" href="large_css.css">
    </head>
    <body>
    <div class="container-fluid">

    <header class="page-header">
        <h3 class="text-center">[Insert Company Logo here]</h3>
        <div class="btn-group btn-group-justified">
            <a class="btn navigation">Home</a>
            <a class="btn navigation">About</a>
            <div class="btn-group">
                <a class="btn dropdown-toggle navigation" data-toggle="dropdown">
                    Services <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Web</a></li>
                    <li><a href="#">Mobile</a></li>
                    <li><a href="#">App</a></li>
                </ul>
            </div>
            <a class="btn navigation">Contact</a>
        </div>
    </header>


    <section class="">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </section>
    <section>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </section>

    <footer class="modal-footer">
        <li class="list-group-item-heading">list item</li>
        </ul>
        <address>Contact Information</address>
    </footer>
    </div> <!-- closing container -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
    </html>

CSS

body > div > header > div > a.navigation {
    background-color: darkgray;
    color: white;
}

So I'm trying to alter the colors on the navigation bar (anchor tags with btn classes). I've tried increasing specificity, my link to the external css is after the bootstrap cdn, I've cleared the cache, I've used !important. I can't seem to figure out what I'm missing. I'm completely new to bootstrap and am trying to figure out how to incorporate it into my website.

could you also show us your custom css file? you can create a code snippet. — Jeric Cruz, Apr 25 '17 at 01:40
It's only three lines right now; and it got lumped in with the HTML, I'll separate it. — ethacker, Apr 25 '17 at 01:45

score 4 · Accepted Answer · answered Apr 25 '17 at 01:44

4

You forgot to close the tag which includes bootstrap:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Add the last > at the end.

answered Apr 25 '17 at 01:44

Agu Dondo

12,638
7
57
68

@ethacker, have you tried this answer? isn't this answer working yet? – manian Apr 25 '17 at 01:49
1

@manian I just did, and yes it's working. Thanks! I can't believe I missed that. (I did just copy and paste the link from a website, I probably just missed the last > when I did) – ethacker Apr 25 '17 at 01:54

score 1 · Answer 2 · edited May 23 '17 at 11:46

Start using IDE & syntax highlighting feature of the IDE.

This is not a direct answer to your question but it will save lots of your development hours in future to avoid these kinds of issues.

I hope you could have spent at least 30 minutes on trying to solve this issue and by posting it SO too. But I found the issue immediately when I looked at your code. This is because the syntax highlighting feature in SO code block's.

I got into these kind of issues many times during initial stages of my career & I spent tons of hours trying to solve the issue & later found that it was just a typo error or syntax error. Then I started using IDE and it now saves lot's of hours to me.

Always use an IDE and try to use the features of IDE. Here are some of the advantages of using IDE. https://stackoverflow.com/a/208221/4874281, Why is debugging better in an IDE?

And here is a list of IDE's that you can choose from, https://www.g2crowd.com/categories/integrated-development-environment-ide

I use PHPstorm, and it didn't indicate it (usually there is some red squiggle or something). Thanks! — ethacker, Apr 25 '17 at 02:27
oh ok. PHPstorm is a great IDE and it has many additional plugins to enhance already resourceful tool. — manian, Apr 25 '17 at 02:38

External CSS file not working with Bootstrap CSS

2 Answers2