← Snippets - Styles

Split Container

One half goes out of the container, and the other half doesn’t….or there are two different color backgrounds, and both backgrounds go outside the container, but the text is in it…blah blah blah, basically any kind of insanity in your design with stuff exiting the container randomly can be covered by this.

Keep in mind you do need to have some sort of content in both sides of the split, or it won’t work. You can cheat it by putting a space character in one of the areas, if you need one of them to be blank.

This works for Bootstrap 3-5 with no editing needed.

How To

Styles

mixins.scss

Place the provided code at the bottom of the file, if it’s not already there.

// Split container mixin
@mixin split-container($left-width, $right-width, $breakpoint-up, $max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  @extend .d-#{$breakpoint-up}-flex;
  @extend .flex-#{$breakpoint-up}-row;
  @extend .justify-content-#{$breakpoint-up}-end;
  @extend .align-items-#{$breakpoint-up}-stretch;
  @extend .align-content-#{$breakpoint-up}-center;

  .container-left, .container-right {
    &-inner { @include make-col-ready(); }
    &.image {
      .container-left-inner, .container-right-inner {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
      }
    }
  }


  @include media-breakpoint-up($breakpoint-up) {
    .container-left {
      order: 1;
      &.image {
        width: calc(100vw * #{$left-width});
      }
    }
    .container-right {
      order: 2;
      &.image {
        width: calc(100vw * #{$right-width});
      }
    }
    .container-left-inner {
      margin-right: 0;
    }
    .container-right-inner {
      margin-left: 0;
    }
  }

  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      .container-left-inner {
        width: $container-max-width * $left-width;
        margin-left: calc((100vw - #{$container-max-width}) / 2);
      }
      .container-right-inner {
        width: $container-max-width * $right-width;
        margin-right: calc((100vw - #{$container-max-width}) / 2);
      }
    }
  }

  @if $breakpoint-up == sm {
    @include media-breakpoint-down(xs) {
      .container-left-inner, .container-right-inner {
        width: auto;
        margin: 0;
      }
    }
  } @else if $breakpoint-up == md {
    @include media-breakpoint-down(sm) {
      .container-left-inner, .container-right-inner {
        width: auto;
        margin: 0;
      }
    }
  } @else if $breakpoint-up == lg {
    @include media-breakpoint-down(md) {
      .container-left-inner, .container-right-inner {
        width: auto;
        margin: 0;
      }
    }
  } @else if $breakpoint-up == xl {
    @include media-breakpoint-down(lg) {
      .container-left-inner, .container-right-inner {
        width: auto;
        margin: 0;
      }
    }
  }
}

helpers.scss

This is the setup for how the mixin works. Include it wherever the code needs to go, for example the helpers.scss or subpage.scss. The example shows a split container where the left side is 60%, the right side is 40%, and both sides will stack after the “lg”/large media query. NOTE that the numbers are percentages, not bootstrap columns, so they need to add up to 1 (or 100%), not 12.

.banner {
  .split-container {
    @include split-container(.6, .4, lg);
  }
}

HTML

This is an example setup of the HTML to work with this mixin. Image classes can be added/removed from the left/right outer classes as neeeded. You must have both .container-left and .container-right, and their respective -inner sections, but those do not necessarily need actual content within them. You do need at least an   in an area if you want it to be empty, though.

<div class="banner relative remove-banner">
  <div class="split-container">
    <div class="container-left image">
      <div class="container-left-inner h-100">
        <div class="banner-image h-100">
          content area with image can go here
        </div>
      </div>
    </div>
    <div class="container-right bg-dark text-white pb-4 pb-lg-0">
      <div class="container-right-inner">
        content area with a bunch of text can go here
      </div>
    </div>
  </div>
</div>

Example Sites

Tags: scss, sass, bs5, bs4, bs3, container, grid