Bootstrap row outline - css

Question

I need to layout a row so that the background of the row expands outside of the row area.
The required layout is in the picture, I want to have the extra white area before the actual text of the row.
When I start a new row and set it's background to white, only the area where the text start is white .

Answer 1

In ur app.css
body{
background-color:white !important;
}
this sets the page background to white

Answer 2

Your HTML structure can look like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<!--
main: semantic distinction between nav, main, section, ...
bg-light: bs utility: override background-color
-->
<main class="bg-light" role="main">
<!--
section: semantic distinction between sections
typically to create components for CMS integration
-->
<section class="some-container-component my-3">
<div class="container">
<div class="row py-3">
<div class="col">
<p>Provide as much detail as possible about your question and what you've already tried. For this question specifically, your current HTML structure can boost your responses and potentially be more beneficial to future SO users.</p>
</div>
</div>
</div>
</section>
<section class="some-fluid-component my-3">
<!-- container-fluid: stretch full-width -->
<div class="container-fluid">
<div class="row py-3">
<!-- bg-white: override background-color -->
<!-- px-0 px-sm-3: fix on small screen alignment -->
<div class="col bg-white px-0 px-sm-3">
<!-- container: align the content -->
<div class="container">
<div class="row py-3">
<div class="col">
<h2 class="text-uppercase">Study history</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id lectus egestas, tincidunt nisl tristique, congue urna. Vestibulum vel iaculis tortor, non finibus eros. Donec nec bibendum mauris. Vivamus maximus velit et vulputate ullamcorper.
Integer sit amet sem vitae nibh auctor blandit vitae sit amet est. Mauris porttitor a nibh eu fringilla. Integer imperdiet rutrum aliquam. Pellentesque vel dictum lectus, vitae interdum tellus. Nullam consequat lorem a venenatis consequat.
Vivamus dictum nunc eget suscipit volutpat. Mauris nec elit et ante efficitur pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
Hope this suits your needs.