Как прижать футер к низу bootstrap
Ответы
Для того чтобы прижать футер к нижней части страницы с использованием Bootstrap, вам нужно использовать классы Bootstrap и небольшой CSS. Вот как это можно сделать:
Создайте основную разметку вашей страницы, включая заголовок, основное содержимое и футер:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <title>Bootstrap Footer Example</title> </head> <body> <div class="container"> <h1>Основное содержимое</h1> </div> <footer class="footer"> <div class="container"> <span class="text-muted">© 2022 My Website</span> </div> </footer> </body> </html>Добавьте CSS, чтобы прижать футер к нижней части страницы:
html { position: relative; min-height: 100%; } body { margin-bottom: 60px; /* высота футера */ } .footer { position: absolute; bottom: 0; width: 100%; height: 60px; /* высота футера */ background-color: #f5f5f5; }Подключите стили и скрипты Bootstrap в вашем HTML:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
После применения этих шагов вы увидите, что футер будет прижат к нижней части страницы, независимо от контента на странице. Если контент страницы заполняет всю видимую область, футер будет всегда находиться внизу страницы.
0
0
