Achieving Vertical Centering in Bootstrap: A Step-by-Step Guide

Question

Achieving Vertical Centering in Bootstrap: A Step-by-Step Guide

Creating a mobile-optimized website using bootstrap 4. Currently struggling to vertically center an element within the available space. The element consists of a title with fixed size, a message, and 2 buttons in a div. Need to ensure it is vertically centered without any overflow.

Found a solution for Bootstrap 3, but the snippet doesn't work for Bootstrap 4. Another answer suggested using flexible box, but it doesn't work when there is only one component occupying the remaining space.

The element that needs to be vertically aligned is displayed through a jQuery call:

Any suggestions on how to vertically align the content of #wait-for-result-container in the middle?

html css bootstrap-4

Answer 1

Answer №1

This technique is extremely effective when working with Bootstrap 3.x:

#centered-element {
  position:absolute;
  left:0;
  right:0;
  top:50%;
  -webkit-transform:translateY(-50%) !important;
  -ms-transform:translateY(-50%) !important;
  transform:translateY(-50%) !important;
}

top:50% positions the element halfway down the container, and then transform:translateY(-50%) moves it back up by half the distance, resulting in a perfectly centered object vertically within the parent container.

Answer 2

This technique is extremely effective when working with Bootstrap 3.x:

#centered-element {
  position:absolute;
  left:0;
  right:0;
  top:50%;
  -webkit-transform:translateY(-50%) !important;
  -ms-transform:translateY(-50%) !important;
  transform:translateY(-50%) !important;
}

top:50% positions the element halfway down the container, and then transform:translateY(-50%) moves it back up by half the distance, resulting in a perfectly centered object vertically within the parent container.

Answer 3

Answer №2

If you want to center content vertically, you can achieve this using flexbox

#result-container {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
}

Check it out on CodePen

To smoothly fade in content using display: flex

$("#result-container")
    .css("display", "flex")
    .hide()
    .fadeIn();

Answer 4

If you want to center content vertically, you can achieve this using flexbox

#result-container {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
}

Check it out on CodePen

To smoothly fade in content using display: flex

$("#result-container")
    .css("display", "flex")
    .hide()
    .fadeIn();

Answer 5

Answer №3

You may simply set its position to absolute:

#wait-for-result-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

$('#btToShow').click(function(){
   $('#card-container').fadeOut(200, function(){$('#wait-for-result-container').fadeIn();});
});

$('#change-choice').click(function(){
   $('#wait-for-result-container').fadeOut(200, function(){$('#card-container').fadeIn();});
});

#wait-for-result-container {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

    <title>Some page</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
        crossorigin="anonymous">
</head>

<body>
    <H1 class="text-center page-header">Somelist</H1>
    <div id="card-container" class="container show center-block">
        <div id="card-subcontainer" class="row center-block">
          <!-- Here there is normally a lot of buttons -->
          <button class="btn" id="btToShow">Show</button>
        </div>
    </div>

    <div id="wait-for-result-container" class="container center-block text-center m-7" style="display: none;">
            <h2>This is the part that is absolutely not vertically aligned</h2>
            <div>
                <button class="btn btn-primary btn-lg">Wait for it...</button>
                <button id="change-choice" class="btn btn-danger">Change the choice</button>
            </div>
    </div>



<script src="https://code.jquery.com/jquery-3.1.1.min.js"     crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
    crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.2.0/js/mdb.min.js" crossorigin="anonymous"></script>-->
</body>

</html>

Answer 6

You may simply set its position to absolute:

#wait-for-result-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

$('#btToShow').click(function(){
   $('#card-container').fadeOut(200, function(){$('#wait-for-result-container').fadeIn();});
});

$('#change-choice').click(function(){
   $('#wait-for-result-container').fadeOut(200, function(){$('#card-container').fadeIn();});
});

#wait-for-result-container {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

    <title>Some page</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
        crossorigin="anonymous">
</head>

<body>
    <H1 class="text-center page-header">Somelist</H1>
    <div id="card-container" class="container show center-block">
        <div id="card-subcontainer" class="row center-block">
          <!-- Here there is normally a lot of buttons -->
          <button class="btn" id="btToShow">Show</button>
        </div>
    </div>

    <div id="wait-for-result-container" class="container center-block text-center m-7" style="display: none;">
            <h2>This is the part that is absolutely not vertically aligned</h2>
            <div>
                <button class="btn btn-primary btn-lg">Wait for it...</button>
                <button id="change-choice" class="btn btn-danger">Change the choice</button>
            </div>
    </div>



<script src="https://code.jquery.com/jquery-3.1.1.min.js"     crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
    crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.2.0/js/mdb.min.js" crossorigin="anonymous"></script>-->
</body>

</html>

Achieving Vertical Centering in Bootstrap: A Step-by-Step Guide

Answer №1

Answer №2

Answer №3

Similar questions

Incorporating a divider into a Material-UI MenuItem causes an additional border

Frequently Asked Questions about Bootstrap Navbars

What is the best way to format these div elements in order to create a functional comment section?

How to assign the 'src' attribute to an HTML element using Node.js

How do I effectively replace content with a banner or alert message for users experiencing issues with the website on Internet Explorer?

Can you explain the significance of the characters '& > * + *' in JSX (CSS)?

Display various images based on different device orientations in UIWebView

Find and retrieve all data attributes with JavaScript

How to retrieve the image source using jQuery

Troubleshooting image alignment problem within a flexbox display

Detecting the scroll events of elements with the overflow:hidden property

Encase the entire section following cloning with JQuery

Unique CSS-created chronological schedule with alternating design

Ways to align anchor tags in the middle of a DIV element?

Determine the Height of the Container once the Font File has Finished Loading

Adding a caption aligned to the right edge of an image in Wordpress

Is it possible to use a JQuery function after a page redirect has occurred

Javascript: struggling with focus loss

The container or row I placed in the middle of the page content is not anchored to the bottom like it should be for footer widgets

Tips for adding jQuery UI styling to elements generated dynamically