0

I'm using the bootstrap grid system in my website but when I shrink the screen down the text begins to overlap. How do I stop this? I've left a picture showing what I mean. I can't find any answer on online so that is why I posted.

Code: 

<div class="col-sm-6">
        <img class="img-center" src="img/Linkedin_ Pic .jpg" width="50%" height="400px">
        <br>
        <h2 class="text-center">Edgar Hardy - President</h2>
        <br>

       <p class="text-center">

          ...</p>

          <div class="br"></div>

        <p class="text-center">...  
          </p>

        </div>


        <div class="col-sm-6">
            <img class="img-center" src="img/Mary Cockerham.png" width="50%" height="400px">
            <br>
            <h2 class="text-center">Mary Cockerham - Vice-President</h2>
            ...       
        </div>
    </div>

    <div class="row"> 
      <div class="col-sm-6">
        <img class="img-center" src="img/audrey jones cropped pic.png" width="50%" height="400px">
        <br>
        <h2 class="text-center">Treasurer</h2>
        ...
        </div>
        <div class="col-sm-6">
            <img class="img-center" src="img/Susana Bali.png" width="50%" height="400px">
            <br>
            <h2 class="text-center">Lorem Ispum</h2>
           ...

            </div>
      </div>
Darien Hardy
  • 29
  • 1

1 Answers1

0

The first two items are not in the row. also, use img-fliud class for img tag. use this: (I test your code by my own image. you can change src attribute for them.)


<div class="row">
    <div class="col-sm-6">
        <img class="img-fluid img-center" src="assets/images/food.png" >
        <br>
        <h2 class="text-center">Edgar Hardy - President</h2>
        <br>

        <p class="text-center">

            ...</p>

        <div class="br"></div>

        <p class="text-center">...
        </p>

    </div>


    <div class="col-sm-6">
        <img class="img-fluid img-center" src="assets/images/food.png" >
        <br>
        <h2 class="text-center">Mary Cockerham - Vice-President</h2>
        ...
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <img class="img-fluid img-center" src="assets/images/food.png" >
        <br>
        <h2 class="text-center">Treasurer</h2>
        ...
    </div>
    <div class="col-sm-6">
        <img class="img-fluid img-center" src="assets/images/food.png" >
        <br>
        <h2 class="text-center">Lorem Ispum</h2>
        ...

    </div>
</div>
Hamzeh
  • 301
  • 4
  • 13
  • Hey thanks, quick question tho I'm now running into a problem where I cant properly size the image why is that?> – Darien Hardy Feb 02 '20 at 01:41
  • Look here: [set responsive image's max-width](https://stackoverflow.com/questions/53721711/how-to-set-responsive-images-max-width-bootstrap-4) hope your problem is resolved. – Hamzeh Feb 02 '20 at 09:04