CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Paula
Paula

Reputation: 507

How can I make a responsive image inside bootstrap's row-col div?

I created a "grid" that displays logos. Some of the logos are .svg others are .png. I'm suing bootstrap's row-col to create this grid. In desktop I'm using row-cols-lg-3 and it works just fine, it has 3 columns. In mobile devices I need it to have 2 columns so I'm using row-cols-sm-2. However, it is showing only one column. The logos need to be responsive, so I want to set their width using % rather than px. When I use px the two columns work just fine. When I use % it doesn't, actually some logos even disappear.

This is what I need to achieve hopefully using width: x% instead of width:ypx

right

The image above shows what I get when I use % (notice that other logos have disappeared): enter image description here

Here's my code:

/* CSS for Desktop View */

.logo-grid img {
  width: 100%;
  padding: 15px 0;
}


/* Responsive CSS */

.logo-grid {
  width: 100%;
  margin: 0 auto;
}

.logo-grid img {
  width: 100%;
}
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12">
          <p></p>
        </div>


        <!-- The Logo Grid -->

        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12 comercios-usan-paygol-img-container">
          <div class="row row-cols-lg-3 row-cols-md-2 row-cols-sm-2 row-cols-xs-2 logo-grid">
            <div class="col"><img src="images/logo-tebex.svg" alt="Logo Tebex"></div>
            <div class="col"><img src="images/logo-payvalida.png" alt="Logo Payvalida"></div>
            <div class="col"><img src="images/logo-pago-efectivo.svg" alt="Logo Pago Efectivo"></div>
            <div class="col"><img src="images/logo-prestashop.svg" alt="Logo Prestashop"></div>
            <div class="col"><img src="images/logo-whmos.svg" alt="Logo WHMOS"></div>
            <div class="col"><img src="images/logo-paysafecard.svg" alt="Logo Paysafe Card"></div>
            <div class="col"><img src="images/logo-fhlgames.png" alt="Logo FHL Games"></div>
            <div class="col"><img src="images/logo-kaybo.png" alt="Logo Kaybo"></div>
            <div class="col"><img src="images/logo-jumpseller.svg" alt="Logo Jumpseller"></div>
            <div class="col"><img src="images/logo-openbucks.png" alt="Logo Openbucks"></div>
            <div class="col"><img src="images/logo-fortumo.png" alt="Logo Fortumo"></div>
            <div class="col"><img src="images/logo-1k.svg" alt="Icono +1K"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 2444

Answers (2)

FluffyKitten
FluffyKitten

Reputation: 14312

Problem:

The problem is that you haven't set a row-cols class for screens smaller than 576px (the sm breakpoint) - you tried using row-cols-xs-2 but there is no xs breakpoint in Bootstrap 4. This means on small screens the default row-cols CSS is getting applied, and it is trying to fit all the logos in one row (because these classes are using flexbox)... the reason they "disappeared" is because they are too small to fit.

How to Solve it:

You just need to add row-cols-2 to your row div so that it will use 2 cols on smaller screens. Also, you don't need to set the row-cols for every breakpoint - the smaller breakpoint will apply until it reaches the larger one:

<div class="row row-cols-lg-3 rows-cols-2 logo-grid">

img-fluid vs width:100%

Also, you don't need your custom CSS to set the width if you want to use Bootstrap's img-fluid class instead. In the example below, I've added img-fluid to have the divs and the other half have width:100% (these are bordered with yellow so you can see which is which). They both act the same so it just depends on whether you want to add classes to every image or replicate the styling in your own CSS.

Also FYI, there is a problem with your CSS - you shouldn't set padding on am image - padding goes inside the element so it doesn't make sense for an image - use margin instead.

Working Example with all of this!

/* CSS for Desktop View */
.logo-grid img {
  margin: 15px 0;
}

/* CSS for Desktop View */

.logo-grid img:not(.img-fluid) {
  width: 100%;
  border: 3px solid yellow;
}


/* Responsive CSS */

.logo-grid {
  width: 100%;
  margin: 0 auto;
}

.logo-grid img {
  width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12">
          <p></p>
        </div>

        <!-- The Logo Grid -->

        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12 comercios-usan-paygol-img-container">
          <div class="row row-cols-lg-3 row-cols-2 logo-grid">
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo Tebex"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo Payvalida"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo Pago Efectivo"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo Prestashop"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo WHMOS"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo Paysafe Card"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid" alt="Logo FHL Games"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid" alt="Logo Kaybo"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid" alt="Logo Jumpseller"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid" alt="Logo Openbucks"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid"  alt="Logo Fortumo"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid"  alt="Icono +1K"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

Is this what you are trying to do or do you want to do something else.??

.logo-grid img {
  width: 100%;
  padding: 15px 0;
}


/* Responsive CSS */

.logo-grid {
  width: 100%;
  margin: 0 auto;
}

.logo-grid img {
  width: 100%;
}
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 col-12">
          <p></p>
        </div>
        <!-- The Logo Grid -->
        <div class=" col-lg-6 col-12 comercios-usan-paygol-img-container">
          <div class="row row-cols-lg-3 row-cols-sm-2 row-cols-1 logo-grid">
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/200" alt="Logo Tebex"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/201" alt="Logo Payvalida"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/202" alt="Logo Pago Efectivo"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/203" alt="Logo Prestashop"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/204" alt="Logo WHMOS"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/205" alt="Logo Paysafe Card"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/206" alt="Logo FHL Games"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/207" alt="Logo Kaybo"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/208" alt="Logo Jumpseller"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/209" alt="Logo Openbucks"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/210" alt="Logo Fortumo"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/211" alt="Icono +1K"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- <script type=" text/javascript ">

If not please let me know in a comment I will do my best to edit the answer to fit your requirements.

Upvotes: 0

Related Questions