How can I make my Bootstrap 4 columns fill the entire row width?

Question

I first created a full width animated border gradient, then I would like to create two large containers next to each other as I did on Adobe XD, but I cannot increase the width of the container.

I have taken some screenshots:

Adobe XD Reference

Containers Problem Pic

Thank you.

Here is the code:

Home.jsx

import React from 'react';
import './Home.css';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className='fullwidth__gradient animated'>
      <div className='row'>
        <div className='col'>
          <div className='leftside__container'>TEST</div>
        </div>
        <div className='col'>
          <div className='rightside__container'>TEST</div>
        </div>
      </div>
    </div>
  );
}

export default App;

Home.css

.fullwidth__gradient {
  height: 100vh;
  width: 100%;
  border: 10px solid transparent;
  text-transform: uppercase;
  font-family: 'Open Sans', 'Source Sans Pro', Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animated {
  background-image: linear-gradient(rgb(26, 25, 29), rgb(26, 25, 29)),
    linear-gradient(
      180deg,
      rgb(12, 154, 236),
      rgb(77, 0, 128) 50%,
      rgb(241, 171, 19)
    );

  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 200%;
  background-position: 0 0, 0 100%;
  background-origin: padding-box, border-box;
  animation: highlight 2s infinite alternate;
}

@keyframes highlight {
  100% {
    background-position: 0 0, 0 0;
  }
}

.leftside__container, .rightside__container {
  height: 85vh;
  width: 100%;
}

.leftside__container {
  background-color: rosybrown;
}

.rightside__container {
  background-color: royalblue;
}

.fullwidth__gradient {
  height: 100vh;
  width: 100%;
  border: 10px solid transparent;
  text-transform: uppercase;
  font-family: 'Open Sans', 'Source Sans Pro', Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animated {
  background-image: linear-gradient(rgb(26, 25, 29), rgb(26, 25, 29)),
    linear-gradient(
      180deg,
      rgb(12, 154, 236),
      rgb(77, 0, 128) 50%,
      rgb(241, 171, 19)
    );

  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 200%;
  background-position: 0 0, 0 100%;
  background-origin: padding-box, border-box;
  animation: highlight 2s infinite alternate;
}

@keyframes highlight {
  100% {
    background-position: 0 0, 0 0;
  }
}

.leftside__container, .rightside__container {
  height: 85vh;
  width: 100%;
}

.leftside__container {
  background-color: rosybrown;
}

.rightside__container {
  background-color: royalblue;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="fullwidth__gradient animated">
  <div class="row">
    <div class="col">
      <div class="leftside__container">TEST</div>
    </div>
    <div class="col">
      <div class="rightside__container">TEST</div>
    </div>
  </div>
</div>

Answer 1

Adding Bootstrap's flex-fill class to your row and a container class on the row parent seems to help. Rows should always sit inside containers since they have negative margins to match the padding in a container.

.fullwidth__gradient {
  height: 100vh;
  width: 100%;
  border: 10px solid transparent;
  text-transform: uppercase;
  font-family: 'Open Sans', 'Source Sans Pro', Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animated {
  background-image: linear-gradient(rgb(26, 25, 29), rgb(26, 25, 29)),
    linear-gradient(
      180deg,
      rgb(12, 154, 236),
      rgb(77, 0, 128) 50%,
      rgb(241, 171, 19)
    );

  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 200%;
  background-position: 0 0, 0 100%;
  background-origin: padding-box, border-box;
  animation: highlight 2s infinite alternate;
}

@keyframes highlight {
  100% {
    background-position: 0 0, 0 0;
  }
}

.leftside__container, .rightside__container {
  height: 85vh;
  width: 100%;
}

.leftside__container {
  background-color: rosybrown;
}

.rightside__container {
  background-color: royalblue;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container-fluid fullwidth__gradient animated">
  <div class="row flex-fill">
    <div class="col">
      <div class="leftside__container">TEST</div>
    </div>
    <div class="col">
      <div class="rightside__container">TEST</div>
    </div>
  </div>
</div>

Answer 2

It is coming from your display:flex; in .fullwidth__gradient. Add w-100 next to your row class and it will make the job. After you can remove the padding of the col with p-0

DEMO:

.fullwidth__gradient {
  height: 100vh;
  width: 100%;
  border: 10px solid transparent;
  text-transform: uppercase;
  font-family: 'Open Sans', 'Source Sans Pro', Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animated {
  background-image: linear-gradient(rgb(26, 25, 29), rgb(26, 25, 29)),
    linear-gradient(
      180deg,
      rgb(12, 154, 236),
      rgb(77, 0, 128) 50%,
      rgb(241, 171, 19)
    );

  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 200%;
  background-position: 0 0, 0 100%;
  background-origin: padding-box, border-box;
  animation: highlight 2s infinite alternate;
}

@keyframes highlight {
  100% {
    background-position: 0 0, 0 0;
  }
}

.leftside__container, .rightside__container {
  height: 85vh;
  width: 100%;
}

.leftside__container {
  background-color: rosybrown;
}

.rightside__container {
  background-color: royalblue;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="fullwidth__gradient animated container-fluid">
  <div class="row w-100">
    <div class="col">
      <div class="leftside__container">TEST</div>
    </div>
    <div class="col">
      <div class="rightside__container">TEST</div>
    </div>
  </div>
</div>