bootstrap 5 images are on their own lines despite being able to fit in column

Question

I have several images that are 50x50, fit into a row of 6 columns (ie, 6 images to a row). However, on rendering each image is seemingly on its own individual row, so it looks like the images are stacked on top of another, instead of on a single row.

The code is simple:

<div class="container">
    <div class="row">
        <div class="col-xs-2">
            <img style="height:50px;width:50px" src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg" />
        </div>
        <div class="col-xs-2">
            <img style="height:50px;width:50px" src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg" />
        </div>
        <div class="col-xs-2">
            <img style="height:50px;width:50px" src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg" />
        </div>
        <div class="col-xs-2">
            <img style="height:50px;width:50px" src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg" />
        </div>
        <div class="col-xs-2">
            <img style="height:50px;width:50px" src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg"/>
        </div>
        <div class="col-xs-2">
            <img style="height:50px;width:50px" src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg" />
        </div>
    </div>
</div>

See live example: https://jsfiddle.net/sedf765k/

The problem is confusing because there are 6 col-xs-2 which add up to 12, so they should perfectly be aligned in the row. Why is this happening, and how can I properly line them up in the row?

Additionally, because the images are smaller than the row itself in most cases, is there a way to decrease the empty space between them and float them to the left nicely, so that it looks like each image is next to each other, like people standing in a line?

Answer 1

it is because bootstrap 5 doesn't have 'xs' breakpoint, just use col-2 instead of col-xs-2 and it will work as desired

bootstrap 5 breakpoints: sm, md, lg, xl, xxl

 <div class="container">
        <div class="row">
            <div class="col-2">
                <img style="height:50px;width:50px" src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg" />
            </div>
            <div class="col-2">
                <img style="height:50px;width:50px" src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg" />
            </div>
            <div class="col-2">
                <img style="height:50px;width:50px" src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg" />
            </div>
            <div class="col-2">
                <img style="height:50px;width:50px" src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg" />
            </div>
            <div class="col-2">
                <img style="height:50px;width:50px" src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg"/>
            </div>
            <div class="col-2">
                <img style="height:50px;width:50px" src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg" />
            </div>
        </div>
    </div>

Answer 2

when I try the link you gave I don't think the bootstrap is used, maybe because the link you entered is wrong try entering the css and js links in the html correctly

check documentation

css

<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">

js

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>