Why isn't bootstrap working?

HTML-CSS
1

What I am trying to do:

I am trying to use this bootstrap link in order to style my site. The problem I am having is when I copy full path, the page does not have any styling. I have already Googled and everything, but no luck.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

I am going to post the code I have because I have NO idea what I’m doing wrong here.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>

  <section id="title">

    <!-- Nav Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="">tindog</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
        <ul class="navbar-nav ms-auto">
            <li class="nav-item">
                <a class="nav-link" href="">Contact</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="">Download</a>
            </li>

        </ul>
        </div>
    </nav>



    <!-- Title -->

    <div>
      <h1>Meet new and interesting dogs nearby.</h1>
      <button type="button">Download</button>
      <button type="button">Download</button>
    </div>
    <div>
      <img src="images/iphone6.png" alt="iphone-mockup">
    </div>

  </section>


  <!-- Features -->

  <section id="features">

    <h3>Easy to use.</h3>
    <p>So easy to use, even your dog could do it.</p>

    <h3>Elite Clientele</h3>
    <p>We have all the dogs, the greatest dogs.</p>

    <h3>Guaranteed to work.</h3>
    <p>Find the love of your dog's life or your money back.</p>

  </section>


  <!-- Testimonials -->

  <section id="testimonials">

    <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
    <img src="images/dog-img.jpg" alt="dog-profile">
    <em>Pebbles, New York</em>

    <!-- <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
    <img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
    <em>Beverly, Illinois</em> -->

  </section>


  <!-- Press -->

  <section id="press">
    <img src="images/techcrunch.png" alt="tc-logo">
    <img src="images/tnw.png" alt="tnw-logo">
    <img src="images/bizinsider.png" alt="biz-insider-logo">
    <img src="images/mashable.png" alt="mashable-logo">

  </section>


  <!-- Pricing -->

  <section id="pricing">

    <h2>A Plan for Every Dog's Needs</h2>
    <p>Simple and affordable price plans for your and your dog.</p>


    <h3>Chihuahua</h3>
    <h2>Free</h2>
    <p>5 Matches Per Day</p>
    <p>10 Messages Per Day</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>


    <h3>Labrador</h3>
    <h2>$49 / mo</h2>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>


    <h3>Mastiff</h3>
    <h2>$99 / mo</h2>
    <p>Pirority Listing</p>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>

  </section>


  <!-- Call to Action -->

  <section id="cta">

    <h3>Find the True Love of Your Dog's Life Today.</h3>
    <button type="button">Download</button>
    <button type="button">Download</button>

  </section>


  <!-- Footer -->

  <footer id="footer">

    <p>© Copyright TinDog</p>

  </footer>


</body>

</html>
2

Hmm, I copy/pasted your code into the index.html editor and the bootstrap styling showed up for me (I’m assuming this is for the product landing page certification project). So it does appear to work at least some of the time. Probably need more information from you in order to replicate your issue. What browser/OS are you using? Are you getting any errors in the console? Have you tried using a different browser?

3

Thank you for your response, bbsmooth.

I am using Chrome on my Windows laptop.

4

Specifically, I am using it from Atom. the file name has this in it –

AppData\Local

maybe that is the problem?

5

The code you posted looked like it was for the FCC landing page project and so I tested it in the FCC editor for the landing page project to verify it works there, since that is where you will ultimately have to put your code in order to pass the certification for that project. But it sounds like you are doing this development on your own computer. That’s fine. You should be able to open the HTML file in any browser on your computer and it should work properly. I don’t use Atom so I can’t help you there.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.