Loading...

Carousel

Carousel Only

Create a default carousel using Bootstrap's .carousel class. Use <div class="carousel slide"> to set up the carousel, and include <div class="carousel-inner"> with <div class="carousel-item"> elements for each slide.

With Controls

Add navigation controls to a Bootstrap carousel by including <button class="carousel-control-prev"> and <button class="carousel-control-next"> elements. These controls allow users to move between slides in the carousel.

With default Indicators

Add default indicators to a Bootstrap carousel by including <ol class="carousel-indicators"> with <li data-bs-target="#carouselExample" data-bs-slide-to="0"> elements for each slide. These indicators provide visual navigation for users.

Crossfade Animation

Enable crossfade animation in a Bootstrap carousel by adding the .carousel-fade class to the <div class="carousel slide">. This creates a smooth fade transition between slides.

With Captions

Add captions to Bootstrap carousel slides by including <div class="carousel-caption"> inside each <div class="carousel-item">. Place your caption text within this container to provide additional information on each slide.

Dark variant carousel

Create a dark variant of a Bootstrap carousel by adding the .carousel-dark class to the <div class="carousel slide">. This adjusts the carousel's text and controls for better visibility on dark backgrounds.

Preview Settings

Theme Layouts

Defines the admin panel's layout style, allowing you to choose from different design options.

Color Mode

Choose if app's appearance should be light or dark, or follow your computer's settings.

RTL Mode

Toggle between LTR and RTL layouts to support different language directions.

Preset Themes

Choose a preset theme from out theme library.

Sidebar Colors

Sets the sidebar color scheme. Options include light, dark, or gradient styles.

Navbar Positions Options

Sets the navbar position: sticky, static, or hidden.

Navbar Type Options

Sets the navbar style: default, dark, transparent, or glass.

Font Options

Sets the fonts for headings and body text.

Font Size Options

Sets the font size: sm, md, or lg.

Rounded Options

Sets the border radius size: xs, sm, md, lg, or xl.

Container Options

Defines the container style: fluid (full-width) or boxed (fixed width).

Loader Options

Sets the page loader visibility: hidden or visible.