Search code examples
htmlimagecssbootstrap-4word-wrap

Bootstrap 4 text wrapping around another column/images

Hi I have a problem with my text not wrapping around my images with bootstrap 4. Instead of wrapping around it stays on the right, maybe I should not have put the images in seperate columns?

The two images have to be on top of eachother but I need the text to be on the right side of it and when the screen gets smaller and the text height is bigger than the height of the two images it needs to wrap around them.

Also how can I make it so that the images DONT resize when you resize the browser, so that they always remain the same size.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<section id="about">
    <div class="container">
        <div class="row">

            <div class="col-lg-6 col-md-12 col-sm-12">
                <h1>About</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Illo suscipit facilis ipsum ullam reiciendis odio error
                    iste neque ratione libero rem accusamus voluptatibus, nihil
                    unde maiores sunt nisi. Assumenda, consectetur.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Illo suscipit facilis ipsum ullam reiciendis odio error
                    iste neque ratione libero rem accusamus voluptatibus, nihil
                    unde maiores sunt nisi. Assumenda, consectetur.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Illo suscipit facilis ipsum ullam reiciendis odio error
                    iste neque ratione libero rem accusamus voluptatibus, nihil
                    unde maiores sunt nisi. Assumenda, consectetur.
                </p>
            </div>

            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="row">
                    <div class="col-12">
                        <h1>About</h1>
                    </div>
                    <div class="col-6">
                        <div class="row">
                            <div class="col-12">
                                <img src="http://via.placeholder.com/350x150" alt="" style="width: 100%;
    margin-bottom: 25px;" class="about-img">
                            </div>
                            <div class="col-12">
                                <img src="http://via.placeholder.com/350x150" alt="" style="width: 100%;
    margin-bottom: 25px;" class="about-img">
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            Illo suscipit facilis ipsum ullam reiciendis odio error
                            iste neque ratione libero rem accusamus voluptatibus, nihil
                            unde maiores sunt nisi. Assumenda, consectetur.
                        </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            Illo suscipit facilis ipsum ullam reiciendis odio error
                            iste neque ratione libero rem accusamus voluptatibus, nihil
                            unde maiores sunt nisi. Assumenda, consectetur.
                        </p>
                    </div>
                </div>
            </div>

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

Solution

  • You should put the images and text in same col. Use float-left on the images for the text to wrap around them.

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

    <div class="row">
    <div class="col-12 mb-3">
        <img src="http://via.placeholder.com/350x150" class="float-left mr-3 about-img">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Illo suscipit facilis ipsum ullam reiciendis odio error
        iste neque ratione libero rem accusamus voluptatibus, nihil
        unde maiores sunt nisi. Assumenda, consectetur.
    </p>
    </div>
    <div class="col-12 mb-3">
        <img src="http://via.placeholder.com/350x150" class="float-left mr-3 about-img">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Illo suscipit facilis ipsum ullam reiciendis odio error
            iste neque ratione libero rem accusamus voluptatibus, nihil
            unde maiores sunt nisi. Assumenda, consectetur.
        </p>
    </div>
</div>

    It also looks like you have a lot of unnecessary nesting of row>col. Remove width:100% if you don't want the images to resize.