Center elements both vertically and horizontally by utilizing Bootstrap flexbox

Having delved into the documentation of Bootstrap 4 Flex, I am facing difficulties in making the "align-item-center" property function as desired. Despite trying various examples found online, I am unable to alter the vertical alignment of elements. This situation is quite frustrating for me. Below is a simple HTML example that I am attempting to work on.

.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}
<div class="d-flex justify-content-center align-items-center">
  <p> This should be centered right ?</p>
</div>

My current setup includes Bootstrap 4.4.1, along with the latest versions of popper.js and jquery. To clarify further, I am currently only dealing with a simple text line, but anticipate adding elements with dynamic sizes in the future.

htmlcssbootstrap-4flexbox

Answer №1

To make the height of the parent element the same as the screen size, you can set it to be 100% of the viewport height like this:

.d-flex.justify-content-center.align-items-center {
    height: 100vh;
}

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

Database-driven menu selection

I am currently working on creating a dynamic side navigation menu that pulls its content from a database. The goal is to have the main categories displayed on the left-hand side, and when one is clicked, the others will slide down to make room for any subc ...

phpjqueryhtmlcss

Errors from jQuery validation are causing disruptions in my form's functionality

When jQuery validation error messages appear, they take up space and push other fields downwards. I want the error messages to adjust within the available space and not disrupt other fields or elements. Below is the jQuery validation code I'm currentl ...

jquerycssjquery-validate

Having trouble with the width:auto attribute in IE7?

CSS #wrapper .tn{ width:auto; height:20px; line-height:20px; float:left; padding:5px 2px 5px 5px; margin:0 5px 10px; font-weight:bold; background:#f0f0f0; } HTML <div id="wrapper"> ...

htmlcssinternet-explorerwidthinternet-explorer-7

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 ...

pythonhtmlselenium-webdriverbeautifulsoupdynamically-generated

Targeting images within content in Wordpress

In my custom Wordpress theme, specifically on the single-post page where individual posts are displayed, I have implemented the following code: <article id="post-<?php the_ID(); ?>"<?php post_class('col-md-12'); ?>> <div cla ...

phpjqueryhtmlwordpress

Image input not working in Internet Explorer

While the button displays correctly in Chrome and Firefox, it appears differently in IE: To address this issue in IE, you may need to make adjustments to the CSS styles specifically for that browser. One potential solution could involve creating a separat ...

htmlcsswordpressinternet-explorer

Thickness of Border in Bootstrap Cards

I've been attempting to include a thicker border around the entirety of my Bootstrap 4 card. Despite specifying a thicker border, nothing seems to change. Below is a snippet of the code I'm working with: <div class="container"> <di ...

cssbootstrap-4

Adding up rows and columns using HTML

I've designed an HTML table to function as a spreadsheet, with the goal of being able to total up rows and display the sum in a cell labeled "Total." The same calculation should be applied to columns as well, with totals displayed in the last column c ...

javascriptjqueryhtmlcss

Creating a multiline centered navigation bar item using Bootstrap 4

My navigation bar is functioning properly with single-line items, but encounters alignment issues when dealing with multi-line items: <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> ...

csstwitter-bootstrapsassbootstrap-4

Dynamic CSS view size parameter

Currently, I am studying how to create responsive designs using CSS. I decided to test out some example code provided on the w3schools website (https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_webpage). However, I encountered an issue where ...

htmlcss

Inconsistency in div height caused by positioning disparities

My demonstration shows two lines that should appear equal in height, but one ends up looking thicker due to its top position. Even just adjusting the top position by 1px can make a significant difference in how they look. Is there any way to prevent this u ...

htmlcss

Tips for updating one-time binding data in AngularJS

I am currently facing an issue with a div that displays details such as mobile number, name etc. in the format: {{::mobilenumber}}, {{::name}} Within this div, there is a button that when clicked should populate the same values in a new form However, des ...

javascripthtmlangularjsmodel-view-controllerone-time-binding

The Video Element Is Not Expanding to Fill the Entire Parent Div

My goal is to design a responsive layout where a video element spans the full width of its parent div with the class .hero. However, despite my best efforts, the video doesn't seem to be expanding as expected. Here's the relevant CSS code I' ...

htmlcss

The scroll function remains unchanged when using overflow-y scroll and border radius

I need help with styling a div that will contain a large amount of text on my webpage. I want to use the overflow-y property for scroll, but the issue arises when trying to style the scroll bar with a radius. Check out this jsfiddle link for reference: ht ...

javascriptjqueryhtmlcss

The left menu icons transform upon mouseover interaction

Is there a way to dynamically change the image displayed in the left menu when hovering over it, similar to the example shown below? https://i.stack.imgur.com/HzGwR.png Currently, the image does not change on hover. We would like it to transition into a ...

htmlcss

Empty HTML fieldset

For a blog article I'm working on, I'd like to include a "Note" box that resembles a <fieldset> with a <legend> <fieldset> <legend>Note</legend> Please take note of this. </fieldset> (check out http:/ ...

html

Displaying incorrect symbols with icon fonts

I have successfully integrated icon fonts into my simple web page. Check it out on jsFiddle here My design is similar to this example, but instead of bars, I see a snake icon displayed. How can I fix this issue with the fonts? Here is the code snippet: ...

htmlcssicon-fonts

Can the system automatically generate and display a new user ID right after a form is submitted?

Once users have submitted the basic information in a form, how can I ensure that the newly created userID is displayed in a hidden field on the header page? The initial form collects Name, Phone, and Email details. Upon submission, the 'userID' ...

phphtmlformsmysqliecho

The mobile version of my website's home page is not displaying certain elements of the featured image

I'm in the process of launching a fresh new blog with Flask as the backend. Currently, I'm using a Bootstrap template and have set an image as the featured image. While it displays properly on computers, tablets crop it out. You can check out the ...

htmlcssflaskbootstrap-4web-deployment

"Displaying mongoose date in the HTML5 input type date format (dd/mm/yyyy) is a simple process that can

I have a structured data in MongoDB as shown below: var Person = new Schema({ "Name": { type: String, required: true }, "DOB": { type: Date, "default": Date.now } }); An instance of this schema is created using NodeJs with mongoose ODM: { "N ...

node.jshtmlmongodbmongoosehandlebars.js