Bootstrap Snippet Landing Page section with text over 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 ---------->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Sacramento&display=swap" rel="stylesheet">
<section>
    <div class="container mt-4">
          <div class="row">
               <!--first section-->
                       <div class="col-md-4 col-lg-4 col-xl-4">
                              <h1 style="font-family: 'Sacramento', cursive;font-size: xxx-large;">A Bootstrap Guide</h1>
                              <p style="font-family: 'Montserrat', sans-serif;font-weight: 600;color: #5a5a5a;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                              <div class="jumbotron mt-4 bg-primary">
                                   <img src="https://i.pinimg.com/564x/26/12/73/261273da88b3732c008a871d0284642b--men-photography-portrait-male-photography.jpg" alt="image1" class="img-fluid w-75">
                                   <div class="text-over1"><p>Image 1</p></div>
                              </div>
                              
                       </div>
               <!--second section-->
                       <div class="col-md-4 col-lg-4 col-xl-4">
                            <div class="jumbotron mt-5 bg-warning">
                                 <img src="https://mymodernmet.com/wp/wp-content/uploads/2018/10/Mou-Aysha-portrait-photography-3.jpg" alt="image1" class="img-fluid w-75">
                            </div>
                            <div class="text-over2"><p>Image 2</p></div>
                       </div>
               <!--third section-->
                       <div class="col-md-4 col-lg-4 col-xl-4">
                             <div class="jumbotron bg-primary">
                                  <img src="https://pbs.twimg.com/media/DzbE02-U8AAQnZB.jpg" alt="image1" class="img-fluid w-75">
                             </div>
                            <div class="text-over3"><p>Image 3</p></div>
                       </div>
          </div>
    </div>
</section>
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
.icon-class {
            width: 10px;
            margin-right: 5px;}
       .img-fluid {
            outline: 4px solid white;
            outline-offset: -16px;
            position: absolute;}
        .jumbotron {
            padding: 2rem 2rem;
            height: 500px;}
        .text-over1 {
            position: absolute;
            font-family: 'Sacramento', cursive;
            font-size: 75px;
            bottom: 4pc;
            color: white;
            background-image: linear-gradient(to bottom right, #117a8b61, yellow);
            width: 75%;
            text-align: center;}
         .text-over2 {
            position: absolute;
            font-family: 'Sacramento', cursive;
            font-size: 75px;
            bottom: 162px;
            color: white;
            background-image: linear-gradient(to bottom right, #117a8b61, yellow);
            width: 76%;
            text-align: center;
            left: 45px;}
          .text-over3 {
            position: absolute;
            font-family: 'Sacramento', cursive;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Landing Page section with text over image "
Bootstrap 4.1.1 Snippet by anjalish

Related: See More

Questions / Comments:

"Landing Page section with text over image " Bootstrap 4.1.1 Snippet by anjalish

Related: See More

Questions / Comments:

"Landing Page section with text over image "
Bootstrap 4.1.1 Snippet by anjalish