mt-5
<div> <h1>Components</h1> </div>

<section class="mt-5">

<h3>Accordion</h3>

<div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion 1 </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> Donec pulvinar metus at erat pulvinar, dignissim ornare nunc mollis. In lorem ex, finibus sit amet libero quis, ullamcorper ultricies felis. Integer id sapien sed augue aliquam semper. Vestibulum vestibulum purus sed turpis viverra aliquet. Cras at urna sodales, dignissim diam vel, rutrum odio. Fusce dui quam, egestas in dolor eu, pretium blandit orci. Nulla tristique a tortor et sagittis. Donec dignissim iaculis libero. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Accordion 2 </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur quam vitae odio euismod, porttitor lobortis arcu semper. Suspendisse rutrum eros id bibendum varius. Nunc vel velit ex. Nam non ligula in ex feugiat facilisis at vitae eros. Vestibulum aliquam, ex vel accumsan mattis, lorem mauris posuere elit, id elementum nisl mauris vitae arcu. Mauris tincidunt ligula a augue gravida, at cursus est interdum. Aenean tortor massa, posuere et venenatis id, aliquam id tellus. Suspendisse eleifend nunc sit amet erat euismod, in congue lorem scelerisque. Sed nec velit molestie, maximus tellus vitae, maximus enim. Vestibulum imperdiet dolor non nisi luctus imperdiet. Aliquam gravida elit non dui euismod ullamcorper non id elit. Curabitur ultricies erat ac odio imperdiet auctor. Etiam euismod sodales magna vel rutrum. Donec fringilla a est eget volutpat. Cras non scelerisque nisi, eget luctus augue. Vivamus viverra nunc nec elementum dictum. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Accordion 3 </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> In pharetra vel odio tristique gravida. Cras non mauris non turpis egestas ullamcorper eget varius lorem. Aenean eget velit nec lectus aliquet varius eget ut felis. Aenean consectetur ipsum id dolor facilisis, ut cursus leo dignissim. Etiam vitae efficitur dui, a placerat ipsum. Vivamus ornare sed neque non sodales. Suspendisse ac nisl eu mauris sagittis accumsan vitae eget enim. </div> </div> </div> </div>

</section>

<section class="mt-5">

<h3>Alerts</h3>

<div class="row"> <div class="col-md-6"> <div class="alert alert-primary">This is a Primary alert.</div> </div> <div class="col-md-6"> <div class="alert alert-secondary">This is a Secondary alert.</div> </div> <div class="col-md-6"> <div class="alert alert-success">This is a Success alert.</div> </div> <div class="col-md-6"> <div class="alert alert-danger">This is a Danger alert.</div> </div> <div class="col-md-6"> <div class="alert alert-warning">This is a Warning alert.</div> </div> <div class="col-md-6"> <div class="alert alert-info">This is an info alert.</div> </div> <div class="col-md-6"> <div class="alert alert-light">This is an Light alert.</div> </div> <div class="col-md-6"> <div class="alert alert-dark">This is an Dark alert.</div> </div> </div> </section>

<div class="mt-5"> <h3>Badges</h3> </div>
mb-5
<span class="badge bg-primary">Primary</span> <span class="badge bg-secondary">Secondary</span> <span class="badge bg-success">Success</span> <span class="badge bg-danger">Danger</span> <span class="badge bg-warning">Warning</span> <span class="badge bg-info">Info</span> <span class="badge bg-light text-dark">Light</span> <span class="badge bg-dark">Dark</span>
<span class="badge bg-primary">Primary</span> <span class="badge bg-secondary">Secondary</span> <span class="badge bg-success">Success</span> <span class="badge bg-danger">Danger</span> <span class="badge bg-warning">Warning</span> <span class="badge bg-info">Info</span> <span class="badge bg-light text-dark">Light</span> <span class="badge bg-dark">Dark</span>

<section class="mt-5">

<h3>Breadcrumb</h3>

<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Company</a></li> <li class="breadcrumb-item active" aria-current="page">Careers</li> </ol> </nav>

</section>

<div class="mt-5"> <h3>Buttons</h3> </div>
<section class="mb-5">

<h4>Regular</h4>

<button class="btn btn-primary me-2">Primary</span> <button class="btn btn-secondary me-2">Secondary</span> <button class="btn btn-success me-2">Success</span> <button class="btn btn-danger me-2">Danger</span> <button class="btn btn-warning me-2">Warning</span> <button class="btn btn-info me-2">Info</span> <button class="btn btn-light text-dark me-2">Light</span> <button class="btn btn-dark me-2">Dark</span>

</section>

<section>

<h4>Outline</h4>

<button class="btn btn-outline-primary me-2">Primary</span> <button class="btn btn-outline-secondary me-2">Secondary</span> <button class="btn btn-outline-success me-2">Success</span> <button class="btn btn-outline-danger me-2">Danger</span> <button class="btn btn-outline-warning me-2">Warning</span> <button class="btn btn-outline-info me-2">Info</span> <button class="btn btn-outline-light text-dark me-2">Light</span> <button class="btn btn-outline-dark me-2">Dark</span>

</section>

mb-5
<section class="mt-5"> <h4>Large</h4> <div> <button type="button" class="btn btn-lg me-2 btn-primary">Large Button</button> <button type="button" class="btn btn-lg me-2 btn-secondary">Large Button</button> </div> </section>
<section class="mt-5"> <h4>Small</h4> <div> <button type="button" class="btn btn-sm me-2 btn-primary">Small Button</button> <button type="button" class="btn btn-sm me-2 btn-secondary">Small Button</button> </div> </section>

<section class="mt-5"> <h4>Disabled</h4> <div> <button type="button" class="btn btn-primary me-2" disabled>Button</button> <button type="button" class="btn btn-secondary me-2" disabled>Button</button> </div> </section>

<section>

<h3>Pagination</h3>

</section>

mb-5
<section> <h4>Regular</h4> <nav> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active" aria-current="page"> <a class="page-link" href="#">2</a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

</section>
<section> <h4>Large</h4> <nav> <ul class="pagination pagination-lg"> <li class="page-item active" aria-current="page"> <span class="page-link">1</span> </li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> </ul> </nav>

</section>

<section> <h4>Small</h4> <nav> <ul class="pagination pagination-sm"> <li class="page-item active" aria-current="page"> <span class="page-link">1</span> </li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> </ul> </nav>

</section>