CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
user2811630
user2811630

Reputation: 475

Resizing Problems of Thumbnail Caption

I have a problem with the resizing of thumbnail captions In line three I want "2012" aligned to the left and "1.Preis" aligned to the right. The first thing I don't understand is it seems I only have 10 columns to work with. When i try to use col-md-offset-10 "1.Preis" jumps into the next line.

Here is also a bootply code example. http://bootply.com/82887 As you can see when you try to resize the window (before it goes into tablet size mode) "1.Preis" will leave the thumbnail border. 

<div class="row">   
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="http://lorempixel.com/400/300/">
                <div class="caption">
                    <p>Wohnprojekt Eggenberger Gürtel</p>
                    <p>Graz-Gries</p>
                    <div class="row">
                        <div class="col-md-1"><p>2012</p></div>
                        <div class="col-md-1 col-md-offset-8"><p>1.Preis</p></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="http://lorempixel.com/400/300/">
                <div class="caption">
                    <p>Gutachterverfahren Kalsdorf-Siro</p>
                    <p>Kalsdorf</p>
                    <p>2011</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="http://lorempixel.com/400/300/">
                <div class="caption">
                    <p>Gutachterverfahren Kalsdorf-Siro</p>
                    <p>Kalsdorf</p>
                    <p>2011</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="http://lorempixel.com/400/300/">
                <div class="caption">
                    <p>Gutachterverfahren Kalsdorf-Siro</p>
                    <p>Kalsdorf</p>
                    <p>2011</p>
                </div>
            </div>
        </div>
    </div>

Upvotes: 1

Views: 108

Answers (1)

Moob
Moob

Reputation: 16204

You could use floats to get the appearance you want:

<div class="thumbnail">
    <img src="http://lorempixel.com/400/300/">
    <div class="caption">
        <p>Wohnprojekt Eggenberger Gürtel</p>
        <p>Graz-Gries</p>
        <p style="float:left;">2012</p>
        <p style="text-align:right;">1.Preis</p>
    </div>
</div>

DEMO

Upvotes: 1

Related Questions