What is the best way to vertically center content in Bootstrap 4.5?

Below is a snippet of the code I've been working on.

<body style="height: 100vh; margin: 0;
    padding: 0;  ">

<!-- Form Section
============================================= -->
<p>[wpshortcode1]</p>
    <div class="container h-100 ">
        <div class="row justify-content-center">
            <form class="col-sm-6" method="POST" action="../categories/">
                <div class="form-group mb-3">
                    <label for="city" class="form-label">City</label>
                    <input type="text" class="form-control rounded" id="city" name="destinationCity" placeholder="City">
                </div>
                <div class="form-group mb-3 ">
                    <label for="state" class="control-label">State</label>
                    <div>
                        <select class="form-control" id="state" name="destinationState" placeholder="Please Choose">
                            <option value="">Please Choose</option>
                            <option value="AK">Alaska</option>
                            <option value="AL">Alabama</option>
                            ...
                            <option value="WV">West Virginia</option>
                            <option value="WY">Wyoming</option>
                        </select>
                    </div>
                </div>
                <div class="form-group mb-3">
                    <label for="postalcode">Zip Code</label>
                    <input type="text" name="destinationPostalCode" class="form-control rounded" id="postalcode" placeholder="Zip Code">
                </div>
                <button type="submit" class="btn btn-primary" value="Customer_Data" name="submitCustomerData">Submit</button>
            </form>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-7">
                <div class="mt-5">
                    <label for="response" class="form-label">Response Body:</label>
                    <textarea class="form-control rounded" id="response" rows="3"></textarea>
                </div>
            </div>
        </div>
    </div>

<!-- External JavaScripts
============================================= -->

<?php wp_footer(); ?>

</body>

</html>

I've attempted using align-middle as specified in the Bootstrap documentation on the container and child divs, but it hasn't worked. Since I'm not utilizing inline, inline-block, inline-table, and table cell elements, I thought align-items-center might do the trick, but unfortunately it hasn't.

Answer №1

To align the columns, simply add the class align-items-center to the desired row. Alternatively, you can add the class to any parent element in order to align the child elements. Keep in mind that for align-items:center; to work, the item must be set to display as flex.

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

How can I turn off automatic ellipsis on my IOS device?

Currently, I am working on a web application that involves displaying location descriptions retrieved from an API. The issue I am encountering is that the description is being cut off with an ellipsis after a certain number of lines when viewed on an iPhon ...

What causes two elements with display: inline-block; position: absolute; to overlap instead of appearing side by side?

It is recommended to use position: relative; in order to achieve inline block behavior for both elements and prevent them from overlapping. This positions the elements inline next to each other as they are recognized as blocks. When using position: absolu ...

Retrieving information from a dynamically created HTML link地址

I was curious about whether Selenium is the sole library capable of extracting data from a table on a specific webpage, found here. While attempting to navigate these sites with bs4, I found that it only displayed the table headers without any data. It wo ...

How can Javascript be used to interact with buttons and select options?

Can anyone help me with creating a JavaScript code that can select an option from a drop down, click on that option, and then add it to the cart by clicking another button? So far, I have attempted the following: browser.getelementbyid("id").invokemembe ...

Tips on deactivating automatic email client-specific content (such as Gmail or Outlook) in your emails

I have inserted the following code => <span style="font-size:12px;"><b>Name:</b></span></font><font size="1"><span style="font-size:12px;">Pratik</span> However, when viewed in a browser (such as Outlook ...

Incorporate pug and sass into your React project for a more

Are pug/jade and sass compatible with react? I enjoy organizing my code by separating files, and the functionality that sass and pug provide is great for this purpose. Is there a way to integrate pug and sass into a react project? Pug example: doctype ...

Enhancing the functionality of the onclick function within the ng-repeat by incorporating a scope

I am looking to pass a parameter to a function that is called via onclick within an ng-repeat: <!-- Sliding bar (bottom) --> <div ng-show="currentSVG && currentLanguage && currentWidth && bannerHeight" pageslide ps-open=" ...

Challenge with Filter Functionality when Activating Button

Can you help me implement a search filter using buttons with the Isotope Plugin? For example, entering a search value in an input field and then clicking a search button to display the search results. How can I achieve this using buttons? Below is the H ...

Retrieve the chosen option from a dropdown menu and transfer it to the submit button in PHP

I have a unique situation where I need to extract and store selected values from two separate drop-down menus generated from arrays. The goal is to pass these selected values in the submit button link. For example, if a user selects "123" for email and "t ...

Give a sidebar within a grid layout a sticky position

As I work on coding a website layout, I have utilized a grid template. My goal is to make the header and left sidebar sticky. I have successfully achieved this for the header, but unfortunately, the sidebar remains non-sticky. Despite researching solutions ...

use ajax to dynamically load a section of the webpage based on filter criteria

I need to implement a search filter using 3 checkboxes. The search results will be displayed in the div with the id=posts_results <div class="checkbox"> <label><input type="checkbox" id="id1" class="typePost" value="En groupe"> ...

Is it unnecessary to use both "width: inherit" and "float: none

When learning about responsive design, one pattern that is frequently seen is: @media screen and (max-width: 480px){ .class1{ width: inherit; float: none; } .class2{ width: inherit; float: none; } f ...

Positioning an image on the left side of a div within a flex container using

Here is the code I have: .usp-bar { display: flex; flex-wrap: wrap; background-color: #005932; color: #fff; font-weight: 700; padding: 10px 0; margin-top: 0; ju ...

Having trouble interacting with an element using Selenium in Python

I am trying to figure out how to download an image from Instagram, but I cannot seem to programmatically click on the download button of this page. Even after attempting to use XPath and CSS selector methods for clicking, unfortunately, neither seems to w ...

Retrieve the parent's current state by accessing it through a callback function in React

My callback function onRestore is only logging the history until the id of the clicked snapshot. Why is it showing incorrect state? I've exhausted all options, so any help would be appreciated. import React, { useState, useEffect, useRef } from "re ...

Having trouble getting the Click Element with CSS selector to function properly in Google Tag Manager?

How can I detect a click on the specified element by using the "Click Element" variable in Google Tag Manager? <a href="https://amazon.in/product-id" target="_blank" class="amazon-btn"> <div> <span&g ...

An issue arises in vue.js where the v class binding takes precedence over other bindings and fails to properly remove

I have a game with a punching bag where I want to incorporate an animation class each time the bag is clicked. Once the health meter hits zero, I intend to replace the bag image with one depicting a burst bag. Things are running smoothly up until the poin ...

Issue with table collapse/accordion feature in Bootstrap

The issue I am facing is with a bootstrap table that has 4 parent rows. Each of these rows can be clicked to reveal unique child rows specific to that parent row. Everything works fine as long as I collapse a row before un-collapsing another one. However, ...

Limiting the height of a grid item in MaterialUI to be no taller than another grid item

How can I create a grid with 4 items where the fourth item is taller than the others, determining the overall height of the grid? Is it possible to limit the height of the fourth item (h4) to match the height of the first item (h1) so that h4 = Grid height ...

How can I ensure that a form submission still functions properly even when the submit button disappears due to an onBlur event in React and Next

I am facing an issue with a form on my website that triggers an event upon submission. Within the form, there is a textarea field. When you click on the textarea, a submit button appears. However, it disappears when you click out of the textarea. This fun ...