wie in Bootstrap 5 vertikal zentrieren?

Der Container ist ganz oben was auch immer man probiert


<div class="container mx-auto">
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-header">Header</div>
                    <div class="card-body">Content</div>
                    <div class="card-footer">Footer</div>
                </div>
            </div>
        <div class="col-sm-3"></div>
    </div>

2 Antworten

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, IT

27.05.2022, 19:57

Gib deinem body Element eine minimale Höhe von 100vh (viewport-height). Über die Eigenschaften display: flex und align-items: center kannst du dann deinen Container vertikal zentrieren. Horizontales Zentrieren erreichst du mit justify-content: center.

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

LG medmonk

Woher ich das weiß:Berufserfahrung – Full-Stack Developer

Mensch4

Beitragsersteller

27.05.2022, 20:38

funktioniert super, danke

Tea2Go

27.05.2022, 15:25

Gib dem Parent eine Höhe (Bsp. h-100) und align-items-center

Mensch4

Beitragsersteller

27.05.2022, 16:00

ändert leider nicht das geringste :(

Tea2Go

27.05.2022, 18:23

@Mensch4

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <style>
        body, html {
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="container d-flex h-100">
                <div class="card col-4 mx-auto justify-content-center align-self-center">
                    <div class="card-header">Header</div>
                    <div class="card-body>">Content</div>
                    <div class="card-footer">Footer</div>
                </div>
</body>
</html>

Habe das eben mal getestet. Vergesse in diesem Fall nicht dein HTML Dokument auf 100% Height zu setzen

Mensch4

Beitragsersteller

27.05.2022, 20:24

@Tea2Go

hat das html dokument also nicht 100% height standartmäßig? ich dachte das wäre immer 100%

Tea2Go

27.05.2022, 20:30

@Mensch4

Nein nicht standardmäßig. Kannst gerne mal mit dem Inspector im Browser spielen (F12). Wenn der Inspector aktiv ist und du über deine Seite hoverst, kannst du jeden Bereich seperat sehen.

Ähnliche Beiträge

Wie kann ich eine Tabelle Handytauglich mit Bootstrap Grid machen?

Hallo,

ich habe eine Tabelle mit bootstrap grit in der form

heder header header ...

value1 value1 value1

value2 value2 value2

...

wenn das ganze auf Handygröße eingestampft wird erhalte ich

header

value1

value2

wie könnte ich so ein Layout realisieren

header

value1

header

value1

header

value1

header

value2

...

oder

...zum Beitrag

HTML - Text vertikal zentrieren?

Hat jemand von euch eine Idee warum die Überschrift nicht mittig zentriert wird? Ich habe es mit vertical-align, align-content und align-items usw probiert aber nichts zeigt einen Effekt.

https://images.gutefrage.net/media/fragen/bilder/html---text-vertikal-zentrieren/0_big.png?v=1516395008803"/>

...zum Beitrag

Bootstrap Footer ganz unten?

Wie kann ich in Bootstrap meinen Footer ganz unten "befestigen"? LG Luca

...zum Beitrag

Wordpress Vertikal Zentrieren?

Moin Moin Freunde,

Kennt einer ein Plugin für Wordpress, welches ermöglicht den Content Vertikal zu Zentrieren? Oder geht das wirklich nur über CSS? Bin für jede Antwort sehr Dankbar:)

Mit freundlichen Grüssen

...zum Beitrag

[Spigot] Header und Footer mehr als 2 Zeilen?

Hallo ich würde gerne ein Tablist programmieren mit mehr als nur 2 Zeilen Header / Footer, gibt es hierfür eine API?

...zum Beitrag

HTML CSS Website Footer wird im Container angezeigt, obwohl er nicht drin ist?

Hallo,

Ich "programmiere" gerade ein wenig mit HTML und CSS und baue eine Website mit einem Head, einer Main und einem Footer. Mein Problem ist, dass alle Elemente der Website nach der Main (bei mir heißt sie "Container") trotzdem noch innerhalb des Containers angezeigt werden. Somit ist bei mir der Footer im Container Main, obwohl der Container vorher schon geschlossen wurde.

-------------------------------------------------------------------------------------

HTML CODE:

<!DOCTYPE html>
<html>
 <head>
  <title>Aufgabe 1</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
  <header>
   <header1 class="item1">
    <h2>FeWos</h2>
   </header1>
  </header>
  <div" class="container">
   <div class="b1">
    <div>
     <h1>Item 1</h1>
    </div>
    <div class="bild1">
     <img src="pingu.png" width="50%" height="50%">
    </div>
   </div>
   <div class="b1"><br>Box 2</div>
   <div class="b1"><br>Box 3</div>
   <div class="b1"><br>Box 4</div>
   <div class="b1"><br>Box 5</div>
   <div class="b1"><br>Box 6</div>
  </div>
  <footer>
   <p>Hallo</p>
  </footer>
 </body>
</html>

----------------------------------------------------------------------------------------------------

CSS CODE:

body {
  margin: 0;
}
header {
  height: 120px;
  background-color: rgb(43, 43, 43);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.container {
  border: 3px solid;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 90px;
  padding: 90px;
}
.b1 {
  display: flex;
  background-color: rgb(93, 161, 224);
  width: 30%;
  height: 500px;
  flex-grow: 1;
  transition: transform 0.2s ease-out;
  border-radius: 20px;
}
.b1:hover {
  transform: scale(1.05);
}
.bild1 {
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  width: auto;
  height: auto;
}
footer {
  background-color: rgb(43, 43, 43);
  width: 100%;
  height: 120px;
  padding: 0px;
}

----------------------------------------------------------------------------

Wie man sehen kann wird der "container" mit </div> abgeschlossen, aber der Footer ist trotzdem im Container. Hoffe mir kann jemand bei dem Problem helfen.

Auf dem Bild kann man das auch ganz gut sehen. Das anthrazit farbige soll der Footer sein und dieser liegt innerhalb des Containers, welcher zur Sichtbarkeit eine Umrandung hat.
Würde mich echt freuen, wenn mir jemand weiterhelfen kann. Hab auch Chat GBT schon gefragt, aber Chat GPT sagt, dass der Code ganz normal ist und, dass der Footer nicht im Container ist.

...zum Beitrag

WordPress - Elementor - vertikal zentrieren?

Wie kann man mit Elementor eine Überschrift in einem Abschnitt vertikal zentrieren? Mit Margin/Padding ginge es zwar, aber das funktioniert dann in der mobilen Ansicht leider nicht...

...zum Beitrag

Fahrrad Hinterrad vertikal zentrieren?

Hallo, mein Hinterrad horizontal zu zentrieren habe ich hinbekommen, aber wie man auf dem Bild sieht ist es vertikal schief.

We sollte man da am besten vorgehen?

...zum Beitrag

Wieso wird diese Webseite in React ohne Header und Footer gerendert?

Zur Aufgabe: Man soll drei Komponenten haben: Header, Main und Footer. Diese drei Komponenten müssen dann in die MainView und die MainView in die App.

Wenn ich die Webseite lade, ist zwar alles gut soweit, aber wenn ich über die Navigation auf Kontaktseite z.B. klicke, werden weder Footer noch Header angezeigt. Kann mir jemand bitte helfen?

import React from 'react';
import { Link } from 'react-router-dom';
import '../App.css';

const Header = () => (
  <header>
    <div id="logo">
      <Link to="/startseite">
        <img src="/img/Chicolio_Logo_trs_thumbnail.png" alt="Logo" />
      </Link>
    </div>
    <h1>Startseite</h1>
    <nav>
      <Link id="homepage" to="/startseite">Startseite</Link>
      <span>|</span> {/* Vertikaler Strich als visuelle Trennung */}
      <Link id="contactpage" to="/kontakt">Kontakt</Link>
      <span>|</span>
      <Link id="impressum" to="/impressum">Impressum</Link>
      <Link id="shoppingcart" to="/warenkorb">Warenkorb</Link>
    </nav>
  </header>
);

export default Header;

import React from 'react';
import '../App.css';

const Footer = () => (
  <footer className= "footer">
    <div>
      <p>&copy; Unsere Namen - 2024</p>
    </div>
  </footer>
);

export default Footer;

import React from 'react';
import Startseite from './Startseite';

const Main = () => {
  return (
    <div>
      <Startseite />
    </div>
  );
};

export default Main;

import React from 'react';
import Header from './Components/Header';
import Footer from './Components/Footer';
import Main from './Components/Main';
import './App.css';

const MainView = () => {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
};

export default MainView;

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import MainView from './MainView';
import Warenkorb from './Components/Warenkorb';
import Impressum from './Components/Impressum';
import Produkt from './Components/Produkt';
import Startseite from './Components/Startseite';
import Kontakt from './Components/Kontakt';
import './App.css';

// Wurzel-Appkomponente
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainView />} />
        <Route path="/warenkorb" element={<Warenkorb />} />
        <Route path="/impressum" element={<Impressum />} />
        <Route path="/produkt/:id" element={<Produkt />} />
        <Route path="/startseite" element={<Startseite />} />
        <Route path="/kontakt" element={<Kontakt />} />
      </Routes>
    </Router>
  );
}

export default App;

Das ist, wenn man nach dem Browsen in der Navigation auf Startseite klickt.

Und das wird direkt beim Öffnen angezeigt:

...zum Beitrag

Bootstrap, warum geht row-cols- nicht?

Warum funktioniert das hier mit row-cols-2 von Bootstrap:

<div class="container">
        <div class="row row-cols-2">
          <div class="col">Column</div>
          <div class="col">Column</div>
          <div class="col">Column</div>
          <div class="col">Column</div>
        </div>
      </div>

Dies hier aber nicht? Die zwei Elemente nimmt er hier nicht an, was übersehe ich?

<div class="container">
        <div class="row g-3 row-cols-2">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                  <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="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                  <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="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                  <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="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                  <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="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                  <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="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
    </div>

...zum Beitrag

Wie kann ich in HTML einen div in einem div vertikal zentrieren?

Hi,

frage steht im Titel.

Danke

...zum Beitrag

html: wie div boxen neben- und untereinander?

Hallo, in meiner Website sollen dienstleistungen aufgelistet werden.
Für die PC Ansicht, sollen diese (insgesamt 6) nebeneinander stehen.
Für die Tablet und Handy Ansicht sollen diese dann so umbrechen, das genug Platz ist, um sie noch zu lesen und sie nicht ineinander verschwimmen.
Ich habe jetzt hier versucht fürs Tablet drei Boxen nebeneinander und somit dann zwei Spalten zu haben, allerdings ist in jeder Ansicht jetzt alles untereinander und man muss auch noch zur Seite scrollen um den ganzen Text zu lesen (dies soll aber nicht sein).
Im Folgenden ist der Teil meiner CSS Datei:

.leistung {

padding: 15px;

margin: 15px;

}

.leistung-container {

display: flex;

flex-direction: column;

}

/* Layout für Tablet (teilweise nebeneinander, teilweise untereinander) */

@media (min-width: 25em) and (max-width: 45em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(50% - 2em);

/* Zwei Boxen nebeneinander */

}

/* Layout für PC (nebeneinander) */

@media (min-width: 45em) and (max-width: 65em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(33.33% - 2em);

/* Drei Boxen nebeneinander */

}

@media (min-width: 65em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(33.33% - 2em);

/* Drei Boxen nebeneinander */

}

Ist da irgendwas falsch?
Könnt mir da jemand helfen?
Dankeschön

...zum Beitrag

Wie kann ich die Elemente im Footer zentrieren in CSS?

Ich habe mehrere Links im Footer, welche in CSS mit einem Flex also (Display: flex, flex-Wrap: Warp) hintereinander in einer Zeile stehen.

jedoch sind diese linksbündig & wollen nicht in die Mitte gehen.

ich habe es schon über den Footer mit Text-align probiert und auch schon über die <p>‘s in denen die Links stehen... klappt leider alles nicht.

...zum Beitrag

Wie kann ich einen Button vertikal zentrieren?

Ich habe auf meiner Webseite einen Button, der ganz allein auf der Startseite stehen soll. Er ist schon horizontal zentriert mit diesem Code:

"div align= center"

Wie kann ich den Button nun noch vertikal zentrieren?

DANKE!

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen