title: shading alternate rows with bootstrap
body: <p>I am trying to shade alternate rows in a table .</p>
  
  <p>The following code </p>
  
  <pre class="lang-css prettyprint-override"><code>dt:nth-child(4n+1) ,dt:nth-child(4n+1) +dd{
    background-color:silver;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="col-sm-2 tabularData"&gt;
    &lt;dl class="dl-horizontal"&gt;
     &lt;dt&gt;Booking&lt;/dt&gt;
     &lt;dd class="ng-binding"&gt;&lt;/dd&gt; 
     &lt;dt&gt;Shipper&lt;/dt&gt;
     &lt;dd class="ng-binding"&gt;&lt;/dd&gt;
     &lt;dt&gt;Consignee&lt;/dt&gt;
     &lt;dd class="ng-binding"&gt;&lt;/dd&gt;
     &lt;dt&gt;VVD&lt;/dt&gt;
     &lt;dd class="ng-binding"&gt;&lt;/dd&gt;
    &lt;/dl&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But the output currently looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/ZwObh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZwObh.png" alt="enter image description here"></a></p>