logo

Bootstrap 4 alpha

Mega Menue Sidebar


Bootstrap 4 Tutorial: 3. Sticky Footer.

Nun fügen wir der Seite einen sticky - footer hinzu der z.B. fü Copyright-Hinweise , Social-Media Icons und oder Impressum/Datenschutzerklärung genutzt werden kann.

Der footer tag ist ein html5 Element welches nicht nur als Seitenfooter verwendet werden kann, sondern z.B. auch in sections als Abschluss.

 

Grundaufbau der Seite im Tutorial

 

Webseitenaufbau

Als grundsätzlichen Seitenaufbau habe ich mir den Inhalt der Grafik vorgestellt.

Den footer lege ich "sticky" an so dass er mit der Seite beim scrollen auf und ab geht.

 

Da es sich bei der verwendeten Version um bootstrap 4 alpha 6 handelt sind Änderungen / Anpassungen für die Zukunft bis zum Final Release 4 anzunehmen.

Der nachfolgende Codesnippet zeigt den Quellcode des Footer's der vor dem abschliessenden Bodytag unmittelbar nach dem Inhalts-Container einzupflegen ist.

 

Quelltext Footer

 


<footer class="footer">
      <div class="container-fluid">
        <span class="text-muted">designed by </> <a href="//responsive-web-solution.de" target="_blank">responsive-web-solution.de</a> - 2107</span>
      </div>
    </footer>

 

container-fluid

Den Footerinhalt habe ich in einen container-fluid gepackt welcher sich dann bildschirmbreit durch die fluid-Klasse erstreckt

text-muted

text-muted ist in der Typography von Bootstrap eine vorgegebene Klasse, wie text-primary, text-success, text-info, text-warning und text-danger

 

Der footer muss nun nur noch in der tutorialstyle-nav-footer.css via css formatiert/plaziert werden.

Folgender Code bitte hinzufügen

 


/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

 

Da wir schon eine Zuweisung zum Body haben durch die Platzierung des Contents wegen der Navbar im letzten Schritt, kann die Bodyzuweisung des margin-bottom, dieser zugwiesen werden. Der Übersicht halber habe ich es hier in einer zusätzlichen Body-Zuweisung angegeben.

 

Im nachfolgenden Schritt strukturieren wir den Inhalt mit einem in Bootstrap 4 neuem Gridsystem.

Preview/Code
Modal Modal Modal Extern
CSS HTML Preview Preview