How can I break a color box out of a Bootstrap container element?

user_17679875 0
Viewed 157

So I've tried a few of the solutions provided here (and elsewhere on the web) to see if I could break out of the bootstrap container, but I'm not having any luck. To describe it, I have a .fluid-container to put a full-width background behind a normal .container. Where things get tricky is that I need the first column in .container to break out and extend all the way to the left edge of the screen.

What it should look like:

Image

What I've gotten it to do:

Image

Here's my HTML:

<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">&nbsp;</div>
                <div class="col-2 text-white">
                    <p class="avenir text-limegreen text-upper">Contact Us</p>
                    <p>(202) 555-1212</p>
                    <p>email@email.com</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 reiterate -- the goal here is to move the left edge of the lime green box all the way to the left edge of the screen, without moving the right edge out of the grid system or screwing with the rest of the layout.

All CSS is straightforward Bootstrap 5, with the exception of a few things to control color like .bg-limegreen.

bootstrap-5 twitter-bootstrap css
1 Answers

Bootstrap layouts should never have immediately-nested containers. Instead, use standard row/column nesting. Avoid trying to "break out" of anything unless you actually need overlap across columns. That's rarely the case.

Also note that I replaced some of your custom classes with existing Bootstrap classes (text-light and text-uppercase). You'd be wise to get to know what Bootstrap offers very well to avoid building redundant CSS technical debt. See Bootstrap's text utilities.

I'd also encourage you to override Bootstrap's semantically-named classes for color rather than creating new, non-semantic ones. For example, text-limegreen might instead be an override of text-success, even if just for the footer. Have a look at Bootstrap's color utilities.

.bg-darkblue {
  background: darkblue;
}

.bg-limegreen {
  background: limegreen;
}

.text-limegreen {
  color: limegreen;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid bg-darkblue bg-image-footer py-5">
  <div class="row" id="footer-content">
    <div class="col-5 px-0 py-3 bg-limegreen">
      <div class="row justify-content-end">
        <div class="col-8 text-light">
          Form content goes here.
        </div>
      </div>
    </div>

    <div class="col-1"></div>

    <div class="col-6">
      <div class="row justify-content-start text-light pt-2">
        <div class="col-3">
          <p class="avenir text-limegreen text-uppercase">Contact Us</p>
          <p>(202) 555-1212</p>
          <p>email@email.com</p>
          <p>New York, NY</p>
        </div>

        <div class="col-3">
          <p class="avenir text-limegreen text-uppercase">Client Name</p>
          <p>About</p>
          <p>Careers</p>
          <p>Accessibility</p>
        </div>

        <div class="col-3">
          <p class="avenir text-limegreen text-uppercase">Social</p>
        </div>
      </div>
    </div>
  </div>

user_12648040
Related