Bootstrap Workflow Steps Cards Design HTML

Bootstrap 4 workflow steps cards design HTML. These cards we can use for our services section where we can showcase services. On the cards, we have used CSS hover effects whereby it’s looking more attractive. These Bootstrap cards may be useful for multi-purpose as you wise.

HTML

<!-- Workflow Section -->
<section id="Workflow">
    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="section-title">
                    <h2 class="text-center">How It Workflow?</h2>
                    <p class="text-center"><i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</i></p>
                </div>
                <hr class="border-white mb-4 mt-4">
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-4">
                <div class="work-process">
                    <i class="fas fa-file-alt"></i>
                    <h3><a href="#">Enter Your Move Info</a></h3>
                    <p>There are many variations of passages of Lorem Ipsum available, The majority have suffered alteration in some form</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="work-process">
                    <i class="fas fa-envelope-open-text"></i>
                    <h3><a href="#">Get Free Quotes</a></h3>
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="work-process">
                    <i class="fas fa-copy"></i>
                    <h3><a href="#">Compare Pricing & Services</a></h3>
                    <p>Many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Workflow Section -->

CSS

/*-- Workflow Section CSS --*/
#Workflow {
    padding: 70px 0px 80px;
    background-color: #607D8B;
    color: #fff;
}
#Workflow .work-process::after {
    content: "";
    position: absolute;
    background: #f1f3f5;
    left: 0px;
    top: 0px;
    width: 0px;
    height: 100%;
    transition: all 0.3s;
    z-index: -1;
}
#Workflow .work-process:hover::after {
    background: rgb(233 248 255 / 22%);
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 10px;
}
#Workflow .work-process {
    background-color: #fff;
    padding: 40px 15px;
    position: relative;
    z-index: 1;
    transition: 0.5s;
    box-shadow: 0px 30px 0px -20px #ffffff;
    margin-bottom: 30px;
    border-bottom: 3px solid #607d8b;
    text-align: center;
}
#Workflow .work-process i {
    margin: 0 auto;
    display: table;
    background-color: #607d8b;
    width: 70px;
    height: 70px;
    border-radius: 8px;
    font-size: 40px;
    text-align: center;
    color: #fff;
    line-height: 70px;
}
#Workflow .work-process h3 {
    margin: 15px 0px;
}
#Workflow .work-process h3 a {
    font-size: 20px;
    color: #607d8b;
}
#Workflow .work-process p {
    color: #8d9ea7;
}
/*-- Workflow Section CSS --*/