"Bootstrap Section by ramniwas@Sunil "
Bootstrap 4.1.1 Snippet by Sunil1997

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 class="boot-elemant-bg py-md-5 py-4" style="background-image: url(https://via.placeholder.com/1920/09f.png/fff);">
<div class="container position-relative py-md-5 py-0">
<div class="row">
<div class="col-lg-8">
<span class="text-white text-uppercase">Travel </span>
<h2 class="text-white display-3 font-weight-bold">17 travel inventions we need right now </h2>
<p class="f-w-16 mb-4">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
<a href="#" class="btn btn-outline-white btn-lg px-4"> Read More </a>
</div>
</div>
</div>
<div class="elemant-bg-overlay black"></div>
</section>
<section class="boot-elemant-bg py-md-5 py-4">
<div class="container position-relative py-md-5 py-0">
<div class="row">
<div class="col-lg-8">
<span class="text-uppercase">Travel </span>
<h2 class="display-3 font-weight-bold">17 travel inventions we need right now </h2>
<p class="f-16 mb-4">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
<a href="#" class="btn btn-outline-primary btn-lg px-4"> Read More </a>
</div>
</div>
</div>
</section>
<section class="boot-elemant-bg gradient-primary py-md-5 py-4">
<div class="container position-relative py-md-5 py-0">
<div class="row">
<div class="col-lg-8">
<span class="text-white text-uppercase">Travel </span>
<h2 class="text-white display-3 font-weight-bold">17 travel inventions we need right now </h2>
<p class="f-w-16 mb-4">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</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
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Poppins:400,500,600,700');
body,html{
font-family: 'Poppins', sans-serif; font-size: 14px; color: #333;
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
font-family: 'Montserrat', sans-serif;
}
.f-w-16{
color: rgba(255,255,255,0.49);
font-size: 16px;
font-weight: 400;
line-height: 2em;
}
.f-16{
color: rgba(0,0,0,0.49);
font-size: 16px;
font-weight: 400;
line-height: 2em;
}
.gradient-primary{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#007bff+1,0021dd+100 */
background: #007bff; /* Old browsers */
background: -moz-linear-gradient(left, #007bff 1%, #0021dd 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #007bff 1%,#0021dd 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #007bff 1%,#0021dd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007bff', endColorstr='#0021dd',GradientType=1 ); /* IE6-9 */
}
/** btn**/
.btn-outline-white {
border: 1px solid #fff;
color: #fff;
}
.btn-outline-white:hover,.btn-outline-white:focus {
border: 1px solid #fff;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO React
Our Team section using bootstrap 4
Team Design Section with Pure CSS Effect
Services section using bootstrap 4

Questions / Comments: