Copy and Paste the code or Download and Use

You can use this Gray Our Clients Component web Component by simply copy and past the HTML code to the HTML File and copy Past the CSS to the CSS file. You also Download the Project Folder on the Gray Our Clients Component by Clicking the Download button at the bottom

1, Add the CSS Files at the Header of the Document

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />

2, Add the HTML Files to the Document

<section class="card-main">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="wrapper">
                            <ol>
                                <li>
                                    <div class="content">
                                        <img src="assets/images/7.png">
                                        <h3>Company Name</h3>
                                    </div>
                                </li>
                                <li>
                                    <div class="content">
                                        <img src="assets/images/3.png">
                                        <h3>Company Name</h3>
                                    </div>
                                </li>
                                <li>
                                    <div class="content">
                                        <img src="assets/images/4.png">
                                        <h3>Company Name</h3>
                                    </div>
                                </li>
                                <li>
                                    <div class="content">
                                        <img src="assets/images/5.png">
                                        <h3>Company Name</h3>
                                    </div>
                                </li>
                                <li>
                                    <div class="content">
                                        <img src="assets/images/6.png">
                                        <h3>Company Name</h3>
                                    </div>
                                </li>
                                <li>
                                    <div class="content">
                                        <img src="assets/images/8.png">
                                        <h3>Company Name</h3>
                                    </div>
                                </li>
                                <li>
                                    <div class="content">
                                        <img src="assets/images/9.png">
                                        <h3>Company Name</h3>
                                    </div>
                                </li>
                                <li>
                                    <div class="content">
                                        <img src="assets/images/12.png">
                                        <h3>Company Name</h3>
                                    </div>
                                </li>
                                <li>
                                    <div class="content">
                                        <img src="assets/images/11.png">
                                        <h3>Company Name</h3>
                                    </div>
                                </li>
                                <li>
                                    <div class="content">
                                        <img src="assets/images/10.png">
                                        <h3>Company Name</h3>
                                    </div>
                                </li>
                                <li>
                                    <div class="content">
                                        <img src="assets/images/3.png">
                                        <h3>Company Name</h3>
                                    </div>
                                </li>
                                <li>
                                    <div class="content">
                                        <img src="assets/images/4.png">
                                        <h3>Company Name</h3>
                                    </div>
                                </li>
                                <li>
                                    <div class="content">
                                        <img src="assets/images/7.png">
                                        <h3>Company Name</h3>
                                    </div>
                                </li>
                                <li>
                                    <div class="content">
                                        <img src="assets/images/2.png">
                                        <h3>Company Name</h3>
                                    </div>
                                </li>
                                <li>
                                    <div class="content">
                                        <img src="assets/images/1.png">
                                        <h3>Company Name</h3>
                                    </div>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
 </section>

3, Add the CSS Files at the Header of the Document



@media (min-width:1200px){
    .card-main{
        height:100vh;
        display:flex;
        align-items: center;
        justify-content: center;
    }
}

.wrapper{
    display:block;
    width:100%;
    margin:1.25rem 0;

}

.wrapper > ol{
    width:100%;
    display:flex;
    flex-wrap: wrap;
    flex:1 1 100%;
    width:100%;
}

.wrapper > ol li{
    display:block;
    width:20%;
    position: relative;
}

.wrapper > ol li > .content{
    display: block;
    text-align: center;
    background:#fff;
    border-radius:.3125rem;
    border: 1px solid #cbcbcb;
    padding:.625rem;
    margin:.625rem;
    position: relative;
    padding: 20px;
}

.wrapper > ol li img{
    width:200px;
    filter: grayscale(100%);
	max-width: 100%;
}

.wrapper > ol li h3{
    font-size:1.25rem;
    display:block;
    padding:0 0 .3125rem 0;
    font-size: .9rem;
}

@media screen and (max-width:575.98px){
    .wrapper > ol li{
        width:100%;
    }
}

@media (min-width: 576px) and (max-width: 767.98px){
    .wrapper>ol li {
        width:50%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px){
    .wrapper>ol li {
        width: 33.3%;
    }
}