Clever Geek Handbook

Making a right-aligned glyph in a panel header in Bootstrap

I am creating a panel with bootstrap and I want to add a glyph to the title, but I want it to be right-aligned. I added "text-right" to the tag span

, but it doesn't work.

code:

div class="panel-group" id="the_items">
                         <div class="panel panel-default">
                             <div class="panel-heading" >
                                 <h4>The Item <span class="text-right glyphicon glyphicon-pencil clickable_space" data-toggle="collapse" data-parent="#the_items" data-target="#n_1"></span></h4>

                             </div>

                             <div id="n_1" class="panel-collapse collapse">
                                 <div class="panel-body">
                                     The body
                                 </div>
                             </div>
                         </div>


                 </div>

Photo:

enter image description here

+3


source to share


2 answers


Try pull-right

instead text-right

:

<span class="pull-right glyphicon glyphicon-pencil clickable_space" data-toggle="collapse" data-parent="#the_items" data-target="#n_1">


It actually text-right

works as well, but since the span matches its element, it doesn't really matter if you align the text to the right, left, or center. pull-right

aligns the element to the right of its parent.

+6


source


Demo



<span style="float:right;">...</span>
0


source






More articles:


All Articles