How to float text to the right for Angular UI Bootstrap?

Question

I want to float the countdown timer text for an alert element which will auto-close towards the right side of a Angular UI Bootstrap's alert

When I use something super simplistic like class="pull-right", it looks quite ugly as it loses its alignment with the rest of the message. Any hint or ideas for styling it properly?

Edit # 1

When using rows/columns, it doesn't end up looking right:

<div class="col-md-6">
    <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">
        <div class="row">
            <div class="col-md-2">{{alert.msg}}</div>
            <div class="col-md-2 col-md-offset-1">({{countdownInMilliSeconds/1000}})</div>
        </div>
    </alert>
</div>

Here down how it looks like:

Solution 1

Just add an inline block <span> for your count down timer just after the alert message with class pull-right and it should fit in what you exactelly need:

<div ng-controller="AlertDemoCtrl">
  <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}<span class="pull-right">({{countdownInMilliSeconds/1000}})</span></alert>
  <button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>

Fiddle Demo

Solution 2

Refer this Offset Columns in bootsrap and it solves your issue.

Try this

HTML:

 <div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4 col-md-offset-4">({{countdownInMilliSeconds/1000}})</div>
</div>

instead of

<div style="float: right">({{countdownInMilliSeconds/1000}})</div>

Solution 3

I had started with:

<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)"> {{alert.msg}} </alert>

And added the countdown timer like so:

<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)"> <div>{{alert.msg}}</div> <div style="float: right">({{countdownInMilliSeconds/1000}})</div> </alert>

But I could apparently do without the first div, in order to get the proper alignment:

<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)"> {{alert.msg}} <div style="float: right">({{countdownInMilliSeconds/1000}})</div> </alert>