Icons or Icons in legend area using Twitter Bootstrap

Question

I have a simple form with a legend using Twitter Bootstrap. I want to be able to put things, at this point in time icons, beside my legend verbiage that are aligned right.

I have tried a few tags like div and it pushes the icon to the bottom of the legend line. I would like this to align with the legend text.

A short example.

    <legend>Contact Categories<div align="right"><i class="icon-comment"></i></div></legend>

This will cause the icon to drop all the way against the legend line. The legend itself stays as it should.

Thanks in advance.

Answer 1

I'm not sure why you would use align="right". The problem is that your <div> is a block, it can't stay on the same line as the text.

Demo (jsfiddle)

You have to either make it float (right or left) :

<legend>Contact Categories<div class="pull-right"><i class="icon-comment"></i></div></legend>

Or make it inline

<legend>Contact Categories<div id="myBlock" class="inline-block"><i class="icon-comment"></i></div></legend>

.inline-block { display: inline-block; }
#myBlock { text-align: right; width: 30%; }