html - How to use nested p tags in CSS and Bootstrap boxes? -
this image have:
not sure how make text lieu, suchy, prix, chf 2'250 align in image. , because i'm new bootstrap want know if did correct.
.boxes-images img { width: 100%; } .boxes-images h4 { text-align: center; background-color: #8c1211; color: #ffffff; padding: 10px 0px 10px 0px; font-weight: bold; margin-top: 0px; margin-bottom: 0px; } .boxes-images .details { background-color: #d6d6d6; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; }
<div class="text-page"> <div class="row"> <div class="col-sm-3 boxes-images"> <img src="images/automobile.jpg"> <h4>immobilier</h4> <div class="details"> <p>magnifique et spacieux 4,5 pieces: 1mios de loyer</p> <p>lieu<span>suchy</span> <p> <p>prix<span>chf 2'250</span> </p> </div> </div> <div class="col-sm-3 boxes-images"> <img src="images/automobile.jpg"> <h4>immobilier</h4> <div class="details"> <p>magnifique et spacieux 4,5 pieces: 1mios de loyer</p> <p>lieu<span>suchy</span> <p> <p>prix<span>chf 2'250</span> </p> </div> </div> <div class="col-sm-3 boxes-images"> <img src="images/automobile.jpg"> <h4>immobilier</h4> <div class="details"> <p>magnifique et spacieux 4,5 pieces: 1mios de loyer</p> <p>lieu<span>suchy</span> <p> <p>prix<span>chf 2'250</span> </p> </div> </div> <div class="col-sm-3 boxes-images"> <img src="images/automobile.jpg"> <h4>immobilier</h4> <div class="details"> <p>magnifique et spacieux 4,5 pieces: 1mios de loyer</p> <p>lieu<span>suchy</span> <p> <p>prix<span>chf 2'250</span> </p> </div> </div> <div class="col-sm-3 boxes-images"> <img src="images/automobile.jpg"> <h4>immobilier</h4> <div class="details"> <p>magnifique et spacieux 4,5 pieces: 1mios de loyer</p> <p>lieu<span>suchy</span> <p> <p>prix<span>chf 2'250</span> </p> </div> </div> <div class="col-sm-3 boxes-images"> <img src="images/automobile.jpg"> <h4>immobilier</h4> <div class="details"> <p>magnifique et spacieux 4,5 pieces: 1mios de loyer</p> <p>lieu<span>suchy</span> <p> <p>prix<span>chf 2'250</span> </p> </div> </div> <div class="col-sm-3 boxes-images"> <img src="images/automobile.jpg"> <h4>immobilier</h4> <div class="details"> <p>magnifique et spacieux 4,5 pieces: 1mios de loyer</p> <p>lieu<span>suchy</span> <p> <p>prix<span>chf 2'250</span> </p> </div> </div> <div class="col-sm-3 boxes-images"> <img src="images/automobile.jpg"> <h4>immobilier</h4> <div class="details"> <p>magnifique et spacieux 4,5 pieces: 1mios de loyer</p> <p>lieu<span>suchy</span> <p> <p>prix<span>chf 2'250</span> </p> </div> </div> </div> </div>
given markup, simplest way float span
element inside parent p
elements:
.boxes-images .details p span{ float: right; }
or use bootstraps .pull-right
class:
.pull-right { float: right !important; }
Comments
Post a Comment