CODEWITHSUNDEEP
csshtmltwitter-bootstrapbootstrap-4
Cal Courtney
Cal Courtney

Reputation: 1289

Bootstrap 4 text-center in flexbox not working

I am trying to split my webpage into two vertical columns which can be clicked on to take you to the right pages. I've gotten this 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);
}

My issue is, no matter where I put the text-center class. My <h1>s stay left aligned on the page. Can anybody help?

Upvotes: 4

Views: 7422

Answers (1)

Pete
Pete

Reputation: 58432

It is because you have added display flex to the parent container. This means the children are not full width anymore.

If you add the following style, it will fix your error:

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

Example bootply

If you don't want to grow the children, you can just add the following to your vertical center: justify-content: center;

Example bootply 2

Upvotes: 9

Related Questions