Creating a split screen layout using Bootstrap

Question

Creating a split screen layout using Bootstrap

I've been working hard to create a split-screen layout using Bootstrap. After using CSS to achieve it, I realized that it's not responsive for mobile users. Therefore, I'm reworking it with Bootstrap but facing issues with resizing the image and text box. I want the layout to adjust to a single row with two columns for desktop and mobile views.

Edit: Apologies for the sudden change, but I'm now working with Bootstrap version 5.

#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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4d6dbdbc0c7c0c6d5c4f4819a849a86">[email protected]</a>/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>

html css bootstrap-5

Answer 1

Answer №1

If you're utilizing a library, make sure to fully utilize its features like the utility classes and understand its grid system:

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

Since you've switched from bootstrap-4 to ootstrap-5, to eliminate spacing and hide the horizontal scrollbar, replace no-gutters with g-0

Important: Some of your styles do not have a logical purpose, like left/top without position

I have also made improvements to 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d3dedec5c2c5c3d0c1f1849f819f83">[email protected]</a>/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

If you're utilizing a library, make sure to fully utilize its features like the utility classes and understand its grid system:

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

Since you've switched from bootstrap-4 to ootstrap-5, to eliminate spacing and hide the horizontal scrollbar, replace no-gutters with g-0

Important: Some of your styles do not have a logical purpose, like left/top without position

I have also made improvements to 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d3dedec5c2c5c3d0c1f1849f819f83">[email protected]</a>/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 3

Answer №2

To ensure your images are responsive, make sure to use responsive image techniques. Additionally, I removed the gutters from the row to enhance the design.

UPDATE: I have implemented some improvements, such as using height:100vh which adjusts the height exactly to the window size.

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c2e2323383f383e2d3c0c78627a627d">[email protected]</a>/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 4

To ensure your images are responsive, make sure to use responsive image techniques. Additionally, I removed the gutters from the row to enhance the design.

UPDATE: I have implemented some improvements, such as using height:100vh which adjusts the height exactly to the window size.

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c2e2323383f383e2d3c0c78627a627d">[email protected]</a>/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 5

Answer №3

If you want to create a split screen with two columns, you can achieve this by using .row as the parent element and .col-md-6 for the children. The "md" part indicates that the columns will expand to full screen width on medium and smaller screens (you have options like xxl, xl, lg, md, sm, xs). To ensure the columns fit the screen vertically, add min-height: 100vh; to both columns and use a media query for the break point with min-height: 50vh;

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

Here is an example using Bootstrap 4 (compatible with 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>

Answer 6

If you want to create a split screen with two columns, you can achieve this by using .row as the parent element and .col-md-6 for the children. The "md" part indicates that the columns will expand to full screen width on medium and smaller screens (you have options like xxl, xl, lg, md, sm, xs). To ensure the columns fit the screen vertically, add min-height: 100vh; to both columns and use a media query for the break point with min-height: 50vh;

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

Here is an example using Bootstrap 4 (compatible with 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>

Creating a split screen layout using Bootstrap

Answer №1

Answer №2

Answer №3

Similar questions

A guide on showcasing the compilation results of PHP code directly on the web browser

Tips for defining CSS styles for the background color of <td> elements within a sitemap

Utilize the bootstrap grid to align content into 4 columns evenly

What could be causing these cards to not show up correctly?

Is it possible for a form to direct submissions to various pages depending on the value of certain fields

Breaking up and Substituting text within Angular 8's HTML structure

The text following a table is spilling into the table because it is too big to fit within the designated div

What is the best way to resize SVG graphics effectively?

How can I achieve a transparent background for a text field in CSS instead of white?

What Makes Bracket Notation Essential in HTML5?

Guide on retrieving HTML content from a URL and showing it in a div

Node.js web application encounters ECONNRESET and MongoNetworkError issues

Steps to bold a specific word within a div on react native

Is there a way to command Chrome or Firefox to execute JavaScript or load a Bookmarklet directly from the command line?

The system encountered an issue with the CSS code, indicating "Invalid CSS after "...inear-gradient(": expected selector, was "{"

Ways to showcase the contents of a React JavaScript document, or more specifically, a file designed for React interpretation

Unlimited icon carousel crafted with CSS

Ways to adjust the size or customize the appearance of a particular text in an option

Viewing a Google Charts graph upon the loading of a web page

Notify the user with a Jqgrid alert when they attempt to select multiple checkboxes