Kurs Bootstrap 5 – od podstaw

W tym artykule nauczę na prostym przykładzie jak tworzyć ultra-nowoczesne strony internetowe wykorzystując najnowszą wersję Bootstrapa. Korzystanie z najnowszych wersji (języków, technologii, usług, systemów) ma zazwyczaj same zalety.

Aby kurs był przydatny dla początkujących, wykorzystam we wszystkich przypadkach najprostsze rozwiązania. Nie będziemy automatyzować pracy, komplikować ale też nie będziemy pomijać żadnego elementu.

Ten artykuł to tylko kurs. O tym co to jest Bootstrap i dlaczego warto go używać napisałem w artykule: Co to jest Bootstrap – czy warto używać. W dużym skrócie:

przyspiesza tworzenie atrakcyjnych layoutów stron internetowych,
automatycznie zapewnia działanie mechanizmu responsive web design,
rozwiązuje problemy z krzyżową kompatybilnością przeglądarek.

Tworząc UI strony internetowej mamy do napisania kod HTML i CSS. Bootstrap dostarcza kod CSS, który uatrakcyjnia wygląd elementów najczęściej za pomocą gotowych klas. Oczywiście, nic nie stoi na przeszkodzie aby tak stworzony projekt dostosować potem do swoich potrzeb dodając własne reguły CSS.

Co nowego w Bootstrap 5?

Najnowszą wersją Bootstrapa jest wersja 5.2, którą można pobrać tutaj:

https://getbootstrap.com/docs/5.2/getting-started/download/

Link do czytelnej dokumentacji jest poniżej:

https://getbootstrap.com/docs/5.2/getting-started/introduction/

W Bootstrapie 5 jest wiele pozytywnych zmian, które przede wszystkim polepszają wydajność strony internetowej. To powoduje szereg zalet zarówno dla programistów jak i użytkowników końcowych.

rezygnacja z jQuery
wprowadzenie dedykowanych ikon SVG
rezygnacja ze wsparcia Internet Explorer 10
zmiana środowiska do testów (QUnit na Jasmine)
Oczywiste (patrz punk 1.), liczne zmiany w kodzie JavaScript,
nieznaczne zmiany w CSS,
odświeżenie kontenerów i wprowadzenie do nich „responsywności”,
wsparcie dla języków rtl (zmiana słów left / right na start / end)

W ramach ciekawostki można wspomnieć, że oficjalna strona Bootstrapa zmieniła CMS z Jekyll na Hugo. Są to systemy CMS do stron statycznych, czyli takich które nie używają standardowej bazy danych SQL w swoim funkcjonowaniu.

Z tego wszystkiego dość rewolucyjnym posunięciem jest usunięcie zależności jQuery. Choć trzeba przyznać, że jQuery mocno ułatwia tworzenie interfejsów, jego dodawanie do strony tylko po to aby obsłużyć Bootstrapowe harmonijki lub przycisk rozwijania menu mobilnego było marnotrawstwem zasobów. Nawet kompilacja jQuery Slim to ok. 80KB kodu – szkoda dodawać cały plik tylko po to, by obsłużyć harmonijkę, pasek postępu lub wspomniane menu. Osobiście uważam, że jest to dobre posunięcie twórców nowego Bootstrapa. Jeżeli chcemy wykorzystywać jQuery nadal można go dodać do strony i używać jak dotychczas.

Dla osób, które są mocno przyzwyczajone do korzystania z jQuery a chciałyby spróbować jak to jest kodować w Vanilla JS stworzyłem specjalny wpis: metody jQuery w czystym JavaScript.

Obsługiwane przeglądarki

Bootstrap wspiera najnowsze stabilne wersje przeglądarek popularnych dostawców. Takie przeglądarki jak Chrome, Firrefox, Edge, Safari są z nim kompatybilne. W przypadku innych przeglądarek bazujących na silniku WebKit, Blink, Gecko nie powinny występować istotne problemy.

Responsywna siatka Bootstrap 5

Siatka Bootstrap 5 korzysta z tzw. punktów granicznych (ang. breakpoint). Za pomocą breakpointów dostosowujemy układ strony do aktualnego pola roboczego (ang. viewport) przeglądarki.

Uwaga: O aktualnym trybie nie decyduje faktyczna ilość pikseli na ekranie a pojęcie piksela CSS, które jest zależne od ustawień systemowych i przykładowo przybliżenia (zoomu), który można włączyć w przeglądarkach.

W Bootstrapie rozróżniamy aktualnie 6 szerokości:

X-Small: od 0 do 576px – (brak wrostka)
Small: ≥576px – sm
Medium: ≥768px – md
Large: ≥992px – lg
Extra large: ≥1200px – xl
Extra extra large: ≥1400px – xxl

Te klasy powodują, że dla konkretnych elementów HTML zastosowywane są konkretne zapytania medialne. Działanie w praktyce będą ilustrowały przykłady w tym kursie.

1. Projektowanie układu strony Bootstrap 5

To będzie praktyczny kurs korzystania z dobrodziejstw jakie oferuje Bootstrap 5. Dla celów dydaktycznych stwórzmy prostą stronę na temat, który nas bardzo interesuje. Dla mnie będzie to tytułowa biblioteka. Aby było ciekawiej, nadam jej nowoczesnej stylistyki. Aby rozpocząć tworzenie stron najpierw musimy poznać różne techniki rozmieszczania i organizowania elementów.

Wykorzystywanie kawałków kodu, których nie rozumiemy co prawda pozwoli nam szybko stworzyć stronę internetową ale będziemy mieć trudności z dostosowaniem jej do naszych potrzeb. Aby tego uniknąć „przelecimy” przez najważniejsze mechanizmy Bootstrapa a szczególnie pozycjonowanie elementów względem siebie. Proste przykłady można rozwinąć do pełnoprawnej strony internetowej.

1. Instalacja

Na początek musimy mieć fundament jak na każdej poprawnej stronie internetowej zgodnej z HTML5:

<!doctype html>
<html lang="pl">
   <head>
      <meta charset="utf-8">
      <title>Kurs Bootstrap</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
      <p>Treść strony...</p>
   </body>
</html>

Wystarczy teraz do sekcji head dodać plik CSS z Bootstrapem:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">

Kompontent JS jest opcjonalny. Skoro jest to kurs nowej wersji sprawdźmy jak wypada całość w praktyce. Przed tagiem zamykającym </body> dołączamy plik ze skryptem.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>

JavaScript zapewnia działanie karuzel, harmonijek, menu mobilnego i tego typu rozwiązań które są opcjonalne i wzbogacają doświadczenia.

Pełny kod źródłowy tego przykładu: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/start.html

Instalację Bootstrapa można automatyzować za pomocą narzędzi npm, yarn, Composer, NuGet itd. Opis tych metod znajduje się tutaj: https://getbootstrap.com/docs/5.2/getting-started/download/

2. Kontenery

Kontenery były także w poprzednich wersjach Bootstrapa. W Bootstrapie 5 wprowadzono kontenery o różnych wielkościach. Sprawdźmy ich funkcjonowanie w praktyce. Od tej pory wszelki kod dodajemy do części <body>:

<div class="container-sm"><h2>container-sm</h2></div>
<div class="container-md"><h2>container-md</h2></div>
<div class="container-lg"><h2>container-lg</h2></div>
<div class="container-xl"><h2>container-xl</h2></div>
<div class="container-xxl"><h2>container-xxl</h2></div>

Oczywiście nadal można korzystać z domyślnego container i container-fluid. Ten drugi zawsze się rozciąga od lewej do prawej krawędzi elementu nadrzędnego.

Pełny kod źródłowy tego przykładu: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/container.html

3. Siatka

Za pomocą siatki (ang. grid) rozmieszczamy elementy na stronie internetowej. Za pomocą równych podziałów możemy tworzyć estetycznie wyglądające bloki z dowolną treścią.

W Bootstrapie nie posługujemy się już rozmiarem xs. Wynika to z zastosowania podejścia mobile-first.

Równy podział typu 1/2 lub 1/3 można wykonać za pomocą metody auto-layout. Przykładowo chcąc otrzymać układ 1/3 niezależnie od wielkości widoku kod będzie wyglądał tak:

<div class="row">
   <div class="col">
      1 z 3
   </div>
   <div class="col">
      2 z 3
   </div>
   <div class="col">
      3 z 3
   </div>
</div>

Chcąc wymusić szerokość jednego z elementów, wystarczy dodać liczbę odpowiadającą szeroości, np. col-6:

<div class="row">
   <div class="col">
      1 z 3
   </div>
   <div class="col-6">
      2 z 3
   </div>
   <div class="col">
      3 z 3
   </div>
</div>

Jeżeli chcemy aby dany podział obowiązywał tylko na konkretnej szerokości pola roboczego, wystarczy dodać odpowiadający infiks, przykładowo col-sm. Wówczas podział będzie obowiązywał w szerokości odpowiadającej punktowi Small:

<div class="row">
   <div class="col-sm">
      1 z 3
   </div>
   <div class="col-sm-6">
      2 z 3
   </div>
   <div class="col-sm">
      3 z 3
   </div>
</div>

Najlepszą metodą pozwalającą w pełni zrozumieć siatkę są własne eksperymenty.

Link do kodu: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/grid.html

W ramach tworzonych siatek możemy dodawać dodatkowe klasy do wyrównywania, tworzenia odstępów oraz zmiany kolejności. tutaj odeślę do dokumentacji, która porusza szczegółowe przypadki:

https://getbootstrap.com/docs/5.2/layout/columns/

Zmiana kolejności kolumn

Częstym problemem z tego działu jest zmiana kolejności kolumn w widoku mobilnym (ang. reordering). Internet i serwisy typu StackOverflow czy CodePen są dosłownie zawalony wszelkiego rodzaju rozwiązaniami bazującymi na CSS lub sztuczkach JavaScript. W Bootstrapie 5 bardzo łatwo możemy użyć klasy order. Zobacz jak to działa w praktyce na przykładzie szachownicy, która często sprawia problem w tzw. responsywności:

<div class="row">
   <div class="col-md-6 bg-dark">
      <h2>1</h2>
   </div>
   <div class="col-md-6">
      <h2>2</h2>
   </div>
</div>
<div class="row">
   <div class="col-md-6 bg-dark order-md-last">
      <h2>3</h2>
   </div>
   <div class="col-md-6">
      <h2>4</h2>
   </div>
</div>

Kod źródłowy: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/columns-checkerboard.html

4. Odstępy i marginesy

Pomiędzy kolumnami siatek, można dostosować responsywną przestrzeń. Jak to działa?

Kierunek poziomy

W kierunku poziomym możemy dostosowywać odstęp za pomocą klasy -gx-*.

<div class="container">
   <div class="row gx-5">
      <div class="col">
         <div class="p-3 border">col</div>
      </div>
      <div class="col">
         <div class="p-3 border">col</div>
      </div>
   </div>
</div>

W takich sytuacjach możemy też użyć dla dowolnego elementu klasy dodającej margines wewnętrzny (ang. padding) w kierunku osi x np. .px-4.

Kierunek pionowy

W kierunku pionowym, czyli osi Y, wystarczy użyć odpowiednio klas: gy-* dla odstępów pomiędzy kolumnami oraz py-* dla dowolnego elementu. Klasy odpowiedzialne za odstępy można kombinować ze sobą. Np:

Odstępy pomiędzy kolumnami i wierszami Bootstrap 5

Ukrywanie elementów

Standardowo, w Bootstrapie mamy też możliwość ukrywania elementów w danym punkcie granicznym lub np. dla wydruków. Służą do tego klasy:

d-none – ukrywa element globalnie
d-none d-sm-block – ukrywa element tylko dla widoku xs
d-sm-none d-md-block 0 ukrywa element tylko dla widoku sm
d-block d-sm-none – widoczne tylko dla widoku xs
d-none d-lg-block d-xl-none – widoczne tylko dla widoku lg

I tak dalej i tak dalej…

d-print-none – ukrywa coś na wydruku strony. Jest to przydatne w przypadku formularzy i przykładowo ukrywania elementów nawigacyjnych strony.

Więcej przykładów można znaleźć w dokumentacji: https://getbootstrap.com/docs/5.2/utilities/display/

5. Wyrównywanie zawartości za pomocą d-flex

Klasa d-flex z może być przydatna w wielu różnych przypadkach. Począwszy od tak podstawowych elementów jak paski nawigacyjne, stopki czy nagłówki, kończąc na treści i skomplikowanych, kreatywnych layoutach.

Wyrównanie w poziomie

Dodając klasę d-flex, bezpośrednim elementom potomnym nadawana jest właściwość flex. Najlepiej wszystko pokazać na przykładach:

Kod źródłowy: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/d-flex.html

Wyrównanie w pionie

Wyrównanie w pionie latami było problemem webmasterów. Istniały przeróżne techniki bazujące czy to na display:table-cell czy sztuczkach typu top:50% w kombinacji z transform: translateY(-50%). Te bolączki jakiś czas temu wyeliminował flexbox a w Bootstrapie można również wykorzystać wygodne klasy:

Kod źródłowy: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/d-flex-vertical-align.html

Automatyczny margines

Na koniec pokażę jeszcze ja działa ml-auto i mr-auto, które można nadać obiektom wewnątrz d-flex:

Uwaga: ml-auto i mr-auto (jak i wszystkie określenia left i right) zostały wycofane w alfie i od bety zamiast niego są określenia (start i end) – dla spójności z językami RTL:

ms-auto
me-auto

Kod źródłowy:

<div class="container">
   <div class="d-flex">
      <div class="mr-auto">Flex mr-auto</div>
      <div>Flex</div>
      <div>Flex</div>
   </div>
   <div class="d-flex">
      <div>Flex</div>
      <div>Flex</div>
      <div class="ml-auto">Flex ml-auto</div>
   </div>
</div>

Sprawdź inne szczegółowe przypadki związane z klasami flex-wrap i align-content: https://getbootstrap.com/docs/5.2/utilities/flex/

W celu wyrównania do lewej i prawej można użyć tradycyjnych właściwości:

float-start,
float-end,
float-none

Można użyć różnego opływania dla konkretnych punktów granicznych np. float-sm-start.

Position

Właściwości position też można szybko dodać do obiektu HTML:

position-static,
position-relative,
position-absolute,
position-fixed,
position-sticky.

Centrowanie elementów w pionie i poziomie

Często musimy zakodować napis na zdjęciu Bootstrap. Można to zrobić w taki sposób:

<div class="position-relative bg-secondary">
    <img src="obrazek.jpeg" class="position-relative top-0 start-0 w-100 img-fluid">
    <div class="position-absolute top-0 start-0 text-white"><h1 class="bg-dark text-white">DIV1</h1></div>
    <div class="position-absolute top-0 end-0 text-white"><h1 class="bg-dark text-white">DIV2</h1></div>
    <div class="position-absolute top-50 start-50 translate-middle"><h1 class="bg-dark text-white">DIV3</h1></div>
    <div class="position-absolute bottom-0 start-0 text-white"><h1 class="bg-dark text-white">DIV4</h1></div>
    <div class="position-absolute bottom-0 end-0 text-white"><h1 class="bg-dark text-white">DIV5</h1></div>
 </div>

Korzystanie w ten sposób w właściwości position pozwala też dodać oznaki i etykiety w narożach danego elementu. Za pomocą dodatkowych klas takich jak: translate-middle, translate-middle-y, translate-middle-x powodujemy wycentrowanie elementu.

Centrowanie tekstu na obrazku w Bootstrap 5

Zwróć uwagę, że to nie jest tło. Możemy wykorzystać natywny lazy loading i zapewnić bardzo wysoką wydajność wszelkiego rodzaju slajderów i hero-image.

Efekt tekstu na obrazku można też wykonać za pomocą image-overlay wspomnianego w punkcie dotyczącym kart.

2. Projektowanie treści Bootstrap 5

Poniższe elementy są wykorzystywane bezpośrednio w treści. Ich zakodowanie w edytorze CMSa może w łatwy sposób wzbogacić jego funkcjonalność i uatrakcyjnić treść.

W Bootstrapie 5 w nieskrępowany sposób można korzystać z nagłówków różnego stopnia, elementów <pre><code>, list numerowanych i punktorów. Bootstrap posiada też dodatkowe klasy, które usprawnią budowanie atrakcyjnych interfejsów.

2.1. Typografia

Z różnych rozmiarów nagłówków można korzystać w dwojaki sposób. Za pomocą natywnych tagów <h1>, <h2>, <h3> oraz klas h1, h2, h3. Użycie konkretnej techniki zależy od celu i kwestii SEO:

Domyślne stylowanie nagłówków h1, h2, h3, h4, h5, h6

<h1>Nagłówek h1</h1>
<h2>Nagłówek h2</h2>
<h3>Nagłówek h3</h3>

Dam nam wizualnie to samo co:

<p class="h1">Nagłówek 1</p>
<p class="h2">Nagłówek 2</p>
<p class="h3">Nagłówek 3</p>

Wyrównanie do lewej, prawej i środka

Chcąc wykonać wyrównanie tekstu, wykorzystujemy klasy:

text-start,
text-end,
text-center

Sprawdź też pozostałe klasy wykorzystywane w tworzeniu treści takie jak display-*, lead, text-muted w dokumentacji: https://getbootstrap.com/docs/5.2/content/typography/

2.2 Grafika

Wszelkim obrazkom można dodać klasę img-fluid. Zapewnia ona, że konkretna grafika nigdy nie będzie większa od swojego elementu nadrzędnego i będzie skalowana z zachowaniem proporcji za pomocą height:auto.

<img src="obrazek.png" class="img-fluid" alt="obrazek">

Mamy też do dyspozycji img-thumbnail. Do przyspieszenia tworzenia galerii. Dodaje lekkie zaokrąglenie i margines, co można wykorzystać we wszelkiego rodzaju galeriach.

<img src="obrazek.png" class="img-thumbnail" alt="obrazek">

Wyrównanie zdjęć do krawędzi mogą zapewniać klasy, które już poznaliśmy tzn. float-left, float-right. Wyrównanie zdjęcia do środka można osiągnąć za pomocą klas mx-auto d-block lub nadając elementowi nadrzędnemu klasę text-center.

3. Komponenty

Poza fundamentalnymi elementami na stronie, Bootstrap rozwiązuje wiele drobnych problemów, które można napotkać przy tworzeniu stron lub aplikacji internetowych. Za pomocą różnych komponentów możemy tworzyć przyciski, okna pop-up, karty, karuzele, paginację czy paski postępu.

3.1 Nawigacja

Nawigacja to jeden z najbardziej podstawowych elementów każdej konwencjonalnej strony internetowej. Za pomocą kawałka kodu możemy stworzyć responsywny i użyteczny pasek nawigacyjny typu główne menu:

Pasek nawigacyjny Bootstrap 5

Kod źródłowy: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/navbar.html

3.2 Przyciski

Przyciski mogą znaleźć zastosowanie w formularzach, nawigacji czy treści zasadniczej. W kombinacji z klasą zmieniającą kolor tła lub obramowania, szybko stworzymy skuteczne wezwanie do działania, uatrakcyjnimy popup lub stworzymy przyjemny dla oka formularz.

Niezależnie czy używamy elementu input, button czy a, używamy tych samych klas:

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-info" type="submit">Przycisk</button>
<input class="btn btn-outline-success" type="button" value="Wyślij">
<input class="btn btn-dark" type="submit" value="Wyślij">
<input class="btn btn-light" type="reset" value="Reset">

Przyciski mogą mieć różny kolor, obramowanie lub rozmiar:

<button type="button" class="btn btn-dark btn-lg">Duży</button>
<button type="button" class="btn btn-dark">Standardowy</button>
<button type="button" class="btn btn-dark btn-sm">Mały</button>

Można je też grupować za pomocą btn-group, co można wykorzystać np. nawigacji:

<div class="btn-group">
   <button type="button" class="btn btn-outline-info">Wstecz</button>
   <button type="button" class="btn btn-success">Dalej</button>
</div>

Ale do paginacji mamy osobną konstrukcję:

<nav>
   <ul class="pagination">
      <li class="page-item"><span class="page-link">Wstecz</span></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item active"><span class="page-link">3</span></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">Dalej</a></li>
   </ul>
</nav>

3.3 Karty

Karta to bardzo użyteczne i przyjazne idei responsive web design rozwiązanie. Może reprezontować artykuł na blogu, produkt w liście produktów lub poszczególne wpisy w feedzie.

Pojedyncza karta w kodzie wygląda tak:

<div class="card">
<img src="obrazek.jpg" class="card-img-top" alt="…">
<div class="card-body">
<h5 class="card-title">Tytuł karty</h5>
<p class="small">Data: 2020 czerwca 22</p>
<p class="card-text">Tekst…</p>
</div>
</div>

Można je organizować za pomocą standardowej siatki: container, row i col.

Organizowanie kart jest możliwe także na inne sposoby. Dokładnie zostały omówione w przykładach w dokumentacji: https://getbootstrap.com/docs/5.2/components/card/ zwróć szczególną uwagę na image overlay czyli nakładkę na obrazek umożliwiającą tworzyć ciekawe efekty tła na obrazku <img> a nie w elemencie div, którego tło to obrazek.

3.4 Karuzela (pokaz slajdów)

Chęć wykorzystania karuzeli nie wymaga instalowania ciężkich wtyczek. Skoro korzystamy z Bootstrapa warto wykorzystać to co już mamy. Biblioteka ta już w poprzedniej wersji miała natywne rozwiązanie, które można wykorzystać na stronie za pomocą dość prostej konstrukcji. Działa na wszystkich urządzeniach, sprawdź przykład: https://github.com/mansfeld/bootstrap-5-tutorial/blob/master/carousel-header-slider.html

Jeżeli chcesz sprawdzić wszystkie komponenty jakie Bootstrap ma do zaoferowania, sprawdź je w dokumentacji: https://getbootstrap.com/docs/5.2/components/alerts/

4. Formularze

Mocną stroną Bootstrapa jest obsługa formularzy. Dzięki tej bibliotece można szybko stworzyć estetyczne i skalowalne formularze.

Kod:

<form class="form-signin">
<h1 class="h3 mb-3 font-weight-normal">Logowanie</h1>
<label for="email" class="sr-only">Adres e-mail</label>
<input type="email" id="email" class="form-control" placeholder="Adres e-mail" required autofocus>
<label for="password" class="sr-only">Hasło</label>
<input type="password" id="password" class="form-control" placeholder="Hasło" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Zapamiętaj mnie
</label>
</div>
<button class="btn btn-lg btn-dark btn-block" type="submit">Zaloguj</button>
</form>

Czytaj więcej o możliwościach formularzy w Bootstrap 5: https://getbootstrap.com/docs/5.2/forms/overview/

5. Ikony

Ikony to sympatyczna nowość w Bootstrapie. Choć były dostępne trochę wcześniej, łączy się je z wydaniem nowej wersji Bootstrapa. Najbardziej mi się podoba w nich to, że istnieje kilka sposobów ich wykorzystania na stronie internetowej.

Są to grafiki SVG, których kod można wkleić w kod strony,

<svg class="bi bi-star-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>

Możemy też skorzystać z nich w elemencie img:

oraz w stylach CSS, na przykład:

background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path....

Katalog ikon Bootstrap: https://icons.getbootstrap.com/

Dodatek 1: Interakcja

Za pomocą Bootstrapa można zmieniać natywne zachowanie podstawowych zdarzeń. Dla treści mamy:

user-select-all – pojedyncze kliknięcie na paragraf zaznaczy cały tekst wewnątrz niego.
user-select-auto – przywraca domyślne zachowanie zaznaczania,
user-select-none – uniemożliwia zaznaczenie treści.

Dla linków mamy zaś:

pe-none – wyłącza możliwość kliknięcia,
pe-auto – przywraca naturalne zachowanie.

Dodatek 2: Cieniowanie

Bootstrap umożliwia dodać nieskomplikowane cienie: