How to align images in one row?

Question

I am trying to align images in one row but it doesn't seem to be working. I have tried flex but the last logo is still on another row.

<section id="clients" class="clients clients">
<div class="container">

    <div class="row content">

        <div class="col-3">
            <img src="logo1" class="img-fluid srl" alt="">
        </div>

        <div class="col-3">
            <img src="logo2" class="img-fluid" alt="">
        </div>

        <div class="col-3">
            <img src="logo3" class="img-fluid" alt="">
        </div>

        <div class="col-3">
            <img src="logo4" class="img-fluid" alt="">
        </div>

        <div class="col-2">
            <img src="logo5" class="img-fluid" alt="">
        </div>
    </div>

</div>

 .clients {
background: #f3f9fd;
padding: 0px 0px;
text-align: center;
}

.clients .col-lg-2 {
display: flex;
align-items: center;
justify-content: center;
}

.clients img {
width: 70%;
-webkit-filter: grayscale(100);
filter: grayscale(100);
transition: all 0.4s ease-in-out;
display: inline-block;
padding: 10px 0;
}

.clients img:hover {
-webkit-filter: none;
filter: none;
transform: scale(1.1);
}

As you can see the last logo is in its own row but I want it to be on the same row as the rest of them but i cant seem to do this?

Thanks

Answer 1

Your idea was flawed in using col-3
bootstrap grid system is divided into 12 spaces
col-1 uses 1 space
col-2 uses 2 spaces
an so on

Your images all have col-3 and there is 5 of them which is taking 15 "spaces" which is more than 12 thats why last element is moved down.

When you check bootstrap documentation for grid system you will find that you don't have to speciy how many spaces col needs to take.

You can use .col which will take as many width as it need for all elements to fill whole parent element

.clients {
    background: #f3f9fd;
    padding: 0px 0px;
    text-align: center;
}

.clients .col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.clients img {
    width: 70%;
    /* just for presentation*/ min-height: 50px;
    /* just for presentation*/ background-color: red;
    -webkit-filter: grayscale(100);
    filter: grayscale(100);
    transition: all 0.4s ease-in-out;
    display: inline-block;
    padding: 10px 0;
}

.clients img:hover {
    -webkit-filter: none;
    filter: none;
    transform: scale(1.1);
}

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<section id="clients" class="clients clients">
    <div class="container">
        <div class="row content">
            <div class="col">
                <img src="logo1" class="img-fluid srl" alt="">
            </div>

            <div class="col">
                <img src="logo2" class="img-fluid" alt="">
            </div>

            <div class="col">
                <img src="logo3" class="img-fluid" alt="">
            </div>

            <div class="col">
                <img src="logo4" class="img-fluid" alt="">
            </div>

            <div class="col">
                <img src="logo5" class="img-fluid" alt="">
            </div>
        </div>
    </div>
</section>