html - How to use nested p tags in CSS and Bootstrap boxes? -


this image have:

image 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; } 

jsfiddle

or use bootstraps .pull-right class:

.pull-right {   float: right !important; } 

Comments

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -