Bootstrap footer (футер / подвал)

Основные компоненты футера

Копирайт

Добавьте текст с авторскими правами в нижний блок. Пример:

<footer class="bg-dark text-white text-center py-3">
    <p>© 2024 Ваша компания. Все права защищены.</p>
</footer>

Ссылки на социальные сети

Добавьте иконки или текстовые ссылки на страницы компании в социальных сетях. Пример:

<footer class="bg-light text-center py-3">
    <a href="#" class="me-3"><i class="bi bi-facebook"></i></a>
    <a href="#" class="me-3"><i class="bi bi-twitter"></i></a>
    <a href="#" class="me-3"><i class="bi bi-instagram"></i></a>
</footer>

Контактные данные

Добавьте адрес, телефон и электронную почту. Пример:

<footer class="bg-light text-center py-3">
    <p>Адрес: Москва, ул. Примерная, 123</p>
    <p>Телефон: +7 (495) 123-45-67</p>
    <p>Email: info@example.com</p>
</footer>

Дополнительные возможности

Подписка на рассылку

Добавьте форму для подписки на новости или рассылку. Пример:

<footer class="bg-light text-center py-3">
    <form>
        <input type="email" placeholder="Введите ваш email">
        <button type="submit">Подписаться</button>
    </form>
</footer>

Дополнительные ссылки

Добавьте ссылки на страницы “Политика конфиденциальности”, “Условия использования” и другие. Пример:

<footer class="bg-light text-center py-3">
    <a href="#">Политика конфиденциальности</a>
    <a href="#">Условия использования</a>
</footer>

Bootstrap example footer

Стандартные примеры

Посмотреть и скачать все стандартные примеры можно нажав по кнопке ниже.

Посмотреть демо

Расширенные примеры подвалов

Вариант 1.

Используемые компоненты: кнопки иконки, встроенная форма контура, текст, сетка из 4 столбцов со ссылками внутри и раздел авторских прав.

Мы также применили фон, который меняется в зависимости от темы, используя .bg-body-tertiary класс.

Вариант 2.

https://codepen.io/Alioos_90/pen/VPbzpy https://codepen.io/uiswarup/pen/oNNMedZ

Faq

Как прижать footer к низу страницы bootstrap

Для прижатия футера к низу экрана в Bootstrap 5 можно использовать несколько подходов. Вот некоторые из них:

1. С помощью CSS:

   • Добавьте следующие стили в ваш CSS:

     html, body {
         min-height: 100%;
         position: relative;
     }
     footer {
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
     }

   • Оберните все содержимое страницы в контейнер с паддингом снизу, равным высоте вашего футера:

     <div class="wrapper">
         <!-- Ваш контент -->
         <footer>Ваш футер</footer>
     </div>

   • Это обеспечит прижатие футера к нижней части страницы.

2. Используя Bootstrap 5:

   • В Bootstrap 5 есть класс .fixed-bottom, который автоматически прижимает элемент к нижней части страницы. Примените его к вашему футеру:

     <footer class="fixed-bottom">Ваш футер</footer>

   • Этот класс обеспечит прижатие футера к нижней части экрана.

Выберите подход, который лучше всего соответствует вашим потребностям и дизайну страницы! ?

Заключение

Bootstrap 5 предоставляет множество инструментов для создания красивых и функциональных футеров. Выберите подходящие компоненты и настройте их под свои нужды, чтобы сделать ваш сайт еще лучше!