-1

I have this layout and css

<div class="container-fluid header">
    <div class="row text-center">
        <div class="col-md-6 red">
            <h1>First</h1>
        </div>
        <div class="col-md-6 red">
            <h1>Second</h1>
        </div>
    </div>
</div>

css

.header {
    background-color: blue;
}

.col-md-6 {
    min-height: 300px;
}

.red {
    border:2px solid red;
}

i gave min-height on col 6 because i want to have extra space there.I center the text of the content of each column with text-center on the row. But i can't find a way to center the content of the columns vertically.

I tried for example


<div class="container-fluid header">
    <div class="row text-center d-flex align-content-center">
        <div class="col-md-6 red align-self-center">
            <h1>First</h1>
        </div>
        <div class="col-md-6 red align-self-center">
            <h1>Second</h1>
        </div>
    </div>
</div>

but without success

sdsd
  • 447
  • 3
  • 20

2 Answers2

1

Bootstrap Utility Classes

You can center the contents of the column by adding the bootstrap utility classes d-flex, align-items-center and justify-content-center.

Raw CSS

These utility classes are just inline shorthand for:

some-element {
  display: flex;
  align-items: center;
  justify-content: center;
}

Flex Explaination

When a flex container has direction row (default) then align-items handles the vertical alignment and justify-content handles the horizontal alignment.

I found this css-tricks post on flexbox super useful when I was still getting my head around flex layouts.

Example

.header {
    background-color: blue;
}

.col-md-6 {
    height: 300px;
}

.red {
    border:2px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid header">
    <div class="row">
        <div class="col-md-6 red d-flex align-items-center justify-content-center">
            <h1>First</h1>
        </div>
        <div class="col-md-6 red">
            <h1>Second</h1>
        </div>
    </div>
</div>
cam
  • 3,179
  • 1
  • 12
  • 15
  • Thank you for your response camaulay.I accepted your answee. I wonder just when .row has by default display:flex, and when we se align-items-center or align-content-center - why the content in the columns is not setted vertically in center ? – sdsd Jan 14 '21 at 23:42
  • The column itself will be centered vertically but not the content WITHIN the column. Does that make sense? – cam Jan 14 '21 at 23:45
  • yes,thank you very much – sdsd Jan 14 '21 at 23:49
0

You need to be applying 'd-flex' to the div class="col".

By default, row is already a flexbox, but cols are NOT. It wasn't aligning the content because it isn't a flexbox until you give it the d-flex class.

Micah Peterson
  • 1
  • 3