CODEWITHSUNDEEP
htmlcssbootstrap-4
RajeshVijayakumar
RajeshVijayakumar

Reputation: 10622

Large image on Left Side and two vertically place image in bootrstrap

enter image description here

I'm unable to produce above Need code.. As I have tried several way not able to place images properly find difficult to place images as expected..

here is the code I have tried... 

        <div class="row">
         <div class="col-lg-9 col-md-9">
           <div class="row adventure-detail-card">

              <!--Grid column-->
              <div class="col-lg-9 col-md-8 gd-cont">
  
                 <img src="../../../assets/adventures/resort/resort1.jpg" class="img-cont"
                    alt="">
              </div>
              <!--Grid column-->
   
              <!--Grid column-->
              <div class="col-lg-3 col-md-4 gd-cont">
                 <img src="../../../assets/adventures/resort/resort2.jpg" class="right-img mb-4 mt-4"
                 alt="">
  
                 <img src="../../../assets/adventures/resort/resort3.jpg" class="right-img"
                 alt="">
  
              </div>
  
         </div>
         <div class="col">

         </div>
     </div>
     </div>
  </div>

Css here:

 .img-cont {
  width: 100%;
  height: 100%;
  background-size: cover;
  flex: 1;
 }

 .right-cont {
    display: flex;
    flex-direction: column;
    flex: 0 0 50%;
  }

  .gd-cont {
    padding: 0px 0px, 0px 0px;
   }
  .right-img {
     width: 190px;
     height: 190px;
     background-size: cover;
     flex: 50%;
   }

Upvotes: 1

Views: 53

Answers (2)

Raky
Raky

Reputation: 892

Please see if this works for you.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      <img src="https://www.w3schools.com/images/picture.jpg" style="width:100%" />
    </div>

    <div class="w-150"></div>
    <div class="col" style="width:100%">
      <img src="https://www.w3schools.com/images/picture.jpg" style="width:50%" />
      <img src="https://www.w3schools.com/images/picture.jpg" style="width:50%" />
    </div>
  </div>
</div>

Upvotes: 0

Rich DeBourke
Rich DeBourke

Reputation: 3423

You can use Bootstrap’s img-fluid class to fit your images, and the configure the containers, rows, and columns to get the layout you need.

<style>
    .bottom-border {
        border-bottom: 1px solid rgba(0,0,0,0.125);
    }
</style>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="container-sm pt-5">
    <div class="row">
        <div class="col-12 col-md-9">
            <div class="row adventure-detail-card">
                <div class="card w-100" style="padding-top: 15px; padding-bottom: 15px;">
                    <div class="container-fluid">
                        <div class="row">
                            <!--Grid column-->
                            <div class="col-12 col-md-8">
                                <img src="https://via.placeholder.com/1200x1160.png" class="img-fluid mb-3 mb-md-0" alt="">
                            </div>
                            <!--Grid column-->
                            <!--Grid column-->
                            <div class="col-12 col-md-4 d-flex flex-column justify-content-between">
                                <img src="https://via.placeholder.com/360x360.png" class="img-fluid mb-3 mb-md-0" alt="">
                                <img src="https://via.placeholder.com/360x360.png" class="img-fluid mb-3 mb-md-0" alt="">
                            </div>
                        </div>
                        <div class="row pt-2">
                            <div class="col">
                                <h1>Sunshine Resort</h1>
                                <p class="text-secondary bottom-border"><strong>Relax and unwind yourself</strong></p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="card" style="padding: 15px;">
                <h1 class="bottom-border">Sold Out!</h1>
                <p>
                    This adventure is currently sold out. But there&rsquo;s a lot more to <span style="color: #ffa500;">explore</span>.
                </p>
            </div>
        </div>
    </div>
</div>

One note — you don’t need to repeat the column size (you had col-lg-9 col-md-9 in one place). The col-md-9 is enough.

Upvotes: 1

Related Questions