htmlcssbootstrapper

Carousel, Accordions, & Alerts w/ Bootstrap


My teacher has been assigning my class these trainings from a class on Lynda.com (Bootstrap 4 Essentials Trainings).

I have no idea what's wrong with my code. I copied it directly from the trainings and I'm not sure what happened.

In one document, I copied the code and made alterations to fit the requirements for the assignment I've been given. In the other, I copy-pasted the elements directly from the completed files that are working as they should when I run them. Neither of these documents is functioning properly (these files are for an assignment that is separate from the Lynda training files):

<html lang="en">
<head>
    <title>Worksheet 8</title>
    
    <!--
    Author: Crab
    Date: 11/20/2020

    Filename: worksheet8.html
    -->
    
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
    <header>
        <h1 class="p-3 text-left text-light bg-dark d-md-none d-sm-block">Chapter 8 Worksheet</h1>
    </header>
    <header class="jumbotron jumbotron-fluid p-4 bg-dark d-none d-md-block">
        <h1 class="display-1 mb-4 text-center text-light">Chapter 8 Worksheet</h1>
    </header>
    <div class="container">
        <h2>Carousel</h2>
        
        <div class="row">
            <section class="col-12">
                <div class="carousel slide" id="featured" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#feature" data-slide-to="0"></li>
                        <li data-target="#feature" data-slide-to="1"></li>
                        <li data-target="#feature" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item">
                            <img class="d-nlock w-100" src="images/image1.JPG" alt="Lifestyle Photo">
                        </div>
                        <div class="carousel-item">
                            <img class="d-nlock w-100" src="images/image2.JPG" alt="Mission">
                            <div class="carousel-caption d-none d-md-block">
                                <h3>Pete, owner of McAllister</h3>
                                <p>"Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments."</p>
                            </div>
                        </div>
                        <div class="carousel-item active">
                            <div><img class="d-nlock w-100" src="images/image3.JPG" alt="Vaccinations"></div>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true">
                            <span class="sr-only">Previous</span>
                        </span>
                    </a>
                    <a class="carousel-control-next" href="#featured" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true">
                            <span class="sr-only">Next</span>
                        </span>
                    </a>
                </div>

                <h2>Our Mission</h2>

                <p>Wisdom Pet Medicine strives to blend the best in traditional and alternative medicine in the diagnosis and treatment of companion animals including dogs, cats, birds, reptiles, rodents, and fish. We apply the wisdom garnered in the centuries old tradition of veterinary medicine, to find the safest treatments and cures.</p>

                <p>We strive to be your pet's medical experts from youth through the senior years. We build preventative health care plans for each and every one of our patients, based on breed, age, and sex, so that your pet receives the most appropriate care at crucial milestones. We want to give your pet a long and healthy life.</p>
            </section>
        </div><!-- row -->
        
        <h2 class="pt-4">Accordion</h2>
        
        <div class="accordion" id="servicesaccordion">
                <div class="card">
                    <div class="card-header" id="groomingheading">
                        <h5 class="mb-0">
                            <a href="#grooming" data-toggle="collapse" aria-expanded="true" aria-controls="grooming">
                                Grooming
                            </a>
                        </h5>
                    </div><!-- card header -->

                    <div id="grooming" class="collapse show" data-parent="#servicesaccordion" aria-labelledby="groomingheading">
                        <div class="card-body">
                            <p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
                        </div>
                    </div><!-- collapse -->
                </div><!-- card --> 

                <div class="card">
                    <div class="card-header" id="generalhealthheading">
                      <h5 class="mb-0">
                        <a href="#generalhealth"
                          class="collapsed"
                          data-toggle="collapse"
                          aria-expanded="false"
                          aria-controls="generalhealth"
                        >General Health</a>
                      </h5>
                    </div><!-- card header -->

                    <div id="generalhealth" class="collapse" data-parent="#servicesaccordion" aria-labelledby="generalhealthheading">
                        <div class="card-body">
                            <p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p>
                        </div>
                    </div><!-- card collapse -->
                </div><!-- card -->

                <div class="card">
                    <div class="card-header" id="nutritionheading">
                        <h5 class="mb-0">
                            <a href="#nutrition" class="collapsed" data-toggle="collapse"
                              aria-expanded="false">
                                Nutrition
                            </a>
                        </h5>
                    </div><!-- card header -->

                    <div id="nutrition" class="collapse" data-parent="#servicesaccordion" aria-labelledby="nutritionheading">
                        <div class="card-body">
                            <p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p>
                        </div>
                    </div><!-- collapse -->
                </div><!-- card -->
            </div><!-- accordion -->
        
        <h2 class="pt-4">Alert</h2>
        
        <div class="alert alert-info alert-dismissable fade show">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>  
            </button>
            <h4 class="alert-heading">Standard Checkups</h4>
            <p class="mb-2">Our standard checkups offer ultrasounds, x-rays and dental cleanings.</p>
            <a href="#">More Info</a>
        </div>
    </div><!-- container -->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>```

Solution

  • Replace the last 3 with these

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    

    And it should work fine now, it was most likely a problem with your script tags