Bootstrap4.2.1のgrid、align-items-centerがうまくいかない

前提・実現したいこと

bootstrap練習中です。
gridを作っていて、緑のcolumnの中で黄色のrown二行を、垂直方向に中心に寄せたいのですがうまくいきません。よろしくお願いいたします。

該当のソースコード

bootstrap
1<!DOCTYPE html>
2<html>
3
4    <head>
5        <meta charset="utf-8">
6        <meta http-equiv="X-UA-Compatible" content="IE=edge">
7        <title>GETTING STARTED WITH BRACKETS</title>
8        <meta name="description" content="Bootstrap Basics">
9
10
11        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
12        <link rel="stylesheet" hrefs="styles.css">
13
14    </head>
15    <body>
16       <div class="container-fluid">
17            <div class="row" style="height: 200px;">
18
19                            <div class="col-4 bg-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quisquam blanditiis qui ad, iusto quae vitae labore fugiat at dolore deleniti atque impedit libero molestias natus, veritatis laborum ullam veniam.</div>
20
21                            <div class="col-4 bg-success">
22                                <div class="row bg-warning">nested column1 bottom1</div>
23                                <div class="row bg-warning">nested column2 bottom2</div>
24                            </div>
25
26                            <div class="col-4 d-flex bg-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore in possimus, laborum ratione autem officiis culpa accusamus, iusto distinctio ipsum placeat soluta, aliquam debitis nostrum aliquid totam eveniet nesciunt obcaecati!3
27                            </div>
28
29            </div>
30
31        </div>
32
33
34        <script
35        src="https://code.jquery.com/jquery-3.3.1.min.js"
36        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
37        crossorigin="anonymous"></script>
38       <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
39
40    </body>
41</html>
42

試したこと

・緑のcolumnのclass内にalign-items-centerを記述
・黄色のrowのclass内にalign-items-centerを記述
・緑のcolumn内にrowを作りclass内にalign-items-centerを記述したのち、既存の黄色のrowをcolomnに変更していれる

補足情報（FW/ツールのバージョンなど）

Bootstrap4.2.1
HTML

行動規範の内容に同意します

回答1件

ベストアンサー

d-flex flex-column justify-content-center を追加。

HTML
1<div class="col-4 bg-success d-flex flex-column justify-content-center">

https://getbootstrap.com/docs/4.2/utilities/flex/#direction

投稿2019/02/07 04:30

x_x

総合スコア13749

tampere

2019/02/07 04:35

ありがとうございました！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！１

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！