Vertically center-align col text with background color in bootstrap 4.1

Question

this is the code that works actually aligns the text in the middle:

<div class="container section-content">
    <div class="row" style="border-radius: 4px; border: solid 1px #979797;">
        <div class="col-md-3 align-self-center" style="background-color: #4a90e2">
            Align
        </div>
    </div>
</div>

but this is the output: the desired output should fill the whole left column with the background color.

how do i achieve this?

edit: not a duplicate of How can I make Bootstrap columns all the same height? this is an issue with vertical alignment

Possible duplicate of [How can I make Bootstrap columns all the same height?](https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — Kamalesh M. Talaviya, Jul 28 '18 at 05:16

Minal Chauhan · Accepted Answer · 2018-07-28T06:45:39.020

5

Try this:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-3 d-flex justify-content-center align-items-center" style="background-color: #4a90e2;">
      Align
  </div>
  <div class="col-md-9">
    <div class="p-2 bd-highlight">Flex item 1</div>
    <div class="p-2 bd-highlight">Flex item 2</div>
    <div class="p-2 bd-highlight">Flex item 3</div>
    <button type="button" class="btn btn-primary">Primary</button>
  </div>
</div>

edited Jul 28 '18 at 06:45

answered Jul 28 '18 at 05:21

Minal Chauhan

6,025
8
21
41

This helped. The solution that worked based on your code: `
`
– nrion Jul 28 '18 at 05:28
Glad to help, please accept the answer as the correct one. – Minal Chauhan Jul 28 '18 at 05:41

score 0 · Answer 2 · answered Jul 28 '18 at 05:21

This might help. ps: see full page output. Use this class align-items-center

<!Doctype html>
<html>
 <head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
 </head>
<body>
<div class="container">
    <div class="row" style="border-radius: 4px; border: solid 1px #979797;">
        <div class="col-md-3 align-items-center" style="background-color: #4a90e2">
            <h1>Align</h1>
        </div>
  <div class="col-md-9"><ul>
  <li>content</li>
  <li>content</li>
   </ul></div>
    </div>
</div>
</body>
</html>

score 0 · Answer 3 · answered Jul 28 '18 at 11:31

The "align" content should be inside an inner div that's centered, instead of centering the column itself.

<div class="container section-content">
    <div class="row" style="border-radius: 4px; border: solid 1px #979797;">
        <div class="col-md-3 d-flex flex-column" style="background-color: #4a90e2">
            <div class="my-auto">
            Align
            </div>
        </div>
        <div class="col">
            ...
        </div>
    </div>
</div>

https://www.codeply.com/go/fwlfC2eCh7

Vertically center-align col text with background color in bootstrap 4.1

3 Answers3