0

I know there is tons of questions (1,2,3,4,5) about inline elements I couldn't make it.

In Twitter Bootstrap I have an alert row, but the bell icon in right side isn't vertically aligned with the text in left side. Icon appears lower than the text. I tried vertical-align:middle; .row line-height etc. I also need the solution be responsive in mobile screens.

You can see my tryouts in fiddle: http://jsfiddle.net/mavent/DdLED/37/

<div class="alert alert-warning ">Today many things happened <span class="badge badge-info">121</span>
    <div class="pull-right"><a class="btn btn-lg" data-toggle="collapse" data-target="#myTable"><i class="glyphicon glyphicon-bell"></i></a>
    </div>
</div>

Edit: Solution:
I solved issue like the example 8 in fiddle: http://jsfiddle.net/mavent/DdLED/45/

Community
  • 1
  • 1
trante
  • 33,518
  • 47
  • 192
  • 272

1 Answers1

0

Would this work for you? (I know, a bit of a hack)

[ CSS ]

.bring_it_up {
    margin-top: -3px;
}

[ HTML ]

<!-- part 8 -->
<div class="alert alert-warning border2 "><span class="border">Today many things happened Part 8</span><span class="border  badge badge-info">121</span>
 <a class="bring_it_up no_padding pull-right btn btn-lg" data-toggle="collapse" data-target="#myTable"><i class="no_padding glyphicon glyphicon-bell"></i>
</a>
</div>
nocturns2
  • 663
  • 10
  • 17