CODEWITHSUNDEEP
csstwitter-bootstrapvertical-alignment
user1037763
user1037763

Reputation: 131

Twitter Bootstrap: bottom align text next to image

My page has a logo on the top of the page. It is around 250px high. Next to this I'd like to have three text fields bottom-aligned (with the image). The fields represent abbreviatons to english, french and german for translation purposes.

I'm using the complete bootstrap.css and added two lines (as sugested in post: align text/image/links within a grid but still can not get it working.

.fixedheight { height: 250px; position:relative; }
.bottomaligned {position:absolute; bottom:0; }

one extra css line for ENG and FRA

.bottomaligned2 {position:static; bottom:0; }

The HTML code is:

<body>
<div class="container">
    <div class="row fixedheight">
        <div class="span3 offset4">
            <img src="./images/logo.jpg" alt="Logo">
        </div><!-- /span -->
        <div class="span1 bottomaligned">
            NED
        </div><!-- /span -->
        <div class="span1 bottomaligned2">
            ENG
        </div><!-- /span -->
        <div class="span1 bottomaligned2">
            FRA
        </div><!-- /span -->
    </div><!-- /row -->
</div><!-- /container -->
</body>

Can someone point me in the right direction to get this done?
Thanks,
Gert

Upvotes: 2

Views: 7861

Answers (1)

user1037763
user1037763

Reputation: 131

Finally found the solution after some experimenting and a hint of @DaveP.

The new CSS-code:

.fixedheight { height: 250px; position:relative; }
.bottomaligned {position:relative; top:80%; height:10em; margin-top:-5em}

No need to choose position:absolute as the divs in Twitter Bootstrap take care of that.

The HTML:

<body>
<div class="container">
    <div class="row fixedheight">
        <div class="span3 offset4">
            <img src="./images/logo.jpg" alt="Logo">
        </div><!-- /span -->
        <div class="bottomaligned">
        <div class="span1">
            ENG                          
        </div><!-- /span -->
        <div class="span1">
            NED
        </div><!-- /span -->
        <div class="span1">
            FRA
        </div><!-- /span -->
        </div>
    </div><!-- /row -->
</div><!-- /container -->
</body>

This for now gives me an image starting in the 5th column with text almost bottom-aligned on the right side of the image.

Upvotes: 2

Related Questions