Bootstrap sidebar with background color

Question

I have a simple layout using bootstrap which gives me 2 columns - one LEFT and one RIGHT. Using the 12 column grid format of Bootstrap - the left should be 8 wide and the right column 4 wide like below.

<div class="row">        
    <div class="col-md-8">Left Content</div>    
    <div class="col-md-4">Right Content</div>
</div>

The problem? How can i add a CONTAINER to the row so things are centered BUT give the right column a background color that stretches all the way to the edge of the browser. So if left background color is blue and right background is pink, the colors run full width whilst keeping content within them centered via the container.

BOOTPLY

Beaker

Please post a fiddle or a current screenshot. I dont really understand your question. – Motherly

@Motherly just added reference image to original question – Beaker

Answer 1

Easy.
Working solution: https://jsfiddle.net/qbe2k1he/

/** Custom CSS **/
body {
	background-color: #4E8FD8;
	overflow-x: hidden;
}

.content, .sidebar {
	border: 1px solid white;
	color: white;
	padding: 20px;
	text-transform: uppercase;
	min-height: 500px;
}

.content {
	min-height: 2000px;
}

.sidebar::before {
	content: '';
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: #DB4ECB;
	z-index: -1;
	margin-left: -35px;
}

@media screen and (max-width: 991px) {
	.sidebar::before {
		display: none;
	}
}

/** Bootstrap Grid **/
@-ms-viewport {
  width: device-width;
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}
@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
  table.visible-xs {
    display: table;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-block {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline {
    display: inline !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline {
    display: inline !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block {
    display: block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline {
    display: inline !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
  table.visible-lg {
    display: table;
  }
  tr.visible-lg {
    display: table-row !important;
  }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline {
    display: inline !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}
.visible-print {
  display: none !important;
}
@media print {
  .visible-print {
    display: block !important;
  }
  table.visible-print {
    display: table;
  }
  tr.visible-print {
    display: table-row !important;
  }
  th.visible-print,
  td.visible-print {
    display: table-cell !important;
  }
}
.visible-print-block {
  display: none !important;
}
@media print {
  .visible-print-block {
    display: block !important;
  }
}
.visible-print-inline {
  display: none !important;
}
@media print {
  .visible-print-inline {
    display: inline !important;
  }
}
.visible-print-inline-block {
  display: none !important;
}
@media print {
  .visible-print-inline-block {
    display: inline-block !important;
  }
}
@media print {
  .hidden-print {
    display: none !important;
  }
}
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
}
.col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}
.col-xs-pull-12 {
  right: 100%;
}
.col-xs-pull-11 {
  right: 91.66666667%;
}
.col-xs-pull-10 {
  right: 83.33333333%;
}
.col-xs-pull-9 {
  right: 75%;
}
.col-xs-pull-8 {
  right: 66.66666667%;
}
.col-xs-pull-7 {
  right: 58.33333333%;
}
.col-xs-pull-6 {
  right: 50%;
}
.col-xs-pull-5 {
  right: 41.66666667%;
}
.col-xs-pull-4 {
  right: 33.33333333%;
}
.col-xs-pull-3 {
  right: 25%;
}
.col-xs-pull-2 {
  right: 16.66666667%;
}
.col-xs-pull-1 {
  right: 8.33333333%;
}
.col-xs-pull-0 {
  right: auto;
}
.col-xs-push-12 {
  left: 100%;
}
.col-xs-push-11 {
  left: 91.66666667%;
}
.col-xs-push-10 {
  left: 83.33333333%;
}
.col-xs-push-9 {
  left: 75%;
}
.col-xs-push-8 {
  left: 66.66666667%;
}
.col-xs-push-7 {
  left: 58.33333333%;
}
.col-xs-push-6 {
  left: 50%;
}
.col-xs-push-5 {
  left: 41.66666667%;
}
.col-xs-push-4 {
  left: 33.33333333%;
}
.col-xs-push-3 {
  left: 25%;
}
.col-xs-push-2 {
  left: 16.66666667%;
}
.col-xs-push-1 {
  left: 8.33333333%;
}
.col-xs-push-0 {
  left: auto;
}
.col-xs-offset-12 {
  margin-left: 100%;
}
.col-xs-offset-11 {
  margin-left: 91.66666667%;
}
.col-xs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xs-offset-0 {
  margin-left: 0%;
}
@media (min-width: 768px) {
  .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 992px) {
  .col, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  .col-md-pull-12 {
    right: 100%;
  }
  .col-md-pull-11 {
    right: 91.66666667%;
  }
  .col-md-pull-10 {
    right: 83.33333333%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-8 {
    right: 66.66666667%;
  }
  .col-md-pull-7 {
    right: 58.33333333%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-5 {
    right: 41.66666667%;
  }
  .col-md-pull-4 {
    right: 33.33333333%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-2 {
    right: 16.66666667%;
  }
  .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-push-12 {
    left: 100%;
  }
  .col-md-push-11 {
    left: 91.66666667%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-8 {
    left: 66.66666667%;
  }
  .col-md-push-7 {
    left: 58.33333333%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-5 {
    left: 41.66666667%;
  }
  .col-md-push-4 {
    left: 33.33333333%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-2 {
    left: 16.66666667%;
  }
  .col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-offset-12 {
    margin-left: 100%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 1200px) {
  .col, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-11 {
    width: 91.66666667%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.66666667%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.66666667%;
  }
  .col-lg-1 {
    width: 8.33333333%;
  }
  .col-lg-pull-12 {
    right: 100%;
  }
  .col-lg-pull-11 {
    right: 91.66666667%;
  }
  .col-lg-pull-10 {
    right: 83.33333333%;
  }
  .col-lg-pull-9 {
    right: 75%;
  }
  .col-lg-pull-8 {
    right: 66.66666667%;
  }
  .col-lg-pull-7 {
    right: 58.33333333%;
  }
  .col-lg-pull-6 {
    right: 50%;
  }
  .col-lg-pull-5 {
    right: 41.66666667%;
  }
  .col-lg-pull-4 {
    right: 33.33333333%;
  }
  .col-lg-pull-3 {
    right: 25%;
  }
  .col-lg-pull-2 {
    right: 16.66666667%;
  }
  .col-lg-pull-1 {
    right: 8.33333333%;
  }
  .col-lg-pull-0 {
    right: auto;
  }
  .col-lg-push-12 {
    left: 100%;
  }
  .col-lg-push-11 {
    left: 91.66666667%;
  }
  .col-lg-push-10 {
    left: 83.33333333%;
  }
  .col-lg-push-9 {
    left: 75%;
  }
  .col-lg-push-8 {
    left: 66.66666667%;
  }
  .col-lg-push-7 {
    left: 58.33333333%;
  }
  .col-lg-push-6 {
    left: 50%;
  }
  .col-lg-push-5 {
    left: 41.66666667%;
  }
  .col-lg-push-4 {
    left: 33.33333333%;
  }
  .col-lg-push-3 {
    left: 25%;
  }
  .col-lg-push-2 {
    left: 16.66666667%;
  }
  .col-lg-push-1 {
    left: 8.33333333%;
  }
  .col-lg-push-0 {
    left: auto;
  }
  .col-lg-offset-12 {
    margin-left: 100%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-0 {
    margin-left: 0%;
  }
}
.clearfix,
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
  clear: both;
}
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

	<div id="wrapper">
		<div class="container">
			<div class="col-md-9">
				<div class="content">
					<p>left content</p>
				</div>
			</div>
			<div class="col-md-3">
				<div class="sidebar">
					<p>right content</p>
				</div>
			</div>
		</div>
	</div>

Athena

I'm surprised that no one commented on here, but this is the only solution that works without mocking around too much. Thank you. – Rubetta

Answer 2

You can try this, it works for me, you have to add an additional css class.

<div class="container col-md-12 nopadding">
     <div class="row">    
        <div class="col-md-8" style="background-color:blue;">Left Content</div>    
        <div class="col-md-4" style="background-color:pink;">Right Content</div>
     </div>
</div>

and CSS as below

.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}

Timmie

Almost. I need the contents of col-md-8 to be aligned left within a constrained CONTAINER. Your example has it left aligned to browser window. How can I have the columns in a container but the background color fluid? – Beaker

your requirement is not very clear, If you can post an image as what you want to do, and you can try using this demo – Timmie

Answer 3

I'm surprised I found only a few questions like this one. I had a similar requirement and I managed to solve it using a combination of absolute positioned elements and vw units.

Basically, a wrapper element has the background color of the left side to make it look like it extends to the border of the screen and an absolute positioned div with the same width of the viewport extends as background of the right side.

You can see it working in this codepen

Markup goes like this

<div class="wrapper"> <!-- to style bg without with messing with container margins -->
  <div class="container">
    <div class="row">
      <div class="col-md-8 left"></div>    
      <div class="col-md-4 right">
        <div class="bg"><!-- additional element that will act as background --></div>
      </div>
    </div>
  </div>
</div>

And css:

/* Wrapper has the bg color of left side */
.wrapper,
.left {
  background-color: blue;
}

/* Right container */
.right {
  background-color: pink;
  position: relative; /* Let it have absolute positioned children  */
  z-index: 0;
}

.right .bg {
  background-color: pink;

  /* Following will make our bg element the same size as its parent
   and will put it behind it making it look like a background */
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: -1;

  width: 100%; // fallback for old browsers, bg will be same size as its parent
  width: 100vw; // Have the bg the same width as the screen, making the bg hang outside the screen

}

Note that as bg will hang outside the container, you will need the wrapper div or one of its parent to have its overflow-x property as hidden, otherwise horizontal scrolling bars will appear.

If you have some specific elements inside your right column you can even use css pseudo elements like :before to avoid the declaration of the bg element.

Also, you need to set the appropriate screen breakpoints to style this for smaller screen sizes.

Succession

This is very close to what I'm trying to achieve, however the problem I'm facing with this solution is the additional horizontal scrolling the right column creates. Any ideas on how to fill the right column to the edge where it doesn't create additional width from the container size? – Ashely

Wrapper must have overflow-x as hidden, I've updated the codepen. – Succession

Yep, this was all that was needed – Ashely

Answer 4

<div class="_100"> <div class="container col-md-8 nopadding" style="background-color:blue;">
<div class="col-md-8 right nopadding" style="background-color:blue;border:white 1px solid;margin:5px">Left Content</div>
</div> <div class="container col-md-4 nopadding" style="background-color:pink;"> <div class="col-md-6 nopadding" style="background-color:pink;border:white 1px solid;margin:5px">Right Content</div> </div>
</div>

css:

.nopadding{padding: 0 !important;margin: 0 !important;}
._100 {width:100%;}  
.right{float:right;}

Lacedaemon

unfortunately this has the same problem as the other attempts. the content on the left needs to sit within the boundaries of a standard bootstrap container (1170px) and align left. not float on resize like your example. – Beaker

thanks again for trying but that doesn't work either. the position of the left content should not change on resize. look at this for a better understanding... bootply.com/xFSUgLBNHe – Beaker

Answer 5

you can try this and you can change as you wish, no need additional css.

<div class="container col-md-12">
  <div class="row col-md-6 col-md-offset-3">    
      <div class="col-md-8" style="background-color:blue;">Left Content</div>    
      <div class="col-md-4" style="background-color:pink;">Right Content</div>
  </div>
</div>

Demo here

Timmie

unfortunately this doesn't solve either the background color issue OR the centered container issue. – Beaker

Answer 6

You've got to get pretty specific with your widths, which will get finicky at breakpoint, but this will work as a starting point:

DEMO: http://www.bootply.com/F9PCGnQr6Y

<div class="container bg-grey">Example Container</div>
<div class="col-md-8 bg-info" style="height:100px">
  <div class="row">
    <div class="left-container bg-warning pull-right" style="height:50px">
      <div class="col-xs-12">Left Content - is wider than in-container col-md-8, because it's 8/12ths of full-width</div>
    </div>
  </div>
</div>
<div class="col-md-4 bg-danger" style="height:100px">
  <div class="row">
    <div class="right-container bg-success" style="height:50px">
    <div class="col-xs-12">Right Content</div>
  </div>
</div>
</div>

You'll definitely need to write some custom behaviour at your breakpoint(s), and also may want the internal containers to be col-7 and col-5 since the initial col-8 ends up being very wide within, but those customizations are up to you...

Sibship

Answer 7

Check my solution. I guess you need this one - codepen But you need to include bootstrap 4 instead of bootstrap 3

html, body, .wrapper{
  height:100%;
}

.wrapper{
  padding:10px;
}


.right {
  position: relative;
  z-index: 0;
  padding:0 !important;
}


.wrapper {
  background-color: #00a2ff;
  overflow-x: hidden;
}
.right:before {
  content:"";
  background-color: #f7469e;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  width: 100vw;
  z-index: -1;
}

body {
  background-color: #999;
  color: #fff;
}

.left, .right {
  outline: 1px solid #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container">
  <div class="row">
    <div class="col-8 left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>    
    <div class="col-4 right">Right Content -THIS CONTENT MUST NOT BE FULL WIDTH. MUST ONLY BE WIDTH OF col-md-4. THE BACKGROUND COLOR must be full-width.</div>
  </div>
</div>
</div>

Hustle

Answer 8

Here's the solution. The blocks are adaptive, you can set any height for both blocks, the height is also set automatically depending on the content. codepen

<section>
  <div class="container">
    <div class="block block_left">
      <div class="block__content">
        <p>
             С другой стороны консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.       
             Не следует, однако забывать, что сложившаяся структура организации требуют от нас анализа системы обучения кадров, соответствует насущным потребностям.       
             Товарищи! рамки и место обучения кадров требуют от нас анализа существенных финансовых и административных условий.       
             Товарищи! реализация намеченных плановых заданий играет важную роль в формировании системы обучения кадров, соответствует насущным потребностям.       
             Идейные соображения высшего порядка, а также новая модель организационной деятельности требуют от нас анализа системы обучения кадров, соответствует насущным потребностям.       
             Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей деятельности представляет собой интересный эксперимент проверки позиций, занимаемых участниками в отношении поставленных задач.   
          </p>
          <p>
             Задача организации, в особенности же постоянный количественный рост и сфера нашей активности обеспечивает широкому кругу (специалистов) участие в формировании соответствующий условий активизации.       
             Не следует, однако забывать, что укрепление и развитие структуры позволяет выполнять важные задания по разработке модели развития.       
             Таким образом рамки и место обучения кадров требуют определения и уточнения систем массового участия.       
             Разнообразный и богатый опыт реализация намеченных плановых заданий играет важную роль в формировании дальнейших направлений развития.   
          </p>
          <p>
             Таким образом сложившаяся структура организации в значительной степени обуславливает создание модели развития.       
             Идейные соображения высшего порядка, а также дальнейшее развитие различных форм деятельности в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач.       
             Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании форм развития.       
             Повседневная практика показывает, что дальнейшее развитие различных форм деятельности способствует подготовки и реализации соответствующий условий активизации.       
             Идейные соображения высшего порядка, а также реализация намеченных плановых заданий требуют определения и уточнения систем массового участия.       
             Равным образом реализация намеченных плановых заданий позволяет выполнять важные задания по разработке систем массового участия.   
        </p>
        <p>
           Разнообразный и богатый опыт начало повседневной работы по формированию позиции представляет собой интересный эксперимент проверки новых предложений.       
           Таким образом новая модель организационной деятельности требуют от нас анализа системы обучения кадров, соответствует насущным потребностям.   
        </p>
        <p>
           С другой стороны реализация намеченных плановых заданий позволяет выполнять важные задания по разработке форм развития.       
           Товарищи! начало повседневной работы по формированию позиции требуют определения и уточнения направлений прогрессивного развития.   
        </p>
        <p>
           Таким образом сложившаяся структура организации представляет собой интересный эксперимент проверки новых предложений.       
           Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности требуют определения и уточнения форм развития.
        </p>
      </div>
    </div>
    <div class="block block_right">
      <div class="block__content">
        <p>
             Таким образом сложившаяся структура организации в значительной степени обуславливает создание модели развития.       
             Идейные соображения высшего порядка, а также дальнейшее развитие различных форм деятельности в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач.       
             Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании форм развития.       
             Повседневная практика показывает, что дальнейшее развитие различных форм деятельности способствует подготовки и реализации соответствующий условий активизации.       
             Идейные соображения высшего порядка, а также реализация намеченных плановых заданий требуют определения и уточнения систем массового участия.       
             Равным образом реализация намеченных плановых заданий позволяет выполнять важные задания по разработке систем массового участия.   
        </p>
       </div>
    </div>
  </div>
</section>
<style>
body {
  overflow-x: hidden;
  margin: 0px;
  padding: 0px;
}
.container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  font-size: 0px;
  display: flex;
  flex-wrap: wrap;
}
.block {
  display: inline-block;
  font-size: 16px;
  box-sizing: border-box;
  position: relative;
  color: white;
  vertical-align: top;
}
.block_left {
   width: 70%;
}
.block_right {
  width: 30%;
}
.block::before {
  content: '';
  width: 150vw;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: -1;
  background: #3f80cb;
  min-height: 100vh;
}
.block_right:before {
  background: #d55bc3;
  right: auto;
  left: 0px;
}
.block__content {
  outline: 1px solid #ffffff91;
  margin: 20px;
  padding: 1px 10px;
}
@media screen and (max-width: 700px) {
  .block {
    width: 100%;
  }
  .block::before {
    min-height: 0px;
  }
}
</style>

Uredium

Can you describe how this solves the problem? Providing just a block of code does little to teach the solution. – Compressive