Як встановити Bootstrap 5

Як підключити Bootstrap? Є три варіанти (список від простішого до складнішого):

Підключення через CDN
Завантажити файли
Через менеджер пакетів

1. Завантаження через CDN

Найпростіший спосіб підлючити Bootstrap – використання мережі доставки контенту (CDN). Не потрібно завантажувати файли, достатньо додати кілька рядків коду до HTML-документа.

Переваги методу це простота використання, автоматичне оновлення до останньої версії та відсутність потреби завантажувати файли локально.

Відкрийте HTML-файл вашого проєкту. Додайте такі посилання у <head>:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2. Завантажити файли

Ви можете завантажити файли Bootstrap 5 безпосередньо з офіційного сайту:

Перейдіть на офіційний сайт Bootstrap
Натисніть кнопку "Download"
Виберіть потрібні вам файли (CSS, JS)
Додайте їх до вашого проєкту

CSS – у <head>

<link rel="stylesheet" href="css/bootstrap.min.css">

JavaScript – перед закриттям <body>

<script src="js/bootstrap.bundle.min.js"></script>

Переваги цього методу - працює без доступу до інтернету і ви маєте повний контроль над версіями.

3. Використання менеджера пакетів

Цей спосіб підходить для тих, хто працює з Node.js і використовує системи керування залежностями.

npm install bootstrap@5.3.0

Виберіть метод, який найкраще підходить для вашого проекту, і почніть створювати чудові веб-сайти з Bootstrap 5!

Як підключити Bootstrap до HTML-файла

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Як встановити Bootstrap</title>
    <!-- Підключення CSS Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 class="text-center">Привіт, Bootstrap!</h1>
        <p class="text-muted">Це приклад використання Bootstrap у вашому проекті.</p>
    </div>
    <!-- Підключення JavaScript Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>