Why isn't my card responsive when using bootstrap?

Question

So I've made a card that you can see here:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="card-body">
    <div class="container mr-0 pr-0">
      <div class="row">
        <div class="col-2">
          <img width="150" heigth="150" src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" />
        </div>
        <div class="col-10 text-left pr-0">
          <span style="font-weight: lighter; font-size:22px;">USERNAME</span>
          <div>
            <span class="mr-5" style="font-weight: lighter; font-size: 12px;">100 POSTS</span>
            <span class="m-5" style="font-weight: lighter; font-size: 12px;">100 FOLLOWERS</span>
            <span class="m-5" style="font-weight: lighter; font-size: 12px;">100 FOLLOWING</span>
            <span class="m-5" style="font-weight: lighter; font-size: 12px;">Phone: 100</span>
            <span class="m-5" style="font-weight: lighter; font-size: 12px;">Email: 100</span>
          </div>
          <div class="mb-1 mt-1">
            <span style="font-weight: bold; font-size: 12px;">More Text</span>
          </div>
          <div>
            <span style="font-weight: normal; font-size: 12px; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie at urna id faucibus. Proin facilisis lectus ac luctus gravida. Phasellus posuere nec mauris ac hendrerit. Curabitur venenatis et augue id dignissim. Curabitur vitae nunc dignissim, ultricies lorem quis, malesuada odio. In molestie metus nec ligula finibus, sed placerat odio ornare. In eu faucibus elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum efficitur turpis eu iaculis maximus. Proin pharetra congue risus quis rhoncus.</span>
          </div>
        </div>
        <div class="col-12 pr-0 mt-3">
          <button type="button" class="btn btn-primary float-right mr-2">Extract</button>
        </div>
      </div>
    </div>
  </div>
</div>

And the issue I'm facing is that if the window gets to a smaller size than 1920 x 1080p it doesn't start stacking each div until the very end.

The text starts overlapping the image and what not. How do I properly make it responsive with Bootstrap?

It looks just fine if you run the script in fullscreen, but if you start shrinking it, the text starts overlapping etc. Why is that? And how do I properly make it responsive using Bootstrap?

Answer 1

1. Remove the mr-0 pr-0 from <div class="container mr-0 pr-0">

2. Make small changes in your grid allocated to each divs.

   • For lg screens, I have allocated 2 grids for image and rest for description.
   • For small and medium screens, I have allocated 4 grids for image and rest for description.

See if the below snippet functions as you require -

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="card-body">
    <div class="container">
      <div class="row">
        <div class="col-lg-2 col-sm-3">
          <img width="150" heigth="150" class="img-fluid " src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" />
        </div>
        <div class="col-lg-10 col-sm-9 text-left pr-0">
          <span style="font-weight: lighter; font-size:22px;">USERNAME</span>

          <div class="col-lg-10 col-md-9 col-xs-5">
            <span class=" col-md-4 col-xs-4" style="font-weight: lighter; font-size:12px;">100 POSTS</span>
            <span class="col-md-5 col-xs-4" style="font-weight: lighter; font-size:12px;">100 FOLLOWERS</span>
            <span class="col-md-4 col-xs-4 " style="font-weight: lighter; font-size:12px;">100 FOLLOWING</span>
            <span class="col-md-4 col-xs-4 " style="font-weight: lighter; font-size:12px;">Phone: 100</span>
            <span class="col-md-4 col-xs-4 " style="font-weight: lighter; font-size:12px;">Email: 100</span>
          </div>
          <div class="mb-1 mt-1">
            <span style="font-weight: bold; font-size:12px;">More Text</span>
          </div>

          <div>
            <span style="font-weight: normal; font-size:12px; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie at urna id faucibus. Proin facilisis lectus ac luctus gravida. Phasellus posuere nec mauris ac hendrerit. Curabitur venenatis et augue id dignissim. Curabitur vitae nunc dignissim, ultricies lorem quis, malesuada odio. In molestie metus nec ligula finibus, sed placerat odio ornare. In eu faucibus elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum efficitur turpis eu iaculis maximus. Proin pharetra congue risus quis rhoncus.
                            </span>
          </div>

        </div>
        <div class="col-12 pr-0 mt-3">
          <button type="button" class="btn btn-primary float-right mr-2">Extract</button>
        </div>

      </div>

Answer 2

<!-- Try This Code -->    
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="card">
  <div class="card-body">
    <div class="container-fluid">
      <div class="row">
        <div class="col-3">
          <img class="img-fluid"  src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" />
        </div>
        <div class="col-9 text-left">
          <span style="font-weight: lighter; font-size:22px;">USERNAME</span>
          <div class="row">
            <span class="col" style="font-weight: lighter; font-size: 12px;">100 <br>POSTS</span>
            <span class="col" style="font-weight: lighter; font-size: 12px;">100 <br>FOLLOWERS</span>
            <span class="col" style="font-weight: lighter; font-size: 12px;">100 <br>FOLLOWING</span>
            <span class="col" style="font-weight: lighter; font-size: 12px;">Phone: <br>100</span>
            <span class="col" style="font-weight: lighter; font-size: 12px;">Email: <br>100</span>
          </div>
          <div class="mb-1 mt-1">
            <span style="font-weight: bold; font-size: 12px;">More Text</span>
          </div>
          <div>
            <span style="font-weight: normal; font-size: 12px; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie at urna id faucibus. Proin facilisis lectus ac luctus gravida. Phasellus posuere nec mauris ac hendrerit. Curabitur venenatis et augue id dignissim. Curabitur vitae nunc dignissim, ultricies lorem quis, malesuada odio. In molestie metus nec ligula finibus, sed placerat odio ornare. In eu faucibus elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum efficitur turpis eu iaculis maximus. Proin pharetra congue risus quis rhoncus.</span>
          </div>
        </div>
        <div class="col-12">
          <button type="button" class="btn btn-primary float-right mr-2">Extract</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

All you need to do is to add breaking point to columns - col-{sm|md|lg|xl}-*.

DOCS: https://getbootstrap.com/docs/4.5/layout/grid/

You don't need to add a container class inside a card. Just row and col.

Here is a code. I removed many elements and I left what was important to this question.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">

<div class="card">
  <div class="card-body">
    
    <div class="row">
      <div class="col-lg-2">
        <img class="w-100 d-block" src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" >
      </div>
      <div class="col-lg-10">
        <div>USERNAME</div>
        <div>100 POSTS</div>
        <div>100 FOLLOWERS</div>
        <div>100 FOLLOWING</div>
        <div>Phone: 100</div>
        <div>Email: 100</div>
      </div>          
      <div class="col-12">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie at urna id faucibus. Proin facilisis lectus ac luctus gravida. Phasellus posuere nec mauris ac hendrerit. Curabitur venenatis et augue id dignissim. Curabitur vitae nunc dignissim, ultricies lorem quis, malesuada odio. In molestie metus nec ligula finibus, sed placerat odio ornare. In eu faucibus elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum efficitur turpis eu iaculis maximus. Proin pharetra congue risus quis rhoncus.
      </div>
      <div class="col-12">
        <button type="button" class="btn btn-primary">Extract</button>
      </div>
    </div>
    
  </div>
</div>

Answer 4

You should:

• remove the div.container.mr-0.pr-0 inside div.card-body
• add .img-fluid to img

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-2">
        <img width="150" heigth="150" src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" class="img-fluid" />
      </div>
      <div class="col-10 text-left pr-0">
        <span style="font-weight: lighter; font-size:22px;">USERNAME</span>
        <div>
          <span class="mr-5" style="font-weight: lighter; font-size: 12px;">100 POSTS</span>
          <span class="m-5" style="font-weight: lighter; font-size: 12px;">100 FOLLOWERS</span>
          <span class="m-5" style="font-weight: lighter; font-size: 12px;">100 FOLLOWING</span>
          <span class="m-5" style="font-weight: lighter; font-size: 12px;">Phone: 100</span>
          <span class="m-5" style="font-weight: lighter; font-size: 12px;">Email: 100</span>
        </div>
        <div class="mb-1 mt-1">
          <span style="font-weight: bold; font-size: 12px;">More Text</span>
        </div>
        <div>
          <span style="font-weight: normal; font-size: 12px; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie at urna id faucibus. Proin facilisis lectus ac luctus gravida. Phasellus posuere nec mauris ac hendrerit. Curabitur venenatis et augue id dignissim. Curabitur vitae nunc dignissim, ultricies lorem quis, malesuada odio. In molestie metus nec ligula finibus, sed placerat odio ornare. In eu faucibus elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum efficitur turpis eu iaculis maximus. Proin pharetra congue risus quis rhoncus.</span>
        </div>
      </div>
      <div class="col-12 pr-0 mt-3">
        <button type="button" class="btn btn-primary float-right mr-2">Extract</button>
      </div>
    </div>
  </div>
</div>