'Background color going out of the column while using 100%

I am using Bootstrap 5. I have created 2 columns on my page.

This is the output I was getting it.

Now, I have to show an orange color from end to end of my left side column. So I have added h-100 to my orange class or I can add the height:100% to my orange class.

Now I am getting the below output

This is my expected output

Any idea how to solve this?

.orange {
  background-color: orange;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <h2>Heading one</h2>
      <img src="https://dummyimage.com/600x400/000/fff" alt="testing">
    </div>
    <div class="col-lg-6">
      <h2>Heading Two</h2>
      <div class="orange h-100">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>

  </div>
</div>

Solution 1:^[1]

Because of you are using Bootstrap it is better to add .container(your parent class) before changing style of bootstrap classes.

use .container .row(Bootstrap class) not to effect all of the Bootstrap row classes in you project

and for the second solution

.container .col-lg-6

You can get rid of h-100 and apply

.orange {
  background-color: orange;
  height: 100%;
}

.container .row{
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-content: center;
  margin: 0;
  background-color: bisque;
}

.orange {
  background-color: orange;
  height: 100%;
}

.container .row {
  overflow: hidden;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <h2>Heading one</h2>
      <img src="https://dummyimage.com/600x400/000/fff" alt="testing">
    </div>
    <div class="col-lg-6">
      <h2>Heading Two</h2>
      <div class="orange ">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>

  </div>
</div>

Or you can apply

.container .col-lg-6{
  display: flex;
  flex-direction: column;
}

.orange {
  background-color: orange;
  flex-basis: 100%;
}

img {
  display: block;
  max-width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-content: center;
  margin: 0;
  background-color: bisque;
}

.container .col-lg-6 {
  display: flex;
  flex-direction: column;
}

.orange {
  background-color: orange;
  flex-basis: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <h2>Heading one</h2>
      <img src="https://dummyimage.com/600x400/000/fff" alt="testing" />
    </div>
    <div class="col-lg-6">
      <h2>Heading Two</h2>
      <div class="orange">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>
</div>

Or similar to first approach but not using overflow:hidden;

img{
  display: block;
  max-width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}



body{
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-content: center;
  margin:0;
  background-color: bisque;
}

.container .col-lg-6{
  display: flex;
  flex-direction: column;
}

.orange {
  background-color: orange;
  height: 100%;
}

<link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
<div class="container">
      <div class="row">
        <div class="col-lg-6">
          <h2>Heading one</h2>
          <img src="https://dummyimage.com/600x400/000/fff" alt="testing" />
        </div>
        <div class="col-lg-6">
          <h2>Heading Two</h2>
          <div class="orange">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </div>
      </div>
    </div>

Solution 2:^[2]

To avoid messing with overflow and using Bootstrap at its fullest, add d-flex flex-column to the right col. Flex elements have the advantage to match its siblings size. My personal advice is to replace h-100 with a css rule height: 100% and get rid of the unecessary !important annotation.

.orange {
  background-color: orange;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <h2>Heading one</h2>
      <img src="https://dummyimage.com/600x400/000/fff" alt="testing">
    </div>
    <div class="col-lg-6 d-flex flex-column">
      <h2>Heading Two</h2>
      <div class="orange h-full">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>

  </div>
</div>

Solution 3:^[3]

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
  <div class="row">
      <div class="col-12 display-container" style="display: flex; flex-wrap: wrap;">
    <div class="col-lg-6" style="display: flex; flex-direction: column;">
      <h2>Heading one</h2>
      <img src="https://dummyimage.com/600x400/000/fff" alt="testing">
    </div>
    <div class="col-lg-6" style="display: flex;flex-direction: column;">
      <h2>Heading Two</h2>
      <div class="orange h-full" style="height: 100%;background-color: orange;">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
</div>
  </div>
</div>

Solution 4:^[4]

A Bootstrap-only solution would consist of adding the img-fluid class to your image so it uses max-width: 100%;. You have h-100 but there is overflow, so it's best to use d-flex with flex-column on the parent in which you have your custom div, .orange.

.orange {
  background-color: orange;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <h2>Heading one</h2>
      <img src="https://dummyimage.com/600x400/000/fff" alt="testing" class="img-fluid">
    </div>
    <div class="col-lg-6 d-flex flex-column">
      <h2>Heading Two</h2>
      <div class="orange h-100">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	stephen
Solution 3
Solution 4	Kameron

'Background color going out of the column while using 100%

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]