Issues with aligning text in a flexbox using Bootstrap 4's text-center property

I am currently working on a project to create a webpage with two vertical columns that are clickable and lead to different pages. Here is what I have so far.

HTML

<!-- Choices -->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-xs-12 vertical-center webd">
            <h1 class="text-muted text-center">Web Design</h1>
        </div>
        <div class="col-md-6 col-xs-12 vertical-center circ">
            <h1 class="text-muted text-center">Circus</h1>
        </div>
    </div>
</div>

CSS

.vertical-center {
    min-height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.webd {
    background-image: url('webd.jpg');
}

.circ {
    background-image: url(circ.JPG);
}

The problem I am facing is that regardless of where I place the text-center class, the <h1> elements remain aligned to the left. Can someone assist me with this issue?

csshtmltwitter-bootstrapbootstrap-4

Answer №1

The reason for this issue is that you have applied display flex to the parent container, causing the children not to be full width.

To resolve this error, you can add the following style:

.vertical-center > .text-center 
{
    flex-grow: 1;
}

Check out this example on Bootply

If you prefer not to make the children grow, simply add the following to your vertical center: justify-content: center;

Here's another example on Bootply

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

Determine the number of inputs within a div and increment each one by +1 using jQuery

I am currently working on developing a slider and have successfully completed most parts of it, except for the challenge of counting input fields using jQuery and assigning an incremented number to each of them upon action completion. On my slide, I have ...

javascriptphpjqueryhtmlcss

Tips for changing the font size of labels in a tree view using Material UI

While working with material ui treeview, I have customized the fontSize for each treeItem as shown below: <TreeItem key={mainCategory.name} nodeId={mainCategory.name} label={mainCategory.name} disabled={ ...

cssreactjsmaterial-uitreeview

Creating consistent indentation in HTML code can be achieved without the presence of any unnecessary

When I add indentation to my HTML code, it results in extra whitespace between elements on different lines. <div id="nbcntcnt"> <a href="notset.html" class="nbcntbutton" id="snbb">Overview</a> <a href="notset.html" class="nbcntb ...

htmlcssindentation

php The header functionality is enabled, but there are errors present

After attempting to redirect to the index page upon logging in with an ajax button, I encountered a strange issue. Instead of being redirected to index.php, the header is not functioning properly and I simply receive the HTML code of index.php within my lo ...

phphtmlajaxheadersmarty

NodeJS File Upload: A Step-by-Step Guide

I need assistance with uploading an image using nodejs. I am able to successfully send the file to node, but I am unsure how to handle the "req" object. Client <html> <body> <input id="uploadInput" type="file"/> < ...

javascripthtmlajaxnode.js

Tips for aligning the navigation bar, main content, and footer in the center

Exploring the realm of web coding for the first time, I find myself in need of some guidance. My current project involves creating a webpage for the local sports team to replace their outdated one on Wordpress. Finding the platform not very user-friendly, ...

htmlcss

Having trouble displaying the input upon clicking the icon

Currently, I am honing my skills in vanilla JavaScript by working on a website project. In this project, I have implemented a feature where clicking on a fingerprint icon triggers an input field to appear for the user to enter their password. The code snip ...

javascripthtmlcss

Preventing the display of AngularJS HTML tags while the app is being loaded

I am new to AngularJS (using version 1.5.8) and I am currently following the tutorials provided on docs.angularjs.org/tutorial. Below is the HTML code snippet: <div class="jumbotron"> <h1>{{application_name | uppercase }}</h1> ...

javascripthtmlangularjs

:before pseudo-element causing interference with child elements

Struggling to understand how an absolutely positioned :before element works. I need a large quote mark to be placed behind a testimonial. I opted for a :before element because it is a font, making it scalable for retina displays and saving an extra HTTP re ...

htmlcsspositionz-indexpseudo-element

Unusual behavior observed while looping through an HTMLCollection returned by the getElementsByClassName method

After spending some time debugging, I discovered an issue with my function that changes the class of elements to modify their properties. Surprisingly, only specific elements were being affected by this change. It took me a while to troubleshoot and resolv ...

javascripthtmlgetelementsbyclassnamehtmlcollection

Tips for horizontally aligning an item in a flexbox only when it wraps onto a new line

In my layout, I have a container that consists of text on the left and a button on the right. The challenge I'm facing is ensuring proper alignment when they are on the same line versus when the button wraps to a new line on smaller screens. Ideally, ...

htmlcssflexbox

Cover the whole page in darkness and emphasize the division element

I attempted to implement a solution I found on stackoverflow without success. The issue is that the blackout feature does not seem to activate - nothing happens. Within my JavaScript code (all enclosed in the $(document).ready(function () tag), it appears ...

javascriptjqueryhtmlcss

Learn the steps to seamlessly incorporate Bootstrap templates with handlebars.js to enhance the visual appeal of

Greetings! I'm facing an issue while trying to display a bootstrap template using handlebars (I am utilizing Express as the server). The template does not render correctly as the carousel slider and Navbar logo are missing. PS: I have included all ...

jquerynode.jsexpresshandlebars.jsbootstrap-4

What is the best way to include the application version in an Electron project using JavaScript

While attempting to publish an update for my app, I encountered a strange error. Can anyone pinpoint the issue? (Note: Node.js is included) Error Message: Unexpected token < <script> console.log(process); let output = <h2 class="page- ...

javascripthtmlelectron

Preventing PHP function calls from halting page loading without refreshing

I have encountered an issue while attempting to call a PHP function from my HTML code. My PHP script primarily connects to a Java server to request information about Twitter accounts. I am specifically asking for their profile picture's URL and their ...

phphtml

Utilizing 'this' in jQuery: Image swapping with thumbnails, Twitter Bootstrap framework

Is it possible for jQuery's 'this' to simplify my code? You can view the full code here. Thank you for any help or suggestions. Here is the jQuery code: /* Ref: http://api.jquery.com/hover/ Calling $( selector ).hover( handlerIn, handler ...

javascriptjquerytwitter-bootstrap

Bootstrap SideBar (Template): I desire for the sidebar to expand in the content area without the need for lengthy paragraphs below

After following an online tutorial to create a visually appealing sidebar, I made some adjustments to the code using Bootstrap 4 instead of the tutorial's Bootstrap 3. However, I encountered an issue where the navbar does not stretch to the right as e ...

htmlcssbootstrap-4navbarsidebar

Generating SVG images that show up as black in light mode and switch to light colors in dark mode

I am currently working on a website that has the option to switch between light and dark mode, and I need my logo to adjust accordingly. The black elements of my logo should appear black in dark mode and light in light mode. I attempted using the CSS cod ...

htmlcsssvg

Setting a div's width to cover 100% of the screen's width

I'm currently working on creating a 2 column layout using divs. The left column has a fixed size of 150 px, while the right column should extend to the right boundary of the browser. I've tried using both width:auto and width:100% values for the ...

csshtml

What is the best way to ensure my background image adjusts properly for both iPhones and Android devices to be responsive?

I have set the background image in my CSS to fit perfectly without any need for adjustments. The goal is for the image to resize itself when viewed on mobile devices or tablets. .intro { display: table; width: 100%; height: auto; padding: ...

htmlcssiphoneresponsive-design