CODEWITHSUNDEEP
htmlbootstrap-4
lufizi
lufizi

Reputation: 397

Using class "col" and "col-3" together

I'm using the class "col" to create 7 equal columns and when responsive I would like to have two rows. One with 4 columns and the other with 3. Here's my code

<div class="row mt-20">
        <div class="col col-3">
            <img src="assets/img/cegh.png" width="80%">
        </div>
        <div class="col col-3">
            <img src="assets/img/usp.png" width="80%">
        </div>
        <div class="col col-3">
            <img src="assets/img/butanta.png" width="80%">
        </div>
        <div class="col col-3">
            <img src="assets/img/fapesp.png" width="80%">
        </div>
        <div class="col col-3">
            <img src="assets/img/inct.png" width="80%">
        </div>
        <div class="col col-3">
            <img src="assets/img/analitica.png" width="80%">
        </div>
        <div class="col col-3 mb-5">
            <img src="assets/img/abcam.png" width="80%">
        </div>
    </div>

But when I do this, I got the two rows even when not responsive and not the 7 that I wanted.

Upvotes: 0

Views: 690

Answers (1)

Shidersz
Shidersz

Reputation: 17190

If I understand you correctly, you want to have elements using a size of 3 columns (i.e 4 columns on each row) when screen size is XS, and have equal width columns when the size of the screen is greater or equal to some breakpoint (in this example I will use SM). This can be approached with the conjunction of classes col-3 col-{breakpoint} as is shown on the next example for breakpoint = SM (margin top is added for good looking only):

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="container-fluid">
<div class="row">

  <div class="col-3 col-sm mt-1">
    <img src="https://via.placeholder.com/50" width="80%">
  </div>
  <div class="col-3 col-sm mt-1">
    <img src="https://via.placeholder.com/50" width="80%">
  </div>
  <div class="col-3 col-sm mt-1">
    <img src="https://via.placeholder.com/50" width="80%">
  </div>
  <div class="col-3 col-sm mt-1">
    <img src="https://via.placeholder.com/50" width="80%">
  </div>
  <div class="col-3 col-sm mt-1">
    <img src="https://via.placeholder.com/50" width="80%">
  </div>
  <div class="col-3 col-sm mt-1">
    <img src="https://via.placeholder.com/50" width="80%">
  </div>
  <div class="col-3 col-sm mt-1">
    <img src="https://via.placeholder.com/50" width="80%">
  </div>
  
</div>
</div>

Upvotes: 1

Related Questions