Workflow Chart Template HTML

Workflow chart template HTML created by using Bootstrap 5 and some custom CSS. The responsive Bootstrap flowchart example created to represent the PPT document. Where show the process of workflow from start to end.

HTML

<!-- Chart Template HTML -->
<div class="workflow-chart">
    <div class="container">
        <h2>Workflow Chart</h2>
        <div class="row my-5">
            <div class="col-sm-12">
                <div class="float-start img-icon before-content-none">
                    <i class="bi bi-files"></i>
                </div>
                <div class="float-start">
                    <div class="content">
                        <h3>Document</h3>
                        <p>Our team will evaluate the contract and determine time required to load all the rules</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row my-5">
            <div class="col-sm-12 step-pl-1">
                <div class="float-start img-icon">
                    <i class="bi bi-palette"></i>
                </div>
                <div class="float-start">
                    <div class="content">
                        <h3>Design</h3>
                        <p>Our team will evaluate the contract and determine time required to load all the rules</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row my-5">
            <div class="col-sm-12 step-pl-2">
                <div class="float-start img-icon">
                    <i class="bi bi-file-earmark-code"></i>
                </div>
                <div class="float-start">
                    <div class="content">
                        <h3>Development</h3>
                        <p>Our team will evaluate the contract and determine time required to load all the rules</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row my-5">
            <div class="col-sm-12 step-pl-3">
                <div class="float-start img-icon after-content-none">
                    <i class="bi bi-check-square"></i>
                </div>
                <div class="float-start">
                    <div class="content content-none">
                        <h3>Done</h3>
                        <p>Our team will evaluate the contract and determine time required to load all the rules</p>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>

CSS

.workflow-chart {
    width: 100%;
    float: left;
    background-color: #e9ecef;
}
.workflow-chart .my-5 {
    margin-top: 4rem!important;
    margin-bottom: 4rem!important;
}
.workflow-chart h2 {
    text-transform: uppercase;
    padding: 10px 0px;
    border-bottom: 4px solid #fff;
    margin-top: 20px;
}
.step-pl-1 {
    padding-left: 165px;
}
.step-pl-2 {
    padding-left: 315px;
}
.step-pl-3 {
    padding-left: 465px;
}
.workflow-chart .content {
    max-width: 350px;
    position: relative;
}
.workflow-chart .content h3 {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: normal;
}
.workflow-chart .content p {
    margin: 0px;
}
.workflow-chart .img-icon {
    font-size: 40px;
    margin-right: 20px;
    position: relative;
    background-color: #e9ecef;
}
.workflow-chart .content:after {
    content: "";
    height: 4px;
    width: 154px;
    background-color: #ffffff;
    position: absolute;
    left: -38px;
    bottom: -26px;
}
.workflow-chart .img-icon:before {
    content: "";
    height: 38px;
    width: 4px;
    background-color: #ffffff;
    position: absolute;
    left: 22px;
    top: -42px;
}
.workflow-chart .img-icon:after {
    content: "";
    height: 44px;
    width: 4px;
    background-color: #ffffff;
    position: absolute;
    left: 22px;
    bottom: -44px;
}
.workflow-chart .img-icon.before-content-none:before {
    display: none;
}
.workflow-chart .img-icon.after-content-none:after {
    display: none;
}
.workflow-chart .content.content-none:after {
    display: none;
}

/*== Responsive CSS ==*/
@media (max-width: 992px) {
.container {
    max-width: 100%;
}
}

@media (max-width: 767px) {
.step-pl-1 {
    padding-left: 15px;
}
.step-pl-2 {
    padding-left: 15px;
}
.step-pl-3 {
    padding-left: 15px;
}
.workflow-chart .content:after {
    display: none;
}
.workflow-chart .img-icon:before {
    display: none;
}
.workflow-chart .img-icon:after {
    display: none;
}
.workflow-chart .content {
    max-width: 100%;
}
}