Bootstrap Grid - vertical split within container

Question

I'm having trouble with aligning a container-fluid within bootstrap. I've attached a screenshot of what I'm trying to achieve. The list items on the bottom left should align with the text at the top (which is contained in a container). The newsletter section on the bottom right (red background) should span the entire width from the center to the edge of the screen. The content within the newsletter section should also be aligned with the text at the top.

Here's what I currently have for the code at the bottom:

<div class="container-fluid">
<div class="col-md-12">
    <div id="footer" class="col-md-6">
        <ul>
            <li>About Us</li>
            <li>Consumers</li>
            <li>Sites</li>
            <li>Operators</li>
            <li>Contact Us</li>
        </ul>
    </div>
        <div id="newsletter" class="col-md-6">
            <h4>Subscribe to our newsletter to receive the latest news about Poqeta </h4>
        </div>
</div>

Thanks for any suggestions!

bootstrap-grid

Answer 1

You can wrap your footer in a div that you give a background that is half of the screen width, either using CSS gradients (if your only concern is modern browsers) or with absolutely positioning elements or images. See this answer for more information. Then within this "footer wrapper" you place a container, and within this container you define your columns. For each column you set the background color again. This will "overlay" the background color of the footer within the container.

<div class="footer">
  <div class="container">
    <div class="col-sm-8 left">
      left section, list items
    </div>
    <div class="col-sm-4 newsletter">
      newsletter section
    </div>
  </div>
</div>

.footer {
  background: linear-gradient(90deg, #ffffff 50%, #ff0000 50%);
}

.left {
  background: #ffffff;
}

.newsletter {
  background: #ff0000;
}

See this fiddle for an example, you may want write some CSS for mobile (depending on what breakpoint you use for column wrapping, -sm, -md or -lg)