CODEWITHSUNDEEP
htmlbootstrap-4
Leo Garsia
Leo Garsia

Reputation: 303

Align picture along text

Studying bootstrap, switched to flex. Here is my code below. How to raise the text on a level with the picture.

Screenshot How to achieve it?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <title>Document</title>
    <style>
        div {
            border: darkgreen 1px solid;
        }
        </style>
</head>
<body>
    <div class="container">
        <div class="d_flex justify-content-start">
            <div> 
                <img src="img/apple.jpg" alt="Spanish apple">
            </div>
            <div>
                <span>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit asperiores nemo reprehenderit quis ducimus. Ipsa cum quasi similique in unde consequatur? Ducimus molestias esse praesentium eos repellendus quidem ad blanditiis, ullam quo architecto, vero voluptate. Modi vitae quia aperiam iste id sit! Nemo, minima obcaecati.
                </span>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

Upvotes: 0

Views: 37

Answers (1)

Leo Garsia
Leo Garsia

Reputation: 303

I've found a solution.

 <div class="container">
        <p class="h3_default">Some header</p>
        <div class="row">
            <div class="col p-2">
                <p class="p_default">
                    <img class="m-2" src="img/apple.jpg" alt="spanish apple" align="left">
                </p>
                <p class="p_default">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis similique numquam provident
                    placeat esse! Aliquam numquam amet alias molestiae voluptatum quis veritatis voluptate, adipisci
                    repellat aspernatur magni ad aperiam perferendis dolorem. Eum tempore aperiam doloremque
                    doloribus voluptatum rem molestiae adipisci sit, optio beatae sapiente, accusantium quaerat
                    aspernatur fugiat cumque praesentium asperiores voluptates accusamus labore, sunt magnam ullam.
                    Doloremque deserunt ipsam ipsum mollitia beatae odit totam, eius magni quas tempora quis
                    molestiae maiores, explicabo aliquid possimus! Nobis consequatur alias, cum hic dicta rerum eos
                    praesentium impedit nesciunt quas, cumque animi distinctio officia minima? Debitis minima
                    nesciunt dicta possimus officia esse quidem, perferendis distinctio. Numquam, quidem. Iste
                    accusantium, autem itaque error ducimus aut dignissimos eaque voluptatem vitae, dolor expedita
                    eveniet placeat nobis?
                </p>

            </div>
        </div>
    </div>

Upvotes: 1

Related Questions