https://kb.froggigi.eu/index.php?action=history&feed=atom&title=Bootstrap
Bootstrap - Versionsgeschichte
2026-06-04T04:47:32Z
Versionsgeschichte dieser Seite in Froggis Wissenssammlung
MediaWiki 1.34.2
https://kb.froggigi.eu/index.php?title=Bootstrap&diff=63&oldid=prev
Froggi am 18. Juni 2019 um 21:51 Uhr
2019-06-18T21:51:27Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Version vom 18. Juni 2019, 21:51 Uhr</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l40" >Zeile 40:</td>
<td colspan="2" class="diff-lineno">Zeile 40:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4/42252877#42252877<del class="diffchange diffchange-inline">|</del>Vertical Align Center in Bootstrap 4]</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4/42252877#42252877 Vertical Align Center in Bootstrap 4]<ins class="diffchange diffchange-inline"></br></ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[https://www.codeply.com/go/GeBvYXxFKY<del class="diffchange diffchange-inline">|</del>Bootstrap 4 full-screen centered form]</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[https://www.codeply.com/go/GeBvYXxFKY Bootstrap 4 full-screen centered form]<ins class="diffchange diffchange-inline"></br></ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[https://www.codeply.com/go/yk1uKMtvdd<del class="diffchange diffchange-inline">|</del>Bootstrap 4 center input group]</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[https://www.codeply.com/go/yk1uKMtvdd Bootstrap 4 center input group]<ins class="diffchange diffchange-inline"></br></ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[https://www.codeply.com/go/9HWnyQm2Sf<del class="diffchange diffchange-inline">|</del>Bootstrap 4 horizontal + vertical center full screen]</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[https://www.codeply.com/go/9HWnyQm2Sf Bootstrap 4 horizontal + vertical center full screen]<ins class="diffchange diffchange-inline"></br></ins></div></td></tr>
</table>
Froggi
https://kb.froggigi.eu/index.php?title=Bootstrap&diff=61&oldid=prev
Froggi: Die Seite wurde neu angelegt: „ Update 2019 - Bootstrap 4.3.1 There's no need for extra CSS. What's already included in Bootstrap will work. Make sure the container(s) of the form are full…“
2019-06-18T21:45:27Z
<p>Die Seite wurde neu angelegt: „ Update 2019 - Bootstrap 4.3.1 There's no need for extra CSS. What's already included in Bootstrap will work. Make sure the container(s) of the form are full…“</p>
<p><b>Neue Seite</b></p><div><br />
<br />
Update 2019 - Bootstrap 4.3.1<br />
<br />
There's no need for extra CSS. What's already included in Bootstrap will work. Make sure the container(s) of the form are full height. Bootstrap 4 now has a h-100 class for 100% height...<br />
<br />
Vertical center:<br />
<pre><br />
<br />
<div class="container h-100"><br />
<div class="row h-100 justify-content-center align-items-center"><br />
<form class="col-12"><br />
<div class="form-group"><br />
<label for="formGroupExampleInput">Example label</label><br />
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"><br />
</div><br />
<div class="form-group"><br />
<label for="formGroupExampleInput2">Another label</label><br />
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"><br />
</div><br />
</form> <br />
</div><br />
</div><br />
<br />
</pre><br />
https://www.codeply.com/go/raCutAGHre<br />
<br />
the height of the container with the item(s) to center should be 100% (or whatever the desired height is relative to the centered item)<br />
<br />
Note: When using height:100% (percentage height) on any element, the element takes in the height of it's container. In modern browsers vh units height:100vh; can be used instead of % to get the desired height.<br />
<br />
Therefore, you can set html, body {height: 100%}, or use the new min-vh-100 class on container instead of h-100.<br />
<br />
Horizontal center:<br />
<br />
text-center to center display:inline elements & column content<br />
mx-auto for centering inside flex elements<br />
offset-* or mx-auto can be used to center columns (.col-)<br />
justify-content-center to center columns (col-*) inside row<br />
<br />
<br />
[https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4/42252877#42252877|Vertical Align Center in Bootstrap 4]<br />
[https://www.codeply.com/go/GeBvYXxFKY|Bootstrap 4 full-screen centered form]<br />
[https://www.codeply.com/go/yk1uKMtvdd|Bootstrap 4 center input group]<br />
[https://www.codeply.com/go/9HWnyQm2Sf|Bootstrap 4 horizontal + vertical center full screen]</div>
Froggi