'How to fit image with col-sm-12 in bootstrap

So there two columns , i wanna fit my image inside my first column so my second column can go down! enter image description here

my HTML :

 <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-sm-12">
                <div class="hero-image container-fluid">
                    <img class="man-with-laptop img-fluid"
                        src="https://demo.templateflip.com/super/images/illustrations/hello3.svg" alt="">
                </div>
            </div>
            <div class="col-lg-6 col-sm-12">
                <div class="hero-text-area container-fluid">
                    <p>HELLO!</p>
                </div>
            </div>
        </div>

    </div>
htmlcssresponsive-designbootstrap-5


Solution 1:[1]

Try it like this below and see what happens.... 1 container, 1 row.

Also, it looks like you're adding a lot of your own CSS I can see from your class types. I think your added CSS is messing about with your layout and confusing Bootstrap.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-sm-12">
             <img class="man-with-laptop img-fluid" src="https://demo.templateflip.com/super/images/illustrations/hello3.svg" alt="">
         </div>
        <div class="col-lg-6 col-sm-12">
           <p>HELLO!</p>
        </div>
    </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Cutey from Cute Code

Related Questions