How to make a split screen with Bootstrap? - html

Question

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/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
<!-- First Half -->
<div class="col-md-6">
<img class="img" src="https://via.placeholder.com/100">
</div>
<!-- Second Half -->
<div class="col-md-6">
<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>

Answer 1

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/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row g-0 vh-100">
<!-- First Half -->
<div class="col-md-6">
<img class="img w-100 h-100" src="https://picsum.photos/300/200">
</div>
<!-- Second Half -->
<div class="col-md-6">
<div class="promotion-column">
<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>

Answer 2

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/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="row no-gutters">
<!-- First Half -->
<div class="half col-sm-6">
<img class="img my-image" src="https://picsum.photos/536/354">
</div>
<!-- Second Half -->
<div class="half col-sm-6">
<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>

Answer 3

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 class="row">
<div class="col-md-6 img-col min-h-50">
</div>
<div class="col-md-6 bg-dark min-h-50">
<div class="row justify-content-center h-100">
<div class="col-10 align-self-center">
<div class="bg-white p-3">rff</div>
<div class="mt-3 text-center"><button class="btn btn-primary">xxx</button></div>
</div>
</div>
</div>
</div>