0

I'm trying to quite simply turn a single row of 4 images (sizes are accurate in the snippet) into two columns on tablet and mobile. The issue is that it breaks into a single column with all 4 stacked.

Basically, anything smaller than desktop I want these to be two columns, so the images would scale down to accomodate the 2 column structure.

What am I doing wrong?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="team-icons row">
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
</div>

UPDATE: Tablet seems to work for 2 columns but mobile shows this: enter image description here

Geoff_S
  • 4,917
  • 7
  • 43
  • 133
  • 1
    As you can see, this has been asked and answered many times. Please search before posting. Are you really using 4.0.0? I strongly suggest updating. – isherwood Mar 10 '22 at 15:29

2 Answers2

3

Updated the code to be col-6 (no size modifier needed), and added img-fluid class on the images so they scale with the container.

The snippet works as expected - two columns up until 992px window width.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="team-icons row">
  <div class="col-lg-3 col-6">
    <img src="https://via.placeholder.com/300x70" class="img-fluid">
  </div>
  <div class="col-lg-3 col-6">
    <img src="https://via.placeholder.com/300x70" class="img-fluid">
  </div>
  <div class="col-lg-3 col-6">
    <img src="https://via.placeholder.com/300x70" class="img-fluid">
  </div>
  <div class="col-lg-3 col-6">
    <img src="https://via.placeholder.com/300x70" class="img-fluid">
  </div>
</div>
disinfor
  • 10,865
  • 2
  • 33
  • 44
1

Using Bootstrap's Grid System, you can use col-6 to start at 50% of the screen width on mobile and then col-lg-3 to bump up to 25% on desktop. I have also added the img-fluid class to your tag to make sure the images automatically adjust to your screen.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="team-icons row">
<div class="col-6 col-lg-3">
          <img class="img-fluid" src="https://via.placeholder.com/300x70">
 </div>
<div class="col-6 col-lg-3">
          <img class="img-fluid" src="https://via.placeholder.com/300x70">
 </div>
<div class="col-6 col-lg-3">
         <img class="img-fluid" src="https://via.placeholder.com/300x70">
 </div>
<div class="col-6 col-lg-3">
        <img class="img-fluid" src="https://via.placeholder.com/300x70">
 </div>
</div>
Danielle Hoopes
  • 151
  • 8