Option 2. Split the container into two sections
To achieve this, you can create a separate class for each half of the container. However, it's important to ensure that both halves maintain the same height.
.blue { background: blue; color: white; }
.red { background: red; color: white; }
.container-left-half,
.container-right-half {
padding-right: 15px;
padding-left: 15px;
}
.container-left-half {
margin-right: 0;
margin-left: auto;
}
.container-right-half {
margin-right: auto;
margin-left: 0;
}
@media (min-width: 768px) {
.container-left-half,
.container-right-half {
width: 375px;
}
}
@media (min-width: 992px) {
.container-left-half,
.container-right-half {
width: 485px;
}
}
@media (min-width: 1200px) {
.container-left-half,
.container-right-half {
width: 585px;
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 blue">
<div class="container-left-half">
<div class="row">
<div class="col-xs-12">This is the left half of the container. It's blue! This is the left half of the container. It's blue! This is the left half of the container. It's blue! This is the left half of the container. It's blue! This is the left half of the container. It's blue!</div>
</div>
</div>
</div>
<div class="col-xs-6 red">
<div class="container-right-half">
<div class="row">
<div class="col-xs-12">This is the right half of the container. It's red! This is the right half of the container. It's red! This is the right half of the container. It's red! This is the right half of the container. It's red! This is the right half of the container. It's red!</div>
</div>
</div>
</div>
</div>
</div>
Option 1. Using Linear-gradient & Matryoshka concept
1) Utilize the linear-gradient() function to create a two-colored background.
2) Bootstrap provides rows and two types of containers:
Use .container for a responsive fixed-width container.
Use .container-fluid for a full-width container that spans the entire viewport width.
Rows should be placed within a .container (fixed width) or .container-fluid (full width) for proper alignment and padding.
3) You can implement a Matryoshka structure:
.container-fluid > .row with linear-gradient > .container > .row with content
Matryoshka refers to a set of vividly painted hollow wooden dolls of different sizes that are designed to nest inside one another.
4) The class col-xs-6 is equivalent to
col-xs-6 col-sm-6 col-md-6 col-lg-6
.
.two-colors {
background: linear-gradient(to right, blue 50%, red 50%);
color: white;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row two-colors">
<div class="container">
<div class="row">
<div class="col-xs-6">This is the left half of the container. It's blue! This is the left half of the container. It's blue! This is the left half of the container. It's blue! This is the left half of the container. It's blue! This is the left half of the container. It's blue!</div>
<div class="col-xs-6">This is the right half of the container. It's red! This is the right half of the container. It's red! This is the right half of the container. It's red! This is the right half of the container. It's red! This is the right half of the container. It's red!</div>
</div>
</div>
</div>
</div>