Bootstrap Snippet Grid With Text and Image using HTML CSS Bootstrap

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 ---------->
    <!--OUR ADVANTAGE-->
            <section class="section-blog">
        <!-- Start Single Right Post -->
        <div class="right-post">
            <div class="row no-gutters">
                <div class="col-lg-6">
                    <div class="image-part d-flex align-items-center">
                        <img src="https://images.pexels.com/photos/932577/pexels-photo-932577.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                    </div>
                </div>
                <div class="col-lg-6 text-center">
                    <div class="content-part d-flex align-items-center">
                        <div>
                            <h3 class="small-title">Our Advantage</h3>
                            <h2 class="big-title">Our Commitment</h2>
                            <p class="description ss">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus tellus finibus, maximus nisi sed, euismod odio. Duis maximus, enim quis volutpat bibendum, nulla sapien blandit velit, ut feugiat erat felis vitae sapien. Nunc eget justo viverra, posuere ante id, malesuada erat. Phasellus ultricies id augue a consectetur. Nulla ac rhoncus turpis, vitae finibus ligula. Nunc eu mauris tempus, lobortis ante eu, elementum metus. Praesent quis metus placerat, ullamcorper lectus sit amet, pellentesque risus.</p>
                            <a href="#" class="read-more">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- / End Single Right Post -->
        <!-- Start Single Left Post -->
        <div class="left-post">
            <div class="row no-gutters">
                <div class="col-lg-6 order-lg-2">
                    <div class="image-part d-flex align-items-center">
                        <img src="https://doctoritas.com/wp-content/uploads/2015/11/record_img.png" alt="">
                    </div>
                </div>
                <div class="col-lg-6 order-lg-1 text-center">
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
p,a,h2,h3,h4 {
    margin: 0;
    padding: 0;
}
a,
a:hover {
    color: inherit;
    text-decoration: none;
}
.section-blog {
    font-family: "Lato", sans-serif;
}
.section-blog .right-post {
    background-color: #104d50;
}
.section-blog .image-part {
    height: 100%;
}
.section-blog .image-part img {
    width: 100%;
}
.section-blog .content-part {
    padding: 40px 140px;
    height: 100%;
    color: #fff;
}
.section-blog .content-part .small-title {
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Grid With Text and Image"
Bootstrap 4.1.1 Snippet by saikrishna99666

Related: See More

Questions / Comments:

"Grid With Text and Image" Bootstrap 4.1.1 Snippet by saikrishna99666

Related: See More

Questions / Comments:

"Grid With Text and Image"
Bootstrap 4.1.1 Snippet by saikrishna99666