How can I highlight a background loading container in 2 colors

Question

I am using Twitter upload to implement my project interface. But I ran into a background problem and still, and I can’t solve it,

"How to divide the background container into 2 colors", I mean that every 6 columns have a different color, and the Fluid-background container will be the same as the columns on the left and right The following is a description of what I want to do

http://i.stack.imgur.com/LN38U.png

So I hope to get some tips.

thank

Answer 1

This can give you a start.

.bg-outer .container , . , 50% , . , , , , background-color 7- .col-xs-1.

div col-xs-1, div background-color, .bg-left, .bg-right. background-color col-xs-1, , Bootstrap .

.bg-outer {
  background: linear-gradient(to right, #6B6FFF 50%, #2C00C8 50%);
}

.bg-left {
  background-color: #913EDD;
}

.bg-right {
  background-color: #3900AB;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="bg-outer">
  <div class="container">
    <div class="row">
      <div class="col-xs-1"><div class="bg-left">col</div></div>
      <div class="col-xs-1"><div class="bg-left">col</div></div>
      <div class="col-xs-1"><div class="bg-left">col</div></div>
      <div class="col-xs-1"><div class="bg-left">col</div></div>
      <div class="col-xs-1"><div class="bg-left">col</div></div>
      <div class="col-xs-1"><div class="bg-left">col</div></div>
      <div class="col-xs-1"><div class="bg-right">col</div></div>
      <div class="col-xs-1"><div class="bg-right">col</div></div>
      <div class="col-xs-1"><div class="bg-right">col</div></div>
      <div class="col-xs-1"><div class="bg-right">col</div></div>
      <div class="col-xs-1"><div class="bg-right">col</div></div>
      <div class="col-xs-1"><div class="bg-right">col</div></div>      
    </div>
  </div>
</div>

Hide result