Centering content vertically in Bootstrap 4 containers

I'm having difficulty with vertically aligning my container. I've attempted to follow the steps outlined in this article: Vertical Align Center in Bootstrap 4

This is part of a school project, and it's my first time working with HTML/CSS, so I'm not very skilled at it. The only solution that somewhat worked was setting the container to have a height of vh-100 and using my-auto on the rows. I grouped the rows within a container to keep them together. However, setting the container to be 100% of the viewport height caused overflow issues, resulting in vertical scrolling.

The other suggestions mentioned in the article did not produce the desired effect for me. I'm unsure of where I may be going wrong.

I made a few custom CSS changes to adjust the card height to 400px and modify some colors. Without these modifications, the layout does not work as expected either.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb9b4b4afa8afa9baab9beff5edf5ea">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container d-flex flex-column container-fluid">
    <div class="wrapper">
        <div class="row">
            <div class="offset-2 col-sm-4">
                <span>Title</span>
            </div>
        </div>

        <div class="row">
            <div class="offset-2 col-sm-4">
                <div class="card bg-black">
                    <div class="card-body text-center flex-column d-flex">
                    <img class="mx-auto" src="https://via.placeholder.com/100"/>
                    <h2 class="card-title text-center text-on-dark font-weight-bold">Mentor</h2>
                    <p class="card-text text-left text-on-dark px-5">Yada yada yada</p>
                    <button type="button" class="btn btn-gold btn-lg rounded-pill align-self-center mt-auto mb-3" style="width: 230px">GRADE</button>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                    <div class="card bg-primary">
                    <div class="card-body text-center flex-column d-flex">
                    <img class="mx-auto" src="https://via.placeholder.com/100"/>
                    <h2 class="card-title text-center text-white font-weight-bold">Student</h2>
                    <p class="card-text text-left text-white px-5">Blah blah blah</p>
                    <button type="button" class="btn btn-white btn-lg rounded-pill align-self-center mt-auto mb-3" style="width: 230px">STUDY</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

htmlcssbootstrap-4

Answer №1

Your instructions are a bit vague regarding what should be centered, but to vertically center the container in the viewport, you need to set the body element (or a new parent div) to 100% height, use flex properties, and align its contents to the center using my-auto on the container.

For a detailed demonstration of the solution, please refer to the full page demo provided below:

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="670505067d6a7d61707570705b64616a777074">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>

<body class="vh-100 d-flex">
  <div class="container d-flex flex-column container-fluid my-auto">
    <div class="wrapper">
      <div class="row">
        <div class="offset-2 col-sm-4">
          <span>Title</span>
        </div>
      </div>

      <div class="row">
        <div class="offset-2 col-sm-4">
          <div class="card bg-black">
            <div class="card-body text-center flex-column d-flex">
              <img class="mx-auto" src="https://via.placeholder.com/100" />
              <h2 class="card-title text-center text-on-dark font-weight-bold">Mentor</h2>
              <p class="card-text text-left text-on-dark px-5">Yada yada yada</p>
              <button type="button" class="btn btn-gold btn-lg rounded-pill align-self-center mt-auto mb-3" style="width: 230px">GRADE</button>
            </div>
          </div>
        </div>

        <div class="col-sm-4">
          <div class="card bg-primary">
            <div class="card-body text-center flex-column d-flex">
              <img class="mx-auto" src="https://via.placeholder.com/100" />
              <h2 class="card-title text-center text-white font-weight-bold">Student</h2>
              <p class="card-text text-left text-white px-5">Blah blah blah</p>
              <button type="button" class="btn btn-white btn-lg rounded-pill align-self-center mt-auto mb-3" style="width: 230px">STUDY</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Cleaning up HTML strings in Angular may strip off attribute formatting

I've been experimenting and creating a function to dynamically generate form fields. Initially, the Angular sanitizer was removing <input> tags, so I discovered a way to work around this by bypassing the sanitation process for the HTML code stri ...

javascripthtmlangulartypescript

What is causing the content to overflow outside of the navbar on smaller screens or mobile devices?

/* *{ font-family: sans-serif; box-sizing: border-box; margin: 0; padding: 0; overflow-x: hidden; } */ .main { min-height: calc(100vh - 10rem); display: grid; place-items: center; } p { font-size: 4rem; line-height: 1.6; } nav ...

htmljquerycssbootstrap-4

`Incompatibility issue between HTML, CSS and Chrome browser`

There seems to be an issue with the left menu not displaying properly on the website in Google Chrome. Interestingly, it appears correctly aligned at the bottom of the menu in Firefox (blue), but in Chrome, it is positioned in the middle. Despite the co ...

htmlcss

Unable to hide content in Shopify using @media

How can I hide a Facebook like button when the browser window is resized to a certain width? This is the code I am using: @media all and (max-width: 300px) { .fb-like { float: right; display: none; } } While this code works on regular websites, it do ...

cssmobilemedia-queriesdevice

100% width is applied to the table cell within the div element

Below is the code I am working with: <div style='display: table'> <div style='height:200px; width:100%; text-align: center; display: table-cell; vertical-align: middle'>No result found</div> </div> I'm ...

htmlcss

Center and justify image inside flexbox using MUI

Can someone explain why my image appears centered but not justified? I'm feeling confused about this. <Box sx={{ display: 'flex', minHeight: '100vh', alignItems: 'center', flexGrow ...

htmlcssreactjsmaterial-ui

Manually closing Bootstrap 4 Popper.js Tooltip on command

To activate a Bootstrap 4 Popper.js Tooltip using jQuery, I simply do the following: When the 'like' button is clicked, the tooltip will be displayed: $('.like-btn').on('click',function(){$(this).tooltip('show');}); ...

javascriptjquerybootstrap-4tooltippopper.js

Navigate within an HTML element by utilizing the element's unique ID

I need to create a condition based on the presence of style="display:none;" in the following code snippet. <div class="wrap hide" id="post_query" style="display:none;"> </div> My goal is to identify whether style="display:none;" is included o ...

javascriptjqueryhtml

What are some creative ways to customize radio buttons using images?

I am looking to customize the appearance of my radio buttons by using images for both selected and unselected states. Here is the CSS code I have implemented: input[type="radio"] { background: url("https://example.com/path/to/unselec ...

jquerycssradio-button

(CSS) Unusual phantom white outline surrounding menu with no visible border

I've just finished creating my first multi-level drop-down menu, but I'm encountering two white border issues. The first white border appears at the bottom of the menu and seems to be related to the padding of the a-elements. The specific area in ...

htmlcssmenu

The close menu button is not functioning properly when clicked outside the menu - the buttonevent.matches is not recognized as a

I am encountering an issue with the dropdown menu that is not closing when clicking outside of the menu button. Despite having faced this problem before, I can't seem to find a solution now. Any help would be greatly appreciated as I am uncertain why ...

javascripthtmlcssdropdown

Migrating WordPress Gutenberg to a Separate React Component: Troubleshooting Missing CSS Styles

I am in the process of developing a standalone version of the Gutenberg block editor from Wordpress that can function independently outside of the Wordpress environment. My goal is to integrate the Gutenberg editor as a React component within an existing R ...

cssnode.jsreactjswordpresswordpress-gutenberg

Is there a way to store a class property as a variable using PostCSS?

Looking to store a dynamic property in a variable for use with calc(). There is a class with a height that changes dynamically. .cuerpo-detalle { height: x; } The goal is to create a variable that captures the height property of the .cuerpodetalle cla ...

javascriptcsspostcsscssnext

Leveraging JSON for fetching distinct identifiers from a database

When a user hovers over a parent span containing an empty img tag, I use JSON and jQuery to retrieve the src of the image from the database. The issue arises when the retrieved src is applied to all looped span images on the same page, instead of each imag ...

javascriptjqueryhtmljson

Is there a way to incorporate CSS or tables when converting HTML to PDF using JavaScript?

While working on a project, I successfully converted an HTML file into a PDF. However, the output did not display the CSS design. Can anyone provide suggestions on how to include CSS design in the PDF file? Below is the JavaScript function code: $(funct ...

javascripthtmlcsspdfjspdf

HTML animation effect on subpage with a URL modification [LATEST UPDATE]

Can you smoothly load a new subpage in the background, update the URL, and fade it in while an animation is playing on the previous page? Check out this example (jsFiddle) to see a simple animation: $(document).ready(function() { 'use strict&apo ...

javascriptjqueryhtmlcss

ways to interpret a string input within the <input class> class using selenium in C#

When trying to extract the string value from the input class using selenium, I encounter an issue. Below is the HTML code for the element I am trying to access: <input class="form-control" id="GroupName" maxlength="50" nam ...

c#htmlselenium-webdriver

How to manage line breaks in React Native's text components

I have this text block: const line = "Hello\nworld"; Now I need to include it in a component like this: <Text numberOfLines={1} ellipsizeMode="tail" style={[styles.lastMessageText, { color: colors.backdrop }]} > ...

javascriptcssreactjsreact-native

Incorporating a text box underneath the model image

My application currently utilizes a grid gallery that perfectly fits my needs. However, there are two specific changes I need to make in order for it to be complete for my purpose. Unfortunately, I am struggling to figure out how to implement these changes ...

javascriptjqueryhtmlcssgallery

What are the steps to implementing imgix-js via command line?

$(document).ready(function () { var imgixOptions = { updateOnResizeDown : true, updateOnPinchZoom : true, fitImgTagToContainerWidth: true, fitImgTagToContainerHeight: true, autoInsertCSSBestPractices: true, ...

javascripthtmlruby-on-railsimgix-jsimgix