Nsryjdtyk

I have this code for a bootstrap jumbotron, however I would like to have the column at left with the h1 and the paragraph vertically aligned with the image in the right column, so that the title and the paragraph are aligned with the center of the image. Do you know how to achieve that?

Also do you know why the jumbotron is not aligned with the navbar? The "Title" is more to the left than the navbar image at left and also the image in the jumbotron is more to the right than the last item of the navbar. Do you know why?

I have a demo of the issues here:

https://jsfiddle.net/upmanct4/

HTML:

<div class="container">

    <nav class="navbar navbar-expand-lg navbar-light py-4">

        <a class="navbar-brand">

            <img src="https://via.placeholder.com/110" width="110" height="25">

        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"

                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

        </button>



        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav ml-auto">

                <li class="nav-item active">

                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">Link</a>

                </li>

                <li class="nav-item dropdown">

                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"

                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                        Dropdown

                    </a>

                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">

                        <a class="dropdown-item" href="#">Action</a>

                        <a class="dropdown-item" href="#">Another action</a>

                        <div class="dropdown-divider"></div>

                        <a class="dropdown-item" href="#">Something else here</a>

                    </div>

                </li>

                <li class="nav-item">

                    <a class="nav-link disabled" href="#">Disabled</a>

                </li>

            </ul>

        </div>

    </nav>

</div>



<div class="jumbotron jumbotron-fluid">

    <div class="container">

        <div class="row">

            <div class="col-7">

                <h1 class="display-5 font-weight-bold text-dark">Title</h1>

                <p class="lead text-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias earum tempore, eveniet quis quae quo placeat ullam, maxime harum at corrupti, vel, cumque error pariatur veritatis doloribus libero quibusdam hic.</p>

            </div>



            <div class="col-5">

                <img src="https://via.placeholder.com/490" width="490" height="300">

            </div>

        </div>

    </div>

</div>

Use .align-items-center on .row
This will vertically align both .col-7 and .col-5 within the .row

<div class="row align-items-center">

    <div class="col-7">

        <h1 class="display-5 font-weight-bold text-dark">Title</h1>

        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias earum tempore, eveniet quis quae quo placeat ullam, maxime harum at corrupti, vel, cumque error pariatur veritatis doloribus libero quibusdam hic.</p>

    </div>



    <div class="col-5">

        <img src="https://via.placeholder.com/490" width="490" height="300">

    </div>

</div>

Alternately you can use .align-self-center on the .col-7
This will vertically align only .col-7
If .col-7 happens to have a greater height than the .col-5, .col-5 will remain at the top of the .row since .col-5 is not vertically aligned within the .row

<div class="row">

    <div class="col-7 align-self-center">

        <h1 class="display-5 font-weight-bold text-dark">Title</h1>

        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias earum tempore, eveniet quis quae quo placeat ullam, maxime harum at corrupti, vel, cumque error pariatur veritatis doloribus libero quibusdam hic.</p>

    </div>



    <div class="col-5">

        <img src="https://via.placeholder.com/490" width="490" height="300">

    </div>

</div>