Bootstrap 4 - class="img-fluid"

Hey guys ! Can please somebody help me out by telling me why the class "img-fluid " is not working properly?


The idea is to have something like this:
58

Instead, I am getting problems with the img-fluid class.

Thanks in advance !

Whats happening is that your divs are set for large devices (col-lg-6) so on small and medium devices the columns are going to expand. set the section to following:

<section class="container-fluid ">
      <div class="row ">
        <div class="col-6 d-flex justify-content-center align-items-center">
          <div class="text-black text-center ">
            <h2>Museum of Candy</h2>
            <h2>Museum of Candy</h2>
            <h2>Museum of Candy</h2>
            <h2>Museum of Candy</h2>
          </div>
        </div>
        <div class="col-6 p-0 ">
          <img class="img-fluid" src="https://images.unsplash.com/photo-1534073737927-85f1ebff1f5d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1204e5551548223af82981f0025984ef">
        </div>
      </div>
    </section>
1 Like