How to make a split screen with Bootstrap?-CodePudding

I have been trying very hard to make a split screen using Bootstrap. Here's what it looks like when I managed to do it with CSS:

But I need to make it responsive to mobile users so I'm remaking it with Bootstrap. However the image and textbox don't resize for some reason.

By responsive I mean that it should become single row with 2 columns and vice versa depending wether you're on a desktop or mobile.

Edit: Sorry for this sudden change, but I'm now using Bootstap ver5.

#promotion-textbox {
  top: 115px;
  display: inline-block;
  margin-right: 5vw;
  left: 55%;
  background-color: white;
  object-fit: fill;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

#promotion-title {
  padding: 10px;
  position: static;
  color: #23272a;
  font-size: 3vw;
  overflow: hidden;
  display: inline-block;
}

#promotion-button {
  width: 40vw;
  opacity: 0.8;
  left: 75%;
  transform: translate(-50%, -75%);
  margin-left: auto;
  margin-right: auto;
  top: 620px;
}

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div >
  <!-- First Half -->
  <div >
    <img  src="https://via.placeholder.com/100">
  </div>
  
  <!-- Second Half -->
  <div >
    <div id="promotion-textbox">
      <div id="promotion-title">
        Duck Zone is the best game of all time, I mean just look at these awesome reviews:<br /><br /> TheP0mp21 Says:<br />- Game is pretty good but it needs a your mum duck that is extremely fat and spawns other ducks.
      </div>
    </div>
  </div>
</div>

CodePudding user response：

A few things, if you are using a library then take advantage of it, use its utility classes, and learn its grid system:

Add vh-100 utility class to your row
Add w-100 h-100 in img tag HTML and in CSS add object-fit: cover

Because you've updated your question from bootstrap-4 to ootstrap-5, to remove the spacing in order to hide the horizontal scrollbar you need to replace no-gutters to g-0

Note: You have a lot of styles that doesn't make sense, such left/top without position

I also I've improved your code

#promotion-textbox {
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}

#promotion-title {
  padding: 10px;
  color: #23272a;
  font-size: 3vw;
}

#promotion-button {
  opacity: 0.8;
  border: 2px solid #fff;
  color: #fff;
  padding: 10px 20px;
  background: transparent;
}

img {
  object-fit: cover
}

.col-6:last-child {
  background: darkgray
}

.promotion-column {
  display: flex;
  flex-direction: column;
  padding: 20px;
  align-items: center;
  justify-content: center;
  height: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <!-- First Half -->
  <div >
    <img  src="https://picsum.photos/300/200">
  </div>
  <!-- Second Half -->
  <div >
    <div >
      <div id="promotion-textbox">
        <div id="promotion-title">
          Duck Zone is the best game of all time, I mean just look at these awesome reviews:<br /><br /> TheP0mp21 Says:<br />- Game is pretty good but it needs a your mum duck that is extremely fat and spawns other ducks.
        </div>
      </div>
      <button type="button" id="promotion-button">All Projects</button>
    </div>
  </div>
</div>

CodePudding user response：

You must use responsive image if you want it to be responsive. I also removed gutters from the row.

EDIT: made some improvment, height:100vh is really helpful. Takes exactly the height of the window.

.half {
  border: 1px solid red;
  height: 100vh;
  position: relative;
}

.my-image {
  width: 100%;
  height: 100%;
}

#promotion-textbox {
  top: 115px;
  display: inline-block;
  background-color: white;
  object-fit: fill;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

#promotion-title {
  padding: 10px;
  position: static;
  color: #23272a;
  font-size: 3vw;
  overflow: hidden;
  display: inline-block;
}

#promotion-button {
  width: 40vw;
  opacity: 0.8;
  left: 75%;
  transform: translate(-50%, -75%);
  margin-left: auto;
  margin-right: auto;
  top: 620px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div >
  <!-- First Half -->
  <div >
    <img  src="https://picsum.photos/536/354">
  </div>
  <!-- Second Half -->
  <div >
    <div id="promotion-textbox">
      <div id="promotion-title">
        Duck Zone is the best game of all time, I mean just look at these awesome reviews:<br /><br /> TheP0mp21 Says:<br />- Game is pretty good but it needs a your mum duck that is extremely fat and spawns other ducks.
      </div>
    </div>
  </div>
</div>

<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>

CodePudding user response：

To make a split screen (two columns) use .row as parent and .col-md-6 for children. "md" part means that columns will expand to full screen width on medium and smaller screens( you can choose: xxl, xl, lg, md, sm, xs). TO make it fit the screen vertically add min-height: 100vh; for both columns and media query for the break point with min-height: 50vh;

source: https://getbootstrap.com/docs/4.6/layout/grid/

Bootstrap 4 example (works in bootstrap 5 and 4):

CSS:

.img-col{
  background: url(https://via.placeholder.com/100) center center no-repeat;
  background-size: cover;
  
  
}
.min-h-50{
  min-height:100vh;
}
@media only screen and (max-width: 767px) {
  .min-h-50{
    min-height:50vh;
  }
}

HTML:

<div >
  <div >
      
  </div>
  <div >
    <div >
      <div >
        <div >rff</div>
        <div ><button >xxx</button></div>
      </div>
    </div>
  </div>
</div>