General UI Elements

This is a general overview of the available components. For detailed documentation, see the individual component pages.

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. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

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. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

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. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
Alerts
Avatars
John Doe Anna Smith Miguel Alvarez +3
Badges
Primary Success Danger Warning Info
Keyboard Input
Cards
...
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere
Carousel
Breadcrumb
Buttons
Info Box
Active Users 2,845 Last 30 days
Total Orders 856 +12% this month
App Downloads 24.7K Mobile & Desktop
Customer Reviews 4.8 Average rating
List Group
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
Navs & tabs
Pagination
Spinners
Placeholders
Small Box

150

New Orders

More info

53%

Bounce Rate

View report

44

User Registrations

Manage users
Progress
Toasts
Text Highlights

You can add an underline below text to make it stand out.

This type of underline adds a circular border around the text.

You can also add a mark under text to make it stand out better.

Text Animations

Front theme is a powerful theme with flexibility speed clean code

Basic Form
We'll never share your email with anyone else.
Checks & radios
Switches
Color input with text
Select
Range
Input Group
@
@example.com
Input OTP

Enter your one-time password.

Input Password
File Input
Toggle Buttons
Input Search 
<div class="row g-4">
  <div class="col-lg-6">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-blue pb-4 mb-4">Accordion</div>
          <div class="card-body">
              <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" aria-expanded="true" aria-controls="collapseOne">
                          Accordion Item #1
                          </button>
                      </h2>
                      <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                          <div class="accordion-body">
                          <strong>This is the first item’s accordion body.</strong> 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. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                          </div>
                      </div>
                      </div>
                      <div class="accordion-item">
                      <h2 class="accordion-header">
                          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                          Accordion Item #2
                          </button>
                      </h2>
                      <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                          <div class="accordion-body">
                          <strong>This is the second item’s accordion body.</strong> 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. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                          </div>
                      </div>
                      </div>
                      <div class="accordion-item">
                      <h2 class="accordion-header">
                          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                          Accordion Item #3
                          </button>
                      </h2>
                      <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                          <div class="accordion-body">
                          <strong>This is the third item’s accordion body.</strong> 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. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-6">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-green pb-4 mb-4">Alerts</div>
          <div class="card-body">
              <div class="alert alert-primary" role="alert">
                  A simple primary alert—check it out!
              </div>
              <div class="alert alert-success" role="alert">
                  A simple success alert—check it out!
              </div>
              <div class="alert alert-danger" role="alert">
                  A simple danger alert—check it out!
              </div>
              <div class="alert alert-warning" role="alert">
                  A simple warning alert—check it out!
              </div>
              <div class="alert alert-info" role="alert">
                  A simple info alert—check it out!
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-4">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-red pb-4 mb-4">Avatars</div>
          <div class="card-body">
              <div class="avatar-group">
                  <span class="avatar avatar-md rounded-circle me-0">
                      <img src="https://placehold.co/128x128/111827/FFF?text=J" class="img-fluid rounded-circle" alt="John Doe">
                  </span>
                  <span class="avatar avatar-md rounded-circle me-0">
                      <img src="https://placehold.co/128x128/0ea5a4/FFF?text=A" class="img-fluid rounded-circle" alt="Anna Smith">
                  </span>
                  <span class="avatar avatar-md rounded-circle me-0">
                      <img src="https://placehold.co/128x128/ef4444/FFF?text=M" class="img-fluid rounded-circle" alt="Miguel Alvarez">
                  </span>
                  <span class="avatar avatar-md rounded-circle text-bg-primary">
                      <span>+3</span>
                  </span>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-4">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-yellow pb-4 mb-4">Badges</div>
          <div class="card-body">
              <span class="badge rounded-pill text-bg-primary">Primary</span>
              <span class="badge rounded-pill text-bg-success">Success</span>
              <span class="badge rounded-pill text-bg-danger">Danger</span>
              <span class="badge rounded-pill text-bg-warning">Warning</span>
              <span class="badge rounded-pill text-bg-info">Info</span>
          </div>
      </div>
  </div>

  <div class="col-lg-4">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-green pb-4 mb-4">Keyboard Input</div>
          <div class="card-body">
              <button class="btn btn-outline-secondary me-2">Accept<kbd class="ms-2">⏎</kbd></button>
              <button class="btn btn-outline-secondary">Cancel<kbd class="ms-2">Esc</kbd></button>
          </div>
      </div>
  </div>

  <div class="col-lg-4">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-blue pb-4 mb-4">Cards</div>
          <div class="card-body">
              <div class="card p-0" style="max-width: 18rem;">
                  <img src="https://placehold.co/600x400/31343C/EEE" class="card-img-top" alt="...">
                  <div class="card-body p-3">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
                      <a href="#" class="btn btn-blue text-light">Go somewhere</a>
                  </div>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-8">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-green pb-4 mb-4">Carousel</div>
          <div class="card-body">
              <div id="carouselExampleIndicators" class="carousel slide">
                  <div class="carousel-indicators">
                      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                  </div>
                  <div class="carousel-inner rounded">
                      <div class="carousel-item active">
                          <img src="https://placehold.co/600x300/31343C/EEE?text=First+Slide" class="d-block w-100" alt="...">
                      </div>
                      <div class="carousel-item">
                          <img src="https://placehold.co/600x300/31343C/EEE?text=Second+Slide" class="d-block w-100" alt="...">
                      </div>
                      <div class="carousel-item">
                          <img src="https://placehold.co/600x300/31343C/EEE?text=Third+Slide" class="d-block w-100" alt="...">
                      </div>
                  </div>
                  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="visually-hidden">Previous</span>
                  </button>
                  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="visually-hidden">Next</span>
                  </button>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-5">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-yellow pb-4 mb-4">Breadcrumb</div>
          <div class="card-body">
              <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>
          </div>
      </div>
  </div>

  <div class="col-lg-7">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-red pb-4 mb-4">Buttons</div>
          <div class="card-body">
              <div class="d-flex flex-wrap gap-1">
                  <button type="button" class="btn btn-primary">Primary</button>
                  <button type="button" class="btn btn-secondary">Secondary</button>
                  <button type="button" class="btn btn-success">Success</button>
                  <button type="button" class="btn btn-danger">Danger</button>
                  <button type="button" class="btn btn-warning">Warning</button>
                  <button type="button" class="btn btn-info">Info</button>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-7">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-blue pb-4 mb-4">Info Box</div>
          <div class="card-body">
              <div class="row g-3">
                  <div class="col-md-6">
                      <div class="info-box">
                          <span class="info-box-icon text-light bg-blue"><i class="ri-team-fill"></i></span>
                          <div class="info-box-content">
                              <span class="info-box-text">Active Users</span>
                              <span class="info-box-number">2,845</span>
                              <span class="info-box-more-info">Last 30 days</span>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-6">
                      <div class="info-box">
                          <span class="info-box-icon text-light bg-green"><i class="ri-shopping-bag-fill"></i></span>
                          <div class="info-box-content">
                              <span class="info-box-text">Total Orders</span>
                              <span class="info-box-number">856</span>
                              <span class="info-box-more-info">+12% this month</span>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-6">
                      <div class="info-box">
                          <span class="info-box-icon text-light bg-yellow"><i class="ri-download-cloud-fill"></i></span>
                          <div class="info-box-content">
                              <span class="info-box-text">App Downloads</span>
                              <span class="info-box-number">24.7K</span>
                              <span class="info-box-more-info">Mobile & Desktop</span>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-6">
                      <div class="info-box">
                          <span class="info-box-icon text-light bg-red"><i class="ri-chat-3-fill"></i></span>
                          <div class="info-box-content">
                              <span class="info-box-text">Customer Reviews</span>
                              <span class="info-box-number">4.8</span>
                              <span class="info-box-more-info">Average rating</span>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-5">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-green pb-4 mb-4">List Group</div>
          <div class="card-body">
              <ul class="list-group">
                  <li class="list-group-item">An item</li>
                  <li class="list-group-item">A second item</li>
                  <li class="list-group-item">A third item</li>
                  <li class="list-group-item">A fourth item</li>
                  <li class="list-group-item">And a fifth one</li>
              </ul>
          </div>
      </div>
  </div>

  <div class="col-lg-4">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-red pb-4 mb-4">Navs & tabs</div>
          <div class="card-body">
              <ul class="nav nav-pills">
                  <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="#">Active</a>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
                      <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Action</a></li>
                          <li><a class="dropdown-item" href="#">Another action</a></li>
                          <li><a class="dropdown-item" href="#">Something else here</a></li>
                          <li><hr class="dropdown-divider"></li>
                          <li><a class="dropdown-item" href="#">Separated link</a></li>
                      </ul>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                  </li>
              </ul>
          </div>
      </div>
  </div>

  <div class="col-lg-4">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-yellow pb-4 mb-4">Pagination</div>
          <div class="card-body">
              <nav aria-label="...">
                  <ul class="pagination">
                      <li class="page-item disabled">
                          <a class="page-link">Previous</a>
                      </li>
                      <li class="page-item"><a class="page-link" href="#">1</a></li>
                      <li class="page-item active">
                          <a class="page-link" href="#" aria-current="page">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>
          </div>
      </div>
  </div>

  <div class="col-lg-4">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-green pb-4 mb-4">Spinners</div>
          <div class="card-body">
              <div class="spinner-border text-primary" role="status">
                  <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-border text-success" role="status">
                  <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-border text-danger" role="status">
                  <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-border text-warning" role="status">
                  <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-border text-info" role="status">
                  <span class="visually-hidden">Loading...</span>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-4">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-blue pb-4 mb-4">Placeholders</div>
          <div class="card-body">
              <div class="card p-0" aria-hidden="true" style="max-width: 18rem;">
                  <img src="https://placehold.co/600x400/31343C/EEE" class="card-img-top" alt="...">
                  <div class="card-body p-3">
                      <div class="h5 card-title placeholder-glow">
                          <span class="placeholder col-6"></span>
                      </div>
                      <p class="card-text placeholder-glow">
                          <span class="placeholder col-7"></span>
                          <span class="placeholder col-4"></span>
                          <span class="placeholder col-4"></span>
                          <span class="placeholder col-6"></span>
                          <span class="placeholder col-8"></span>
                      </p>
                      <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
                  </div>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-8">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-green pb-4 mb-4">Small Box</div>
          <div class="card-body">
              <div class="small-box text-bg-red mb-2">
                  <div class="inner">
                      <h3>150</h3>
                      <p>New Orders</p>
                  </div>
                  <div class="small-box-icon">
                      <i class="ri-shopping-bag-fill"></i>
                  </div>
                  <a href="#" class="small-box-footer">More info <i class="ri-arrow-right-s-line"></i></a>
              </div>

              <div class="small-box text-bg-yellow mb-2">
                  <div class="inner">
                      <h3>53<sup style="font-size: .6rem">%</sup></h3>
                      <p>Bounce Rate</p>
                  </div>
                  <div class="small-box-icon">
                      <i class="ri-line-chart-line"></i>
                  </div>
                  <a href="#" class="small-box-footer">View report <i class="ri-arrow-right-s-line"></i></a>
              </div>

              <div class="small-box text-bg-green">
                  <div class="inner">
                      <h3>44</h3>
                      <p>User Registrations</p>
                  </div>
                  <div class="small-box-icon">
                      <i class="ri-user-add-fill"></i>
                  </div>
                  <a href="#" class="small-box-footer">Manage users <i class="ri-arrow-right-s-line"></i></a>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-6">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-yellow pb-4 mb-4">Progress</div>
          <div class="card-body">
              <div class="progress mb-3" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 10%"></div>
              </div>
              <div class="progress mb-3" role="progressbar" aria-label="Blue striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                  <div class="progress-bar progress-bar-striped progress-bar-animated bg-blue" style="width: 25%"></div>
              </div>
              <div class="progress mb-3" role="progressbar" aria-label="Green striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                  <div class="progress-bar progress-bar-striped progress-bar-animated bg-green" style="width: 50%"></div>
              </div>
              <div class="progress mb-3" role="progressbar" aria-label="Yellow striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                  <div class="progress-bar progress-bar-striped progress-bar-animated bg-yellow" style="width: 75%"></div>
              </div>
              <div class="progress" role="progressbar" aria-label="Red striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                  <div class="progress-bar progress-bar-striped progress-bar-animated bg-red" style="width: 100%"></div>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-6">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-red pb-4 mb-4">Toasts</div>
          <div class="card-body">
              <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="autoToast" data-bs-autohide="false">
                  <div class="toast-header">
                      <div class="rounded bg-red me-2" style="width: 20px; height: 20px;"></div>
                      <strong class="me-auto">Bootstrap</strong>
                      <small>11 mins ago</small>
                      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                  </div>
                  <div class="toast-body">
                      Hello, world! This is a toast message.
                  </div>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-6">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-blue pb-4 mb-4">Text Highlights</div>
          <div class="card-body">
              <p>You can add an <span class="underline-2 warning">underline</span> below text to make it stand out.</p>
              <p>This type of <span class="underline-3 warning">underline</span> adds a circular border around the text.</p>
              <p class="mb-0">You can also add a <span class="mark warning">mark</span> under text to make it stand out better.</p>
          </div>
      </div>
  </div>

  <div class="col-lg-6">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-green pb-4 mb-4">Text Animations</div>
          <div class="card-body">
               <h4>
                  Front theme is a powerful theme with <span class="text-primary ms-2">
                  <span class="fade-animation">flexibility</span>
                  <span class="fade-animation">speed</span>
                  <span class="fade-animation">clean code</span>
                  </span>
              </h4>
          </div>
      </div>
  </div>

  <div class="col-lg-4">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-red pb-4 mb-4">Basic Form</div>
          <div class="card-body">
              <form>
                  <div class="mb-2">
                      <label for="exampleInputEmail1" class="form-label">Email address</label>
                      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                      <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                  </div>
                  <div class="mb-3">
                      <label for="exampleInputPassword1" class="form-label">Password</label>
                      <input type="password" class="form-control" id="exampleInputPassword1">
                  </div>
                  <button type="submit" class="btn btn-red text-light">Submit</button>
              </form>
          </div>
      </div>
  </div>

  <div class="col-lg-4">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-yellow pb-4 mb-4">Checks & radios</div>
          <div class="card-body">
              <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="checkDefault">
                  <label class="form-check-label" for="checkDefault">
                  Default checkbox
                  </label>
              </div>
              <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="checkChecked" checked>
                  <label class="form-check-label" for="checkChecked">
                  Checked checkbox
                  </label>
              </div>
              <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="checkIndeterminate">
                  <label class="form-check-label" for="checkIndeterminate">
                  Indeterminate checkbox
                  </label>
              </div>
              <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="checkDisabled" disabled>
                  <label class="form-check-label" for="checkDisabled">
                  Disabled checkbox
                  </label>
              </div>
              <div class="form-check">
                  <input class="form-check-input" type="radio" name="radioDefault" id="radioDefault1">
                  <label class="form-check-label" for="radioDefault1">
                  Default radio
                  </label>
              </div>
              <div class="form-check">
                  <input class="form-check-input" type="radio" name="radioDefault" id="radioDefault2" checked>
                  <label class="form-check-label" for="radioDefault2">
                  Default checked radio
                  </label>
              </div>
              <div class="form-check">
                  <input class="form-check-input" type="radio" name="radioDisabled" id="radioDisabled" disabled>
                  <label class="form-check-label" for="radioDisabled">
                  Disabled radio
                  </label>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-4">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-green pb-4 mb-4">Switches</div>
          <div class="card-body">
              <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" role="switch" id="switchCheckDefault">
                  <label class="form-check-label" for="switchCheckDefault">Default switch checkbox input</label>
              </div>
              <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
                  <label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
              </div>
              <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" role="switch" id="switchCheckDisabled" disabled>
                  <label class="form-check-label" for="switchCheckDisabled">Disabled switch checkbox input</label>
              </div>
              <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" role="switch" id="switchCheckCheckedDisabled" checked disabled>
                  <label class="form-check-label" for="switchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-3">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-blue pb-4 mb-4">Color input with text</div>
          <div class="card-body">
              <div class="color-input-with-text">
                  <input type="color" class="form-control form-control-color" id="colorInputWithText" value="#3f78e0" title="Choose your color" />
                  <input type="text" class="form-control-color-value" value="#3f78e0" readonly />
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-3">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-green pb-4 mb-4">Select</div>
          <div class="card-body">
              <select class="form-select" aria-label="Default select example">
                  <option selected>Open this</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
              </select>
          </div>
      </div>
  </div>

  <div class="col-lg-6">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-yellow pb-4 mb-4">Range</div>
          <div class="card-body">
              <label for="customRange1" class="form-label">Example range</label>
              <input type="range" class="form-range" id="customRange1">
          </div>
      </div>
  </div>

  <div class="col-lg-4">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-red pb-4 mb-4">Input Group</div>
          <div class="card-body">
              <div class="input-group mb-3">
                  <span class="input-group-text" id="basic-addon1">@</span>
                  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
              </div>

              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Recipient’s username" aria-label="Recipient’s username" aria-describedby="basic-addon2">
                  <span class="input-group-text" id="basic-addon2">@example.com</span>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-4">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-yellow pb-4 mb-4">Input OTP</div>
          <div class="card-body">
              <div class="d-flex flex-column">
                  <div class="otp-wrapper mb-2">
                      <div class="input-group otp-group">
                          <input type="text" maxlength="1" class="form-control otp-input text-center" />
                          <input type="text" maxlength="1" class="form-control otp-input text-center" />
                          <input type="text" maxlength="1" class="form-control otp-input text-center" />
                          <input type="text" maxlength="1" class="form-control otp-input text-center" />
                          <input type="text" maxlength="1" class="form-control otp-input text-center" />
                          <input type="text" maxlength="1" class="form-control otp-input text-center" />
                      </div>
                  </div>
                  <p class="text-body mb-2">Enter your one-time password.</p>
                  <button class="btn btn-yellow" type="submit">Submit</button>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-4">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-green pb-4 mb-4">Input Password</div>
          <div class="card-body">
              <form>
                  <label for="password" class="form-label">Enter Password</label>
                  <div class="password-wrapper">
                      <input
                          type="password"
                          class="form-control password-input"
                          name="password"
                          id="password"
                          placeholder="Password"
                          autocomplete="current-password"
                          required
                      />
                      <button class="password-toggle" type="button" aria-label="Show password"><i class="ri-eye-off-line text-muted"></i></button>
                  </div>
              </form>
          </div>
      </div>
  </div>

  <div class="col-lg-6">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-blue pb-4 mb-4">File Input</div>
          <div class="card-body">
              <label for="formFile" class="form-label">Default file input example</label>
              <input class="form-control" type="file" id="formFile">
          </div>
      </div>
  </div>

  <div class="col-lg-3">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-green pb-4 mb-4">Toggle Buttons</div>
          <div class="card-body">
              <div class="d-flex flex-wrap gap-1">
                  <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
                  <label class="btn btn-green" for="btn-check">Single toggle</label>

                  <input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
                  <label class="btn btn-green" for="btn-check-2">Checked</label>

                  <input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
                  <label class="btn btn-green" for="btn-check-3">Disabled</label>
              </div>
          </div>
      </div>
  </div>

  <div class="col-lg-3">
      <div class="card border shadow h-100">
          <div class="card-header fs-5 fw-medium border-bottom border-3 border-yellow pb-4 mb-4">Input Search</div>
          <div class="card-body">
              <div class="input-search" style="max-width: 400px;">
                  <i class="ri-search-line"></i>
                  <input type="text" class="form-control" placeholder="Type here..">
                  <i class="ri-close-line" role="button"></i>
              </div>
          </div>
      </div>
  </div>

</div>
document.addEventListener('DOMContentLoaded', function () {
// Initialize and display the toast
const autoToastEl = document.getElementById('autoToast');
if (autoToastEl) {
  const toast = bootstrap.Toast.getOrCreateInstance(autoToastEl);
  toast.show();
}

// Script for text animations
const texts = document.querySelectorAll('.fade-animation');
let currentIndex = 0;

function fadeText() {
// Reset all texts to be hidden
texts.forEach(text => text.classList.remove('active'));

// Show the current text with the fade-in effect
texts[currentIndex].classList.add('active');

// Move to the next index for the next iteration
currentIndex = (currentIndex + 1) % texts.length;
}

// Start the fade-in/fade-out cycle every 2.5 seconds
setInterval(fadeText, 2500);

// Initial fade-in for the first text
fadeText();

// Set the checkbox to an indeterminate (partially selected) state if it exists
const checkbox = document.getElementById('checkIndeterminate');
if (checkbox) {
checkbox.indeterminate = true;
}
});
Quick Links
Home Docs
Admin
Admin Dashboard Example
Themes
Website Example (Classic)
Website Example (Modern)
Dog Breeder 1 (Beagle)
Dog Breeder 2 (Golden Retriever)
Dog Breeder 3 (French Bulldog)
Dog Breeder 4 (Poodle)
Dog Breeder 5 (German Shepherd)
Dog Breeder 6 (Yorkshire Terrier)
Cat Breeder 1 (Persian)
Cat Breeder 2 (Siamese)
Cat Breeder 3 (Bengal)
Cat Breeder 4 (Abyssinian)
Cat Breeder 5 (Himalayan)
HOA 1
HOA 2
HOA 3
Real Estate 1
Real Estate 2
Other
AsteroBuilder
AsteroDigital
Paanstation
Jazzup Salon
HomeStyle Furnitech
MAK Holding Group
Takshila Institute
Clinic Demo