How to put two div and image side by side-Twitter bootstrap

Michael
May 27, 2020
229 views
3 votes
3 Answers

I have two divs (with different background color) and an image. I want to make the two divs would be the background of the section and put an image on top of these two divs but on the left hand side. I want to make the image to take 50% of the size on any device. So that both image and background color of both divs perfectly matches.

Here is the code I am dealing with.

.upper {
  background-color: #fff8f0;
  width: 100%;
  height: 288px;
  position: relative;
}

.lower {
  background-color: #ffe9cd;
  width: 100%;
  height: 412px;
  position: relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="Bs">
  <div class="row">
    <div class="col-lg-6">
      <div class="upper">
      </div>
      <div class="lower">
      </div>

    </div>
    <div class="col-lg-6">
      <img src="picture/biblestudy.jpg" alt="Bible study people">

    </div>

  </div>

</section>

This is the image and background color

THANK YOU!!!

Answers

Check out the implementation at JS Fiddle

Hope it helps.

.bg {
  position: relative;
  height: 360px;
}
  
.bg-upper {
  background-color: #fff8f0;
  width: 100%;
  height: 70%;
}

.bg-lower {
  background-color: #ffe9cd;
  width: 100%;
  height: 30%;
}

.bg-image-container {
  position: absolute;
  right: 0;
  top: 0;
  max-width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-image {
  max-width: 100%;
  max-height: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>How to put two div and image side by side</title>
  <meta name="description" content="https://stackoverflow.com/questions/62041148/how-to-put-two-div-and-image-side-by-side">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  <section class="container-lg">
    <div class="bg">
      <div class="bg-upper"></div>
      <div class="bg-lower"></div>
      <div class="bg-image-container">
        <img class="bg-image" src="https://teleiosresearch.com/wp-content/uploads/2019/01/BibleStudy-1.jpg" alt="Bible study people">
      </div>
    </div>
  </section>
  </body>
</html>

.upper {
  background-color: #fff8f0;
  height: 80vh;
}

.lower {
  background-color: #ffe9cd;
  height: 20vh;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="Bs">
  <div class="row">
    <div class="col-6">
     <div class="row">
      <div class="col-12 upper">
      </div>
      <div class="col-12 lower">
      </div>
    </div>
    </div>
    <div class="col-6">
	<div class="row">
      <div class="col-12 upper">
      </div>
      <div class="col-12 lower">
      <img src="picture/biblestudy.jpg" alt="Bible study people">
      </div>
	  </div>
    </div>
  </div>
</section>

The code you have provided showing image is on the top right.

The code provided below contain image with width 50% always on different resolution and top left

.Bs {
  background-color: red;
}

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<section class="Bs">
  <div class="row">
    <div class="col-12">
      <div class="upper">
        <img src="https://images.unsplash.com/photo-1590541576391-dfc42314a7ae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60" width="50%" alt="">
      </div>

    </div>
    <div class="col-6">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus illum repudiandae laborum magni
      exercitationem fuga, quas reprehenderit repellat. Eius tenetur dolores quos quisquam cumque ipsum
      atque debitis laudantium minima dolore.

    </div>
    <div class="col-6">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus illum repudiandae laborum magni
      exercitationem fuga, quas reprehenderit repellat. Eius tenetur dolores quos quisquam cumque ipsum
      atque debitis laudantium minima dolore.
    </div>
  </div>

</section>

Please signup or login to give your own answer.

Click here to cancel reply.