"Center Focus Feature Section // CSS Grid"
Bootstrap 4.1.1 Snippet by koshikojha

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 ---------->
<section id="features">
<div class="features-inner">
<div class="features-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/phone-1.png"/></div>
<ul class="features-list list-1">
<li class="features-item" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/phone-1.png">
<h3 class="features-item-header">Feature 1</h3>
<p class="features-item-text">I don’t mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail.</p>
</li>
<li class="features-item" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/phone-2.png">
<h3 class="features-item-header">Feature 2</h3>
<p class="features-item-text">I don’t mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail.</p>
</li>
<li class="features-item" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/phone-3.png">
<h3 class="features-item-header">Feature 3</h3>
<p class="features-item-text">I don’t mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail.</p>
</li>
</ul>
<ul class="features-list list-2">
<li class="features-item" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/phone-4.png">
<h3 class="features-item-header">Feature 4</h3>
<p class="features-item-text">I don’t mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail.</p>
</li>
<li class="features-item" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/phone-5.png">
<h3 class="features-item-header">Feature 5</h3>
<p class="features-item-text">I don’t mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail.</p>
</li>
<li class="features-item" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/phone-6.png">
<h3 class="features-item-header">Feature 6</h3>
<p class="features-item-text">I don’t mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail.</p>
</li>
</ul>
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
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body {
font-family: Montserrat, sans-serif;
}
#features {
background: linear-gradient(rgba(0, 0, 255, 0.7), rgba(0, 0, 255, 0.7)), url(https://source.unsplash.com/random);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 3rem 0;
}
.features-inner {
padding: 2rem;
}
@media (min-width: 600px) {
.features-inner {
display: grid;
grid-template-columns: 1fr 1fr;
grid-row-gap: 0;
}
}
@media (min-width: 800px) {
.features-inner {
grid-template-columns: 1fr 2fr;
}
}
@media (min-width: 900px) {
.features-inner {
grid-template-columns: repeat(3, 1fr);
max-width: 1000px;
margin: 0 auto;
}
}
.features-image {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
$('.features-item').on('click', function() {
var $this = $(this);
var imgsrc = $this.attr('data-src');
$('.features-image img').attr('src', imgsrc);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit PRO Angular
Our Team section using bootstrap 4
Team Design Section with Pure CSS Effect
Services section using bootstrap 4

Questions / Comments: