Bootstrap 4 Card Design For Our Services Section

Bootstrap 4 card design for our services section. Beautiful Bootstrap 4 cards design is created by using Bootstrap and font-awesome icons and we have already published a few card designs for your project.

HTML

<section class="our-skills">    
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4">
                <div class="box-shadow">
                    <div class="icon">
                        <i class="fab fa-html5"></i>
                    </div>
                    <h4>html5</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,Ut enim ad minim veniam</p>
                    <a href="#">Read More <i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="box-shadow">
                    <div class="icon">
                        <i class="fab fa-wordpress"></i>
                    </div>
                    <h4>wordpress</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,Ut enim ad minim veniam</p>
                    <a href="#">Read More <i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="box-shadow">
                    <div class="icon">
                        <i class="fab fa-bootstrap"></i>
                    </div>
                    <h4>bootstrap</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,Ut enim ad minim veniam</p>
                    <a href="#">Read More <i class="fas fa-chevron-right"></i></a>
                </div>  
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="box-shadow">
                    <div class="icon">
                        <i class="fab fa-angular"></i>
                    </div>
                    <h4>angular</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,Ut enim ad minim veniam</p>
                    <a href="#">Read More <i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="box-shadow">
                    <div class="icon">
                        <i class="fab fa-js-square"></i>
                    </div>
                    <h4>java script</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,Ut enim ad minim veniam</p>
                    <a href="#">Read More <i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="box-shadow">
                    <div class="icon">
                        <i class="fab fa-css3-alt"></i>
                    </div>
                    <h4>css3</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,Ut enim ad minim veniam</p>
                    <a href="#">Read More <i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>  

CSS

.our-skills {
    padding: 70px 0px 20px;
}
.our-skills .icon {
    padding: 10px 0px;
    background-color: #fff;
    margin: -45px auto 20px;
    border-radius: 10px;
    width: 90px;
}
.our-skills .icon i {
    color: #F44336;
    font-size: 40px;
    margin: 0 auto;
    display: table;
}
.our-skills .box-shadow {
    margin-bottom: 70px;
    background-color: #fff;
    box-shadow: 0px 0px 5px 0px #a5a5a5;
    padding: 15px;
    border-radius: 10px;
    float: right;
}
.our-skills .box-shadow:hover {
    box-shadow: 0px 0px 10px 0px #a5a5a5;
}
.our-skills p {
    font-size: 15px;
    line-height: 23px;
    color:#a09f9f;
    text-align: center;
}
.our-skills a {
    color: #6b6b6b;
    font-size: 16px;
    float: right;
    text-decoration: none;
    transition: 0.5s;
}
.our-skills h4 {
    text-transform: uppercase;
    text-align: center;
    color: #6b6b6b;
    font-weight: 500;
}