Having images not shrink on bootstrap 5 table

user_4934626 0
Viewed 208

I am using bootstrap 5.

I have a table and I need to display four images side by side. This seems to work on a large screen: Desktop view

However, on a phone the images are shrunken and no longer visible: Phone view

  1. How can I force the images to remain at least 16px even on phone screens? The table will have a horizontal scroll but that is ok.

  2. Is there a better way to display 4 img tags in one td and force all of them to be on the same line? The only way I found to do it is by putting them in row and col divs.

Code:

<div class="table-responsive">
   <table class="table table-striped table-hover">
      <thead>
         <tr>
            <th scope="col">Username</th>
            <th scope="col">Match Predictions Made</th>
            <th scope="col">Winner</th>
            <th scope="col">Finals</th>
            <th scope="col">Top 4</th>
            <th scope="col">Points</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <th scope="row">Marcipanas</th>
            <td>5/36</td>
            <td><img src="assets/flags/be.svg" class=" float-start flag-img" alt="be"></td>
            <td>
               <div class="row">
                  <div class="col"><img src="assets/flags/it.svg" class="flag-img" alt="it"></div>
                  <div class="col"><img src="assets/flags/cz.svg" class="flag-img" alt="cz"></div>
               </div>
            </td>
            <td>
               <div class="row">
                  <div class="col"><img src="assets/flags/be.svg" class="flag-img" alt="be"></div>
                  <div class="col"><img src="assets/flags/dk.svg" class="flag-img" alt="dk"></div>
                  <div class="col"><img src="assets/flags/fi.svg" class="flag-img" alt="fi"></div>
                  <div class="col"><img src="assets/flags/ru.svg" class="flag-img" alt="ru"></div>
               </div>
            </td>
            <td>0</td>
         </tr>
         <tr>
            <th scope="row">test3</th>
            <td>0/36</td>
            <td><img src="assets/flags/it.svg" class=" float-start flag-img" alt="it"></td>
            <td class="text-muted">No prediction</td>
            <td class="text-muted">No prediction</td>
            <td>0</td>
         </tr>
         <tr>
            <th scope="row">testing1</th>
            <td>1/36</td>
            <td class="text-muted">No prediction</td>
            <td class="text-muted">No prediction</td>
            <td class="text-muted">No prediction</td>
            <td>0</td>
         </tr>
         <tr>
            <th scope="row">test2</th>
            <td>0/36</td>
            <td class="text-muted">No prediction</td>
            <td class="text-muted">No prediction</td>
            <td class="text-muted">No prediction</td>
            <td>0</td>
         </tr>
      </tbody>
   </table>
</div>

EDIT

As John suggested bellow I tried to add nowrap instead of using row-col but that seems to have forced everything into separate lines.

Code:

<td>
   <div class="no-wrap">
    <img src="assets/flags/be.svg" class="flag-img" alt="be">
    <img src="assets/flags/dk.svg" class="flag-img" alt="dk">
    <img src="assets/flags/fi.svg" class="flag-img" alt="fi">
    <img src="assets/flags/ru.svg" class="flag-img" alt="ru">
   </div>
</td>

css:

.flag-img  {
  max-height: 32px;
  min-height: 16px;
  min-width: 16px;
}
.no-wrap  {
  flex-wrap: nowrap !important;
}

Image of results: After

bootstrap-5 css html
1 Answers

So bootstrap defaults .row to have flex-wrap: wrap; You can add this to your CSS for force it to stop wrapping:

.row {
flex-wrap: nowrap !important;
}

Though I'd might consider adding a new class to each row with the images and calling that class instead of just outright .row incase there are areas where you want it to wrap. But this code will work.

As for the shrinking issue, if you want your pictures to never be smaller than 16px you can add this code to your CSS:

.flag-img {
  min-width: 16px;
}
user_111111190
Related