Having trouble with vertical centering in Bootstrap 4 - need assistance

Question

Having trouble with vertical centering in Bootstrap 4 - need assistance

I tried to center text vertically on my webpage using a code snippet that I found, but it didn't work for me. Here is the HTML code I used:

<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <title>Under Construction Page</title>
</head>
<body>
    <div class="row h-100">
        <div class="col-sm-12 my-auto">
            <h1 class="display-4">UNDER CONSTRUCTION</h1>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</body>

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

For simple tasks like this, it's best to utilize Bootstrap 4 classes instead of relying on css hacks. Using css hacks often leads to more problems down the line, necessitating even more hacks to fix them.

A straightforward solution for vertical centering using Bootstrap 4 classes is to apply the align-items-center class to the row. If the content within the row is minimal, you may also need to set a height for the row. This can be done by adding style="height: 100vh", giving it 100% viewport height.

To horizontally center the text as well, use the text-center class on the column.

Below is the complete code snippet (click the "run code snippet" button and expand to full screen):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row align-items-center" style="height: 100vh">
        <div class="col-sm-12 text-center">
            <h1 class="display-4">UNDER CONSTRUCTION</h1>
        </div>
    </div>
</div>

Answer 2

For simple tasks like this, it's best to utilize Bootstrap 4 classes instead of relying on css hacks. Using css hacks often leads to more problems down the line, necessitating even more hacks to fix them.

A straightforward solution for vertical centering using Bootstrap 4 classes is to apply the align-items-center class to the row. If the content within the row is minimal, you may also need to set a height for the row. This can be done by adding style="height: 100vh", giving it 100% viewport height.

To horizontally center the text as well, use the text-center class on the column.

Below is the complete code snippet (click the "run code snippet" button and expand to full screen):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row align-items-center" style="height: 100vh">
        <div class="col-sm-12 text-center">
            <h1 class="display-4">UNDER CONSTRUCTION</h1>
        </div>
    </div>
</div>

Answer 3

Answer №2

Give This a Shot:

.col-sm-12.my-auto {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.col-sm-12.my-auto {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <h1 class="display-4">UNDER CONSTRUCTION PAGE</h1>
    </div>
</div>

Answer 4

Give This a Shot:

.col-sm-12.my-auto {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.col-sm-12.my-auto {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <h1 class="display-4">UNDER CONSTRUCTION PAGE</h1>
    </div>
</div>

Having trouble with vertical centering in Bootstrap 4 - need assistance

Answer №1

Answer №2

Similar questions

What is the best way to calculate the total of multiple columns using JavaScript and jQuery?

Carousel with Bootstrap: Heading positioned over the content

Struggling to center items on a page with Bootstrap 5

Explore the contents of an HTML table with Swift 3

Is there a way to adjust the transparency of individual words in text as you scroll down a page, similar to the effect on https://joincly

Make Jekyll process HTML files even without front matter by using the Knitr tool to add front matter to the HTML files

How do I create a Bootstrap 4 multi-level navigation bar that drops to the right on the third level?

Experiencing problems with website loading due to jquery?

Transforming video files into HTML5 ogg/ogv and mpg4 formats

"Enhance your date input with UI-Bootstrap's date picker

Angular Dynamic Form Troubles

Enhancing interactivity by incorporating GIFs upon clicking a JavaScript button

When attempting to update a database, the Jquery ajax response is not being reflected

What is the correct way to effectively refresh an included PHP file?

CSS issue with highlighting menu items

Escaping multiple levels of quotations in a string within HTML documents

Retrieve a specific column value upon button click in HTML and JavaScript

Do elements containing {visibility:hidden} properties exist within the HTML DOM structure?

Restrict the amount of pages shown on the bootstrap navigation bar

Steps for changing the background color string in mui?