CODEWITHSUNDEEP
csshtmltwitter-bootstrapvertical-alignment
Tiago Oliveira
Tiago Oliveira

Reputation: 43

Twitter bootstrap structure with divs

I would like to know if its possible to move that bar a bit under, the bar is wrapped with a <p> tag.

<div class="span9 well">
<div class="row-fluid">
    <div class="row-fluid">
        <div class="span2">
            <img src="dummy_image.jpg" class="img-polaroid">
        </div>
        <div class="span7">
            <h2>Title</h2>      
            <p>Texttttttttttttttttt.</p>
            <p >
                <a href="#"><span class="label label-info">Genre</span></a>
                <span class="label label-warning">
                <i class="icon-star"></i>
                ...<!-- stars -->
                </span>     
                <a href="#"><span class="label label-success">Yes</span></a> / <a href="#"><span class="label label-important">No</span></a>
            </p>
        </div>
    </div>
</div>

screen shot of the actual block i wanna change:

enter image description here

Upvotes: 3

Views: 120

Answers (2)

Sowmya
Sowmya

Reputation: 26979

Use position:absolute

.row-fluid{position:relative; width:450px; background:red; overflow:auto}
.span2{display:inline; float:left}
.span7{display:inline; }
.row-fluid > p{position:absolute; bottom:0; left:170px}​

DEMO

Upvotes: 1

Wojciech Dłubacz
Wojciech Dłubacz

Reputation: 219

You can always name your <p> tag like so:

<p class="bar">
    <a href="#"><span class="label label-info">Genre</span></a>
    <span class="label label-warning">
    <i class="icon-star"></i>
    ...<!-- stars -->
    </span>     
    <a href="#"><span class="label label-success">Yes</span></a> / <a href="#"><span class="label label-important">No</span></a>
</p>

then use .bar {margin-top: 20px;} in your css code, it's not bad behaviour

Upvotes: 2

Related Questions