• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Umieszczenie stopki bootstrap v5.

VPS Starter Arubacloud
+1 głos
346 wizyt
pytanie zadane 22 lipca 2021 w HTML i CSS przez RaDeK-2020 Użytkownik (670 p.)
zamknięte 22 lipca 2021 przez RaDeK-2020

Dzień Dobry,

Mam problem z umiejscowienie stopki na stronie. Mianowicie chciałbym żeby stopka była przyklejona na dole strony, nie do treści zawartej na stronie. Urzywam Bootstrtapa w wersji 5. 

 

<!DOCTYPE html>
<html lang="pl">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>#</title>

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

<body>

  <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e8f4ff;">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="autorPL.html">O autorze</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="kontakt.html">Kontak</a>
          </li>
        </ul>
      </div>
      <a class="navbar-brand">#</a>
    </div>
  </nav>

  <div class="container m-auto mt-4">
    <div class="row">
      <div class="col">
        <div class="card" style="width: 18rem;">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card" style="width: 18rem;">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>

  </div>


  <footer class="main-footer">
    <div class="row">
      <div class="col-sm">
        <p class="text-center">&copy; by Radosław Budnik 2021</p>
      </div>
    </div>
  </footer>


  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
    crossorigin="anonymous"></script>

  <script src="bootstrap/js/bootstrap.js"></script>
</body>

</html>

 

komentarz zamknięcia: problem rozwiązany

1 odpowiedź

+2 głosów
odpowiedź 22 lipca 2021 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 22 lipca 2021 przez RaDeK-2020
 
Najlepsza

Próbowałeś użyć klasy fixed-bottom na footerze?

komentarz 22 lipca 2021 przez RaDeK-2020 Użytkownik (670 p.)
działa, dzięki

Podobne pytania

0 głosów
1 odpowiedź 461 wizyt
pytanie zadane 23 lipca 2021 w HTML i CSS przez RaDeK-2020 Użytkownik (670 p.)
0 głosów
0 odpowiedzi 300 wizyt
pytanie zadane 1 grudnia 2017 w PHP przez ewazdomu Początkujący (320 p.)
0 głosów
0 odpowiedzi 82 wizyt
pytanie zadane 11 listopada 2023 w HTML i CSS przez niezalogowany

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...