Sorin Dragomir Sorin Dragomir - 4 months ago 7
CSS Question

CSS and Bootstrap boxes help please

This is the image that I have:

image
I am not sure how to do make the text Lieu, Suchy, Prix, CHF 2'250 to be align like in image. And because I'm new to bootstrap too I want to know if what I did is 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>




Answer

Given your markup, the simplest way is to float the span element inside those parent p elements:

.boxes-images .details p span{
  float: right;
}

JSFiddle

Or use bootstraps .pull-right class:

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