Advanced Components | JS-Dev Starter

Accordion

Basic Accordion

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Content goes here...
      </div>
    </div>
  </div>
</div>

Flush Accordion

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body.

<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne">
        Flush Accordion Item #1
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Content...</div>
    </div>
  </div>
</div>

Carousel

Basic Carousel with Controls

First Slide

This is the first slide of the carousel

Second Slide

This is the second slide of the carousel

Third Slide

This is the third slide of the carousel

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Carousel with Indicators

Slide One

Content with indicators

Slide Two

Second slide content

Slide Three

Third slide content

<div id="carouselWithIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselWithIndicators" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#carouselWithIndicators" data-bs-slide-to="1"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">Content...</div>
    <div class="carousel-item">Content...</div>
  </div>
</div>

Offcanvas

Offcanvas Sidebar

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Home
Profile
Settings
Logout

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
  Toggle Offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas Title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    Content goes here...
  </div>
</div>

Tabs & Pills

Basic Tabs

Home Content

This is the home tab content. You can add any content here including text, images, forms, or other components.

Profile Content

This is the profile tab content. Each tab can contain completely different content and layouts.

Contact Content

This is the contact tab content. Tabs are great for organizing related information in a compact space.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane">
      Home
    </button>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel">
    Content...
  </div>
</div>

Pills Navigation

Pills Home

This is the pills-style navigation. It has a more rounded, modern appearance.

Pills Profile

Profile content in pills format.

Pills Messages

Messages content in pills format.

<ul class="nav nav-pills" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home">
      Home
    </button>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel">
    Content...
  </div>
</div>

Collapse

Basic Collapse

Collapsed Content

This content was hidden and is now visible! The collapse component is perfect for showing/hiding content, creating expandable sections, or building FAQ pages.

You can include any content here: text, images, forms, or even other Bootstrap components.

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
  Toggle Collapse
</button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Content to be collapsed...
  </div>
</div>

Multiple Collapse Targets

First Collapse

This is the first collapsible content area.

Second Collapse

This is the second collapsible content area.

Dropdowns

Basic Dropdowns

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Something else</a></li>
  </ul>
</div>

Split Button Dropdowns

Tooltips & Popovers

Tooltips

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip text">
  Tooltip on top
</button>

<script>
// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>

Popovers

<button type="button" class="btn btn-primary" data-bs-toggle="popover" 
        title="Popover title" data-bs-content="Popover content goes here">
  Click to toggle popover
</button>

<script>
// Initialize popovers
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

Progress Bars

Basic Progress Bars

Basic Progress (25%)

With Label (50%)

50%

Success Progress (75%)

75%

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>

Striped and Animated Progress

Striped Progress

Animated Striped Progress

Multiple Progress Bars

Spinners

Border Spinners

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Growing Spinners

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Spinner Sizes

Badges

Basic Badges

Example heading New

Another heading Featured

Primary Secondary Success Danger Warning Info Light Dark

<h5>Example heading <span class="badge bg-secondary">New</span></h5>

<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>

Pill Badges

Primary Secondary Success Danger Warning Info

<span class="badge rounded-pill bg-primary">Primary</span>

Notification Badges

<button type="button" class="btn btn-primary position-relative">
  Messages
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
  </span>
</button>

Breadcrumbs

Basic Breadcrumb

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

Custom Breadcrumb Dividers

Pagination

Basic Pagination

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

Pagination Sizes

<!-- Large pagination -->
<ul class="pagination pagination-lg">...</ul>

<!-- Small pagination -->
<ul class="pagination pagination-sm">...</ul>

Advanced Bootstrap Components