"divided"
Bootstrap 4.1.1 Snippet by bgsrb

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>
<section class="divided clearfix">
<div class="container">
<div class="row py-5">
<div class="col col-12 col-sm-12 col-md-6 p-lg-5">
<div class="p-5">
<h5 class="h5 text-muted">Bootstrap </h5>
<h1 class="h1 mb-5">Spacing </h1>
<p>Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.</p>
</div>
</div>
<div class="versus">VS</div>
<div class="col col-12 col-sm-12 col-md-6 p-lg-5">
<div class="p-5">
<h5 class="h5 text-muted">Bootstrap</h5>
<h1 class="h1 mb-5">Spacing </h1>
<p>Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.</p>
</div>
</div>
</div>
</div>
</section>
<section class="border-bottom">
<div class="container">
<div class="row text-center py-5">
<div class="col col-12 border-bottom border-sm-bottom border-md-bottom-0 border-md-right col-sm-12 col-md-6 p-5"> <img class="m-auto" width="40px" src="https://semantic-ui.com/images/icons/mobile.png">
<h2 class="h3 mt-3 mb-5 text-muted">Bootstrap Spacing</h2>
<p>Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. </p>
</div>
<div class="col col-12 col-sm-12 col-md-6 p-5"> <img class="m-auto" width="40px" src="https://semantic-ui.com/images/icons/mobile.png">
<h2 class="h3 mt-3 mb-5 text-muted">Bootstrap Spacing</h2>
<p>Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. </p>
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
.versus{
position: absolute;
background: #f7f8f9;
border-radius: 100%;
border: 1px solid #9361D4;
color: #A788D1;
font-size: 1.25em;
height: 78px;
left: 50%;
margin-left: -39px;
padding-top: 22px;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 78px;
z-index: 4;
}
.divided {
position: relative;
background: #f7f8f9;
}
.divided::after {
background: linear-gradient(#f0f7fd 0, #813FD9 50%, #f0f7fd 100%);
width: 1px;
top: 100px;
bottom: 100px;
left: 50%;
height: auto;
right: auto;
position: absolute;
}
@media (max-width: 768px) {
.divided::after {
background: linear-gradient(90deg, #f0f7fd 0, #813FD9 50%, #f0f7fd 100%);
content: "";
position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Kit

Questions / Comments: