"Work Step Html design "
Bootstrap 4.1.1 Snippet by Naveen Mandwariya

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="pset">
<div class="container">
<div class="row listar-feature-items">
<div class="col-xs-12 col-sm-6 col-md-4 listar-feature-item-wrapper listar-feature-with-image listar-height-changed" data-aos="fade-zoom-in" data-aos-group="features" data-line-height="25.2px">
<div class="listar-feature-item listar-feature-has-link">
<a href="#" target="_blank"></a>
<div class="listar-feature-item-inner">
<div class="listar-feature-right-border"></div>
<div class="listar-feature-block-content-wrapper">
<div class="listar-feature-icon-wrapper">
<div class="listar-feature-icon-inner">
<div>
<img alt="Businesses" class="listar-image-icon" src="https://image.flaticon.com/icons/svg/1899/1899582.svg">
</div>
</div>
</div>
<div class="listar-feature-content-wrapper" style="padding-top: 0px;">
<div class="listar-feature-item-title listar-feature-counter-added">
<span><span>01</span>
Businesses </span>
</div>
<div class="listar-feature-item-excerpt">
Start publish listings to show everyone the details and goodies of your establishment. </div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
width: 100%;
min-height: 100vh;
background-color: #f4f4f4;
min-height: calc(100vh - var(--vh-offset, 0px));
overflow-x: hidden;
font-weight: 400;
top: 0;
color: #252525;
font-size: 14px;
line-height: 1.8;
letter-spacing: 0.025em;
}
.header-design {
background-color: #a4508b;
background-image: linear-gradient(326deg, #a4508b 0%, #5f0a87 74%);
height: 120px;
text-align: center;
}
.listar-map-button {
width: 100%;
position: absolute;
display: table;
right: 0;
top: 0;
height: 200px;
line-height: 164px;
white-space: nowrap;
font-size: 0;
}
.listar-map-button {
right: auto;
/***
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: