Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
Slides OnlyControlsIndicatorsCaptionsEverythingDarkCrossfadeOptions

Carousel

Slides Only

First slide
Second slide
Third slide
Fourth slide 
<div id="carouselSlidesOnly">
  <div>
    <div>
      <img src="../img/1200x600-success.png" alt="First slide">
    </div>
    <div>
      <img src="../img/1200x600-danger.png" alt="Second slide">
    </div>
    <div>
      <img src="../img/1200x600-warning.png" alt="Third slide">
    </div>
    <div>
      <img src="../img/1200x600-info.png" alt="Fourth slide">
    </div>
  </div>
</div>
<div id="carouselSlidesOnly"> <div> <div> <img src="../img/1200x600-success.png" alt="First slide"> </div> <div> <img src="../img/1200x600-danger.png" alt="Second slide"> </div> <div> <img src="../img/1200x600-warning.png" alt="Third slide"> </div> <div> <img src="../img/1200x600-info.png" alt="Fourth slide"> </div> </div> </div>

Controls

First slide
Second slide
Third slide
Fourth slide 
<div id="carouselControls">
  <div>
    <div>
      <img src="../img/1200x600-success.png" alt="First slide">
    </div>
    <div>
      <img src="../img/1200x600-danger.png" alt="Second slide">
    </div>
    <div>
      <img src="../img/1200x600-warning.png" alt="Third slide">
    </div>
    <div>
      <img src="../img/1200x600-info.png" alt="Fourth slide">
    </div>
  </div>
  <button>
    <span></span>
    <span>Previous</span>
  </button>
  <button>
    <span></span>
    <span>Next</span>
  </button>
</div>
<div id="carouselControls"> <div> <div> <img src="../img/1200x600-success.png" alt="First slide"> </div> <div> <img src="../img/1200x600-danger.png" alt="Second slide"> </div> <div> <img src="../img/1200x600-warning.png" alt="Third slide"> </div> <div> <img src="../img/1200x600-info.png" alt="Fourth slide"> </div> </div> <button> <span></span> <span>Previous</span> </button> <button> <span></span> <span>Next</span> </button> </div>

Indicators

First slide
Second slide
Third slide
Fourth slide 
<div id="carouselIndicators">
  <div>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
  </div>
  <div>
    <div>
      <img src="../img/1200x600-success.png" alt="First slide">
    </div>
    <div>
      <img src="../img/1200x600-danger.png" alt="Second slide">
    </div>
    <div>
      <img src="../img/1200x600-warning.png" alt="Third slide">
    </div>
    <div>
      <img src="../img/1200x600-info.png" alt="Fourth slide">
    </div>
  </div>
</div>
<div id="carouselIndicators"> <div> <button></button> <button></button> <button></button> <button></button> </div> <div> <div> <img src="../img/1200x600-success.png" alt="First slide"> </div> <div> <img src="../img/1200x600-danger.png" alt="Second slide"> </div> <div> <img src="../img/1200x600-warning.png" alt="Third slide"> </div> <div> <img src="../img/1200x600-info.png" alt="Fourth slide"> </div> </div> </div>

Captions

First slide

Caption

This text describes the first slide

Second slide

Caption

This text describes the second slide

Third slide

Caption

This text describes the third slide

Fourth slide

Caption

This text describes the fourth slide

<div id="carouselCaptions">
  <div>
    <div>
      <img src="../img/1200x600-success.png" alt="First slide">
      <div>
        <h3>Caption</h3>
        <p>This text describes the first slide</p>
      </div>
    </div>
    <div>
      <img src="../img/1200x600-danger.png" alt="Second slide">
      <div>
        <h3>Caption</h3>
        <p>This text describes the second slide</p>
      </div>
    </div>
    <div>
      <img src="../img/1200x600-warning.png" alt="Third slide">
      <div>
        <h3>Caption</h3>
        <p>This text describes the third slide</p>
      </div>
    </div>
    <div>
      <img src="../img/1200x600-info.png" alt="Fourth slide">
      <div>
        <h3>Caption</h3>
        <p>This text describes the fourth slide</p>
      </div>
    </div>
  </div>
</div>
<div id="carouselCaptions"> <div> <div> <img src="../img/1200x600-success.png" alt="First slide"> <div> <h3>Caption</h3> <p>This text describes the first slide</p> </div> </div> <div> <img src="../img/1200x600-danger.png" alt="Second slide"> <div> <h3>Caption</h3> <p>This text describes the second slide</p> </div> </div> <div> <img src="../img/1200x600-warning.png" alt="Third slide"> <div> <h3>Caption</h3> <p>This text describes the third slide</p> </div> </div> <div> <img src="../img/1200x600-info.png" alt="Fourth slide"> <div> <h3>Caption</h3> <p>This text describes the fourth slide</p> </div> </div> </div> </div>

Everything

Carousel with controls, indicators and captions

First slide

Caption

This text describes the first slide

Second slide

Caption

This text describes the second slide

Third slide

Caption

This text describes the third slide

Fourth slide

Caption

This text describes the fourth slide

<div id="carouselAll">
  <div>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
  </div>
  <div>
    <div>
      <img src="../img/1200x600-success.png" alt="First slide">
      <div>
        <h3>Caption</h3>
        <p>This text describes the first slide</p>
      </div>
    </div>
    <div>
      <img src="../img/1200x600-danger.png" alt="Second slide">
      <div>
        <h3>Caption</h3>
        <p>This text describes the second slide</p>
      </div>
    </div>
    <div>
      <img src="../img/1200x600-warning.png" alt="Third slide">
      <div>
        <h3>Caption</h3>
        <p>This text describes the third slide</p>
      </div>
    </div>
    <div>
      <img src="../img/1200x600-info.png" alt="Fourth slide">
      <div>
        <h3>Caption</h3>
        <p>This text describes the fourth slide</p>
      </div>
    </div>
  </div>
  <button>
    <span></span>
    <span>Previous</span>
  </button>
  <button>
    <span></span>
    <span>Next</span>
  </button>
</div>
<div id="carouselAll"> <div> <button></button> <button></button> <button></button> <button></button> </div> <div> <div> <img src="../img/1200x600-success.png" alt="First slide"> <div> <h3>Caption</h3> <p>This text describes the first slide</p> </div> </div> <div> <img src="../img/1200x600-danger.png" alt="Second slide"> <div> <h3>Caption</h3> <p>This text describes the second slide</p> </div> </div> <div> <img src="../img/1200x600-warning.png" alt="Third slide"> <div> <h3>Caption</h3> <p>This text describes the third slide</p> </div> </div> <div> <img src="../img/1200x600-info.png" alt="Fourth slide"> <div> <h3>Caption</h3> <p>This text describes the fourth slide</p> </div> </div> </div> <button> <span></span> <span>Previous</span> </button> <button> <span></span> <span>Next</span> </button> </div>

Dark

Carousel with dark controls, indicators and captions

First slide

Caption

This text describes the first slide

Second slide

Caption

This text describes the second slide

Third slide

Caption

This text describes the third slide

Fourth slide

Caption

This text describes the fourth slide

<div id="carouselDark">
  <div>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
  </div>
  <div>
    <div>
      <img src="../img/1200x600-success.png" alt="First slide">
      <div>
        <h3>Caption</h3>
        <p>This text describes the first slide</p>
      </div>
    </div>
    <div>
      <img src="../img/1200x600-danger.png" alt="Second slide">
      <div>
        <h3>Caption</h3>
        <p>This text describes the second slide</p>
      </div>
    </div>
    <div>
      <img src="../img/1200x600-warning.png" alt="Third slide">
      <div>
        <h3>Caption</h3>
        <p>This text describes the third slide</p>
      </div>
    </div>
    <div>
      <img src="../img/1200x600-info.png" alt="Fourth slide">
      <div>
        <h3>Caption</h3>
        <p>This text describes the fourth slide</p>
      </div>
    </div>
  </div>
  <button>
    <span></span>
    <span>Previous</span>
  </button>
  <button>
    <span></span>
    <span>Next</span>
  </button>
</div>
<div id="carouselDark"> <div> <button></button> <button></button> <button></button> <button></button> </div> <div> <div> <img src="../img/1200x600-success.png" alt="First slide"> <div> <h3>Caption</h3> <p>This text describes the first slide</p> </div> </div> <div> <img src="../img/1200x600-danger.png" alt="Second slide"> <div> <h3>Caption</h3> <p>This text describes the second slide</p> </div> </div> <div> <img src="../img/1200x600-warning.png" alt="Third slide"> <div> <h3>Caption</h3> <p>This text describes the third slide</p> </div> </div> <div> <img src="../img/1200x600-info.png" alt="Fourth slide"> <div> <h3>Caption</h3> <p>This text describes the fourth slide</p> </div> </div> </div> <button> <span></span> <span>Previous</span> </button> <button> <span></span> <span>Next</span> </button> </div>

Crossfade

First slide
Second slide
Third slide
Fourth slide 
<div id="carouselFade">
  <div>
    <div>
      <img src="../img/1200x600-success.png" alt="First slide">
    </div>
    <div>
      <img src="../img/1200x600-danger.png" alt="Second slide">
    </div>
    <div>
      <img src="../img/1200x600-warning.png" alt="Third slide">
    </div>
    <div>
      <img src="../img/1200x600-info.png" alt="Fourth slide">
    </div>
  </div>
</div>
<div id="carouselFade"> <div> <div> <img src="../img/1200x600-success.png" alt="First slide"> </div> <div> <img src="../img/1200x600-danger.png" alt="Second slide"> </div> <div> <img src="../img/1200x600-warning.png" alt="Third slide"> </div> <div> <img src="../img/1200x600-info.png" alt="Fourth slide"> </div> </div> </div>

Options

Carousel with options defined with data attributes

First slide
Second slide
Third slide
Fourth slide 
<div id="carouselOptions">
  <div>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
  </div>
  <div>
    <div>
      <img src="../img/1200x600-success.png" alt="First slide">
    </div>
    <div>
      <img src="../img/1200x600-danger.png" alt="Second slide">
    </div>
    <div>
      <img src="../img/1200x600-warning.png" alt="Third slide">
    </div>
    <div>
      <img src="../img/1200x600-info.png" alt="Fourth slide">
    </div>
  </div>
  <button>
    <span></span>
    <span>Previous</span>
  </button>
  <button>
    <span></span>
    <span>Next</span>
  </button>
</div>
<div id="carouselOptions"> <div> <button></button> <button></button> <button></button> <button></button> </div> <div> <div> <img src="../img/1200x600-success.png" alt="First slide"> </div> <div> <img src="../img/1200x600-danger.png" alt="Second slide"> </div> <div> <img src="../img/1200x600-warning.png" alt="Third slide"> </div> <div> <img src="../img/1200x600-info.png" alt="Fourth slide"> </div> </div> <button> <span></span> <span>Previous</span> </button> <button> <span></span> <span>Next</span> </button> </div>