Doctype bootstrap vertical alignment

Asked May 03 '19 at 17:54

Active May 03 '19 at 19:38

Viewed 131 times

I've downloaded bootstrap 4.3.1 and for the life of me I can't get vertical alignment to work under any circumstance if I have a <!DOCTYPE html> tag at the head of the html.

EDIT: With the body tag, results are the same.

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="stylesheets/bootstrap.min.css" type="text/css">
</head>

<body>
<div class="container">
    <div class="row h-100 justify-content-center align-items-center">
    <div class="mx-auto col-sm-6" style="border: 2px solid red">
        <h3 class="text-center">Heading3</h3>
        <h4 class="text-center">Heading4</h4>
    </div>
    </div>
</div>
</body>
</html>

This divs are still stuck to the top of the screen unless I comment out the doctype. I have tried adding a custom css with body{height:100%} and body{min-height:100%} and no matter what, the doctype breaks vertical alignment. This happens in both Chrome and Safari. Any ideas?

edited May 03 '19 at 19:21

asked May 03 '19 at 17:54

iceblueorbitz

You're missing the body tag. – Lewis May 03 '19 at 18:08
I updated my post, the body tag made no difference. It's something with the doctype tag. – iceblueorbitz May 03 '19 at 19:27
2

you need height:100% on the container, the body and the html – Temani Afif May 03 '19 at 19:33
https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4 – j08691 May 03 '19 at 19:34
Okay. Just noting that body{height: 100%} won’t have worked without the body tag. Also not that height 100% also needs to be applied to the HTML element. – Lewis May 03 '19 at 19:46

Doctype bootstrap vertical alignment

0 Answers0