Tworzenie nowych komponentów w Bootstrap 5 – praktyczny przewodnik z przykładami

Bootstrap 5 to potężny framework CSS, który oferuje setki gotowych klas ułatwiających tworzenie interfejsów. Ale prawdziwa siła Bootstrapa ujawnia się wtedy, gdy rozszerzamy go o własne komponenty, zachowując jego stylistyczną spójność.

W tym artykule pokażę, jak na bazie Bootstrapa 5 stworzyć zupełnie nowe, niestandardowe komponenty UI:

• awatary użytkowników ze statusem,
• oś czasu (timeline),
• kartę obrotową (flip card),
• grupę odpinanych znaczników (badge group),
• stepper krok po kroku.

Każdy z nich został stworzony w pełni w HTML, CSS i JavaScript, w zgodzie z zasadami Bootstrapa.

Dlaczego warto tworzyć własne komponenty?

Bootstrap zapewnia bazę, ale często projekty potrzebują indywidualnych interakcji i charakteru wizualnego. Dzięki wykorzystaniu systemu zmiennych CSS Bootstrapa (--bs-primary, --bs-success, itp.) możemy tworzyć komponenty, które:

• są spójne kolorystycznie z resztą UI,
• reagują na zmiany motywu (np. dark mode),
• wykorzystują flexbox i spacingi Bootstrapa,
• nie wymagają zewnętrznych bibliotek JS.

1. Avatar – prosty komponent ze statusem

<div class="avatar avatar-status">
  <img src="https://i.pravatar.cc/48?img=3" alt="User">
</div>
<div class="avatar bg-primary text-white">AB</div>

AB

Ten komponent wykorzystuje:

• border-radius: 50% dla uzyskania kształtu koła,
• zmienne Bootstrapa dla koloru tła (--bs-primary, --bs-secondary-bg-subtle),
• pseudo-element .avatar-status::after jako wskaźnik statusu online.

Zastosowanie: listy użytkowników, komunikatory, dashboardy.

2. Timeline – historia zdarzeń

Ten komponent prezentuje sekwencję działań użytkownika lub procesów w czasie.

<ul class="timeline">
  <li class="timeline-item success">
    <div class="timeline-date">05.11.2025</div>
    <div class="timeline-content">Użytkownik utworzony</div>
  </li>
  <li class="timeline-item danger">
    <div class="timeline-date">08.11.2025</div>
    <div class="timeline-content">Nieudana próba logowania</div>
  </li>
</ul>

• 05.11.2025
  Użytkownik utworzony
• 08.11.2025
  Nieudana próba logowania

Każdy li.timeline-item ma:

• kropkę (::before) z kolorami opartymi o klasy (.success, .warning, .danger, itd.),
• pseudo-element ::before dla pionowej linii,
• dopracowany UX: efekt hover, równy odstęp między datą a kropką,
• przycisk JS do dynamicznego dodawania nowych wpisów.

Zastosowanie: logi zdarzeń, historia zamówień, postęp procesów.

3. Flip Card – interaktywna karta z animacją obrotu

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h5>Produkt X</h5>
      <button class="btn btn-primary mt-3">Zobacz opis</button>
    </div>
    <div class="flip-card-back bg-primary text-white">
      <h5>Opis produktu</h5>
      <p>Świetny produkt w przystępnej cenie!</p>
    </div>
  </div>
</div>

CSS korzysta z transformacji 3D (transform: rotateY(180deg)) i perspective, by uzyskać efekt płynnego obrotu.

bi-lightbulb: Zastosowanie: prezentacje produktów, quizy, karty informacyjne.

4. Badge Group – odpinane tagi

<div class="badge-group">
  <span class="badge bg-primary">HTML <button type="button" class="btn-close btn-close-white"></button></span>
  <span class="badge bg-success">CSS <button type="button" class="btn-close btn-close-white"></button></span>
</div>

Z prostym skryptem JS:

badgeGroup.addEventListener("click", e => {
  if (e.target.classList.contains("btn-close")) {
    const badge = e.target.closest(".badge");
    badge.classList.add("fade-out");
    setTimeout(() => badge.remove(), 400);
  }
});

Zastosowanie: filtry wyszukiwania, tagi użytkownika, zarządzanie kategoriami.

5. Stepper – proces krok po kroku

<ul class="stepper">
  <li class="stepper-item completed"><div class="stepper-dot">1</div><div class="stepper-label">Konto</div></li>
  <li class="stepper-item active"><div class="stepper-dot">2</div><div class="stepper-label">Dane</div></li>
  <li class="stepper-item"><div class="stepper-dot">3</div><div class="stepper-label">Potwierdzenie</div></li>
</ul>

• 1
  Konto
• 2
  Dane
• 3
  Potwierdzenie

Dzięki prostemu JS:

const steps = [...document.querySelectorAll(".stepper-item")];
let index = 1;
nextBtn.onclick = () => {
  steps[index - 1].classList.replace("active", "completed");
  if (steps[index]) steps[index++].classList.add("active");
  else alert("Proces ukończony ✅");
};

Zastosowanie: formularze wieloetapowe, onboarding użytkowników, procesy płatności.

Wnioski

Tworzenie własnych komponentów Bootstrapa:

• pozwala dostosować framework do potrzeb projektu,
• utrzymuje spójność wizualną bez łamania konwencji Bootstrapa,
• umożliwia szybkie prototypowanie nowoczesnych interfejsów.

Ważne, aby trzymać się kilku zasad:

1. Korzystaj z zmiennych Bootstrapa zamiast twardych kolorów.
2. Zachowuj naming konwencji (np. .component-element).
3. Używaj animacji subtelnie — zgodnie z UX.
4. Oddziel logikę JS od struktury HTML dla przejrzystości.

Demo i kod źródłowy Zobacz demo