Ściąga Bootstrap
Przeszukiwalny, gotowy do druku przewodnik po Bootstrap 5.3 — siatka, odstępy, typografia, kolory, narzędzia flex, przyciski, formularze i komponenty. Za darmo.
Siatka i układ
12<div class="container">
Responsywny kontener o stałej szerokości
<div class="container-fluid">
Kontener pełnej szerokości na każdym breakpointcie
<div class="container-md">
100% szerokości do breakpointa md
<div class="row">
Wiersz siatki, mieści kolumny
<div class="col">
Kolumna automatyczna równej szerokości
<div class="col-6">
Rozciąga się na 6 z 12 kolumn
<div class="col-md-4">
4 kolumny od breakpointa md w górę
<div class="col-auto">
Kolumna dopasowana do swojej treści
<div class="offset-md-2">
Przesuń kolumnę o 2 kolumny w prawo
<div class="row g-3">
Odstęp (gutter) między kolumnami
<div class="row row-cols-3">
Wymuś 3 równe kolumny w wierszu
<div class="order-2">
Zmień kolejność kolumny flex/grid
Narzędzia odstępów
12m-3
Margines ze wszystkich stron (skala 0-5)
mt-2
Margines górny
mx-auto
Automatyczne marginesy poziome do wyśrodkowania
p-4
Wypełnienie ze wszystkich stron
py-2
Wypełnienie pionowe (góra i dół)
ms-3
Margines początkowy (lewy w LTR, świadomy RTL)
me-3
Margines końcowy (prawy w LTR, świadomy RTL)
ps-2
Wypełnienie początkowe, świadome RTL
pe-2
Wypełnienie końcowe, świadome RTL
gap-3
Odstęp między elementami flex/grid
m-n1
Ujemny margines
p-md-5
Responsywne wypełnienie od md w górę
Typografia
14<h1>..<h6>
Poziomy nagłówków z domyślnym stylem
<p class="display-1">
Duży nagłówek display (display-1..6)
<p class="lead">
Wyróżniony akapit wiodący
fw-bold
Pogrubiona grubość czcionki
fw-semibold
Półpogrubiona grubość czcionki
fst-italic
Kursywa
text-center
Wyśrodkuj tekst
text-start
Wyrównaj tekst do początku, świadome RTL
text-end
Wyrównaj tekst do końca, świadome RTL
text-truncate
Przytnij nadmiar wielokropkiem
text-uppercase
Zamień tekst na wielkie litery
fs-1
Responsywny rozmiar czcionki (fs-1..6)
lh-base
Bazowa wysokość wiersza (lh-1, lh-sm, lh-lg)
font-monospace
Rodzina czcionek monospace
Kolory i tło
10text-primary
Podstawowy kolor tekstu
bg-primary
Podstawowy kolor tła
bg-primary-subtle
Delikatny odcień tła podstawowego
text-primary-emphasis
Wyróżniony tekst podstawowy, świadomy motywu
text-bg-primary
Tło podstawowe z auto-kontrastowym tekstem
link-primary
Pomocnik kolorowego linku
bg-opacity-50
Zastosuj 50% przezroczystości tła
text-body-secondary
Wyciszony pomocniczy tekst treści
text-body-emphasis
Mocno wyróżniony tekst treści
border-primary-subtle
Delikatny podstawowy kolor obramowania
Narzędzia flex
10d-flex
Tworzy kontener flex
flex-row
Ułóż elementy w wierszu
flex-column
Ułóż elementy w kolumnie
justify-content-between
Rozłóż elementy wzdłuż osi głównej
align-items-center
Wyśrodkuj elementy na osi poprzecznej
flex-wrap
Pozwala elementom na zawijanie
flex-grow-1
Pozwól elementowi rosnąć, by wypełnić miejsce
flex-fill
Wymuś równe elastyczne szerokości
align-self-end
Wyrównaj pojedynczy element do końca
flex-md-row
Responsywny kierunek flex od md
Wyświetlanie i pozycja
12d-none
Ukryj element
d-md-block
Pokaż jako blok od breakpointa md
position-relative
Pozycjonowanie względne
position-absolute
Pozycjonowanie absolutne
position-fixed
Pozycjonowanie stałe
position-sticky
Pozycjonowanie przyklejone
top-0 start-0
Przypnij do lewego górnego rogu, świadome RTL
translate-middle
Wyśrodkuj przez transform translate
fixed-top
Przypnij element do góry viewportu
sticky-top
Przyklej do góry podczas przewijania
z-3
Ustaw z-index (z-0..3)
invisible
Ukryj, zachowując miejsce w układzie
Rozmiary i obramowania
12w-100
Szerokość 100% rodzica
w-50
Szerokość 50% rodzica
h-100
Wysokość 100% rodzica
mw-100
Maksymalna szerokość 100%
vh-100
Wysokość 100% viewportu
border
Dodaj domyślne obramowanie ze wszystkich stron
border-0
Usuń wszystkie obramowania
border-primary
Pokoloruj obramowanie
rounded
Domyślne zaokrąglenie obramowania
rounded-pill
W pełni zaokrąglony kształt pigułki
rounded-circle
Okrągłe zaokrąglenie obramowania
shadow-sm
Mały cień bloku (shadow, shadow-lg)
Przyciski
9<button class="btn btn-primary">
Pełny przycisk podstawowy
<button class="btn btn-outline-primary">
Wariant przycisku z obramowaniem
<button class="btn btn-lg">
Duży przycisk (także btn-sm)
<button class="btn btn-link">
Przycisk stylizowany jak link
<button class="btn-close">
Standardowy przycisk zamykania (×)
<button class="btn disabled">
Stan wyłączonego przycisku
<button class="btn active">
Stan aktywnego przycisku
<div class="d-grid"><button class="btn">
Przycisk blokowy pełnej szerokości przez d-grid
<div class="btn-group">
Zgrupuj przyciski razem
Formularze
11<input class="form-control">
Stylizowane pole tekstowe
<label class="form-label">
Etykieta pola formularza
<select class="form-select">
Stylizowana lista rozwijana select
<div class="form-check">
Otoczka pola wyboru/radio
<input class="form-check-input">
Stylizowane pole wyboru lub radio
<div class="form-check form-switch">
Komponent przełącznika
<input class="form-control-lg">
Duże pole (także form-control-sm)
<div class="input-group">
Grupuj pola z dodatkami
is-invalid
Stan walidacji niepoprawny (is-valid)
<div class="form-floating">
Pole z pływającą etykietą
col-form-label
Etykieta wyrównana do formularzy poziomych
Komponenty
14<div class="card">
Elastyczna karta treści
<nav class="navbar navbar-expand-lg">
Responsywny pasek nawigacji
data-bs-toggle="modal" data-bs-target="#m"
Wyzwól okno modalne
data-bs-toggle="dropdown"
Przełącz menu rozwijane
data-bs-toggle="collapse"
Przełącz element zwijany
<div class="accordion">
Ułożone zwijane panele
<div class="alert alert-dismissible">
Zamykalny komunikat alertu
<span class="badge text-bg-primary">
Mała plakietka z liczbą lub etykietą
<ul class="list-group">
Stylizowana lista elementów
<ul class="nav nav-tabs">
Nawigacja z zakładkami
<div class="toast">
Lekkie powiadomienie toast
<div class="offcanvas">
Wysuwany panel boczny off-canvas
<div class="spinner-border">
Wskaźnik ładowania spinner
<nav><ul class="pagination">
Linki nawigacji ze stronicowaniem
Pomocniki i różne
11data-bs-theme="dark"
Włącz ciemny tryb kolorów w zakresie
<div class="ratio ratio-16x9">
Responsywny box o proporcjach
visually-hidden
Ukryj wizualnie, zachowaj dla czytników ekranu
visually-hidden-focusable
Ukryty do momentu fokusa (linki pomijania)
stretched-link
Uczyń rodzica w pełni klikalnym
clearfix
Wyczyść opływane dzieci
<div class="vstack gap-2">
Pionowy stos elementów
<div class="hstack gap-2">
Poziomy stos elementów
<a class="icon-link">
Link wyrównany z ikoną w wierszu
<div class="progress">
Kontener paska postępu
<nav class="breadcrumb">
Ścieżka nawigacji okruszkowej
Żaden wpis nie pasuje do „:q”.
Potrzebujesz pomocy?
Masz problem z tym narzędziem? Daj nam znać.