After trying multiple solutions found online, I'm still struggling to break out of the bootstrap container as needed. The setup involves a .fluid-container for a full-width background behind a regular .container. The challenge arises when the first column in .container needs to extend all the way to the left edge of the screen.
Expected Result:
Current Outcome:
Here is the HTML code:
<div class="container-fluid bg-darkblue bg-image-footer py-5">
<div class="container">
<div class="row" id="footer-content">
<div class="col-5 px-0 py-3 bg-limegreen">
Form content goes here.
</div>
<div class="col-1"> </div>
<div class="col-2 text-white">
<p class="avenir text-limegreen text-upper">Contact Us</p>
<p>(202) 555-1212</p>
<p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16737b777f7a56737b777f7a3875797b">[email protected]</a></p>
<p>New York, NY</p>
</div>
<div class="col-2">
<p class="avenir text-limegreen text-upper">Client Name</p>
<p>About</p>
<p>Careers</p>
<p>Accessibility</p>
</div>
<div class="col-2">
<p class="avenir text-limegreen text-upper">Social</p>
</div>
</div>
</div>
</div>
To clarify, the objective is to align the left edge of the lime green box with the left edge of the screen, without disrupting the grid system or layout.
The CSS mostly follows Bootstrap 5 standards, with a few modifications like .bg-limegreen for color control.