css - Margins between divs not showing -
i have series of pages contain information in columns, can't seem visible border between columns. html , css in basic format follows:
<div class="row central"> <div class="col-md-6"> <div class="row"> <div class="col-md-6"> <img class="img-responsive sub_img" src="images/zz_image.jpg" alt="image"> </div> <div class="col-md-6"> <h2>heading</h2> </div> </div> <p>text.</p> </div> <div class="col-md-6"> <div class="row"> <div class="col-md-6"> <img class="img-responsive sub_img" src="images/zz_image2.jpg" alt="image"> </div> <div class="col-md-6"> <h2>heading2</h2></div></div> <p>text</p> </div> </div>
.central{ background-color: white; margin: 2px; }
the background color body #808080
, results in horizontal line between rows. vertical line between 2 columns, should switch horizontal line between them when screen reduces in size , second column drops below first, nothing can that.
i've tried applying .central
style columns, no longer display side side, isn't it.
give class name (the main one) , give borders color require.
<div class="row central"> <div class="col-md-6 setborder"> <div class="row"> <div class="col-md-6"> <img class="img-responsive sub_img" src="images/zz_image.jpg" alt="image"> </div> <div class="col-md-6"> <h2>heading</h2> </div> </div> <p>text.</p> </div> <div class="col-md-6 setborder"> <div class="row"> <div class="col-md-6"> <img class="img-responsive sub_img" src="images/zz_image2.jpg" alt="image"> </div> <div class="col-md-6"> <h2>heading2</h2></div></div> <p>text</p> </div>
<style> .setborder{ border:solid; border-color:#808080; </style>
Comments
Post a Comment