I am trying to learn bootstrap. I took the code from the bootstrap docs for the 'Flush' Accordion but mine just looks completely wrong. I don't understand why. I've linked the CSS stylesheet and the JS Bundle. This is what it looks like.
I haven't tampered with the default code at all. I don't understand what I am doing wrong. Any help appreciated, thank you.
Here is my code: (the accordion is at the very bottom)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<nav >
<a href="#home" >{ }</a>
<button type="button" data-toggle="collapse" data-target="#navmenu"
aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navmenu">
<ul >
<li >
<a href="#home" >Home</a>
</li>
<li >
<a href="#courses" >Courses</a>
</li>
<li >
<a href="#contact" >Contact</a>
</li>
</ul>
</div>
</nav>
<section id="home">
<div >
<div >
<div >
<h1 >Become a <span >Web Developer</span></h1>
<p >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste labore voluptatum nisi non error
impedit alias ullam. Sint numquam quae minus quam, aut rem, sed officiis inventore consectetur
eveniet veniam.
</p>
<button >Start Now</button>
</div>
<img src="/images/home.jpg" alt="Responsive image">
</div>
</div>
</section>
<section >
<div >
<div >
<h3 >Sign Up For Our Newsletter</h3>
<div >
<input type="text" placeholder="Enter Email" aria-label="Enter email"
aria-describedby="button-subscribe">
<button type="button" id="button-subscribe">Subscribe</button>
</div>
</div>
</div>
</section>
<section>
<div id="courses">
<div >
<div >
<div >
<div >
<div >
<i ></i>
</div>
<h3 >Virtual</h3>
<p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
asperiores
tempora itaque delectus quod quasi.</p>
<a href="#" >Read More</a>
</div>
</div>
<div >
<div >
<div >
<i ></i>
</div>
<h3 >Hybird</h3>
<p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
asperiores
tempora itaque delectus quod quasi.</p>
<a href="#" >Read More</a>
</div>
</div>
<div >
<div >
<div >
<i ></i>
</div>
<h3 >In-Person</h3>
<p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
asperiores
tempora itaque delectus quod quasi.</p>
<a href="#" >Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div >
<div >
<div >
<img src="/images/learn.jpg" alt="Learn image" >
</div>
<div >
<h2>Learn The Fundamentals</h2>
<p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed autem
quibusdam alias
magnam molestias facere.</p>
<p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, culpa libero.
Libero, sunt nam.
Vel voluptatum accusamus cupiditate dolore, distinctio, sapiente perspiciatis harum nihil
expedita repellat amet inventore non deleniti?</p>
<a href="" >
<i ></i> Read More</a>
</div>
</div>
</div>
</section>
<section >
<div >
<div >
<div >
<h2>Build Projects</h2>
<p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed autem
quibusdam alias
magnam molestias facere.</p>
<p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, culpa libero.
Libero, sunt nam.
Vel voluptatum accusamus cupiditate dolore, distinctio, sapiente perspiciatis harum nihil
expedita repellat amet inventore non deleniti?</p>
<a href="" >
<i ></i> Read More</a>
</div>
<div >
<!-- <img src="" alt="Learn image" > -->
</div>
</div>
</div>
</section>
<section>
<div >
<h1 >Frequently Asked Questions</h1>
<div id="accordionFlushExample">
<div >
<h2 id="flush-headingOne">
<button type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample">
<div >Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion
body.</div>
</div>
</div>
<div >
<h2 id="flush-headingTwo">
<button type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample">
<div >Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion
body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
<div >
<h2 id="flush-headingThree">
<button type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false"
aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree"
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div >Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion
body. Nothing more exciting happening here in terms of content, but just filling up the
space to make it look, at least at first glance, a bit more representative of how this would
look in a real-world application.</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p"
crossorigin="anonymous"></script>
</body>
</html>
CodePudding user response：
This is because you have [email protected] in your link and in the script below you have [email protected]
Replace your link at the top with this one
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
That should make work your Accordion