narn narn - 7 months ago 30
HTML Question

Bootstrap, align text to the right with strong tag within it

This might be a silly question, but how can I align piece of my text inside Alert tag in Bootstrap to the right, while keeping a piece within this text in

<strong>
tag?

For now I have this piece of code:

<div class="alert alert-warning" role="alert">
Error number: <strong>{{ error.error_number }}</strong>
Active since: <strong> {{ error.datetime }}</strong></br>
Message: <strong>{{ error.error_message }}</strong>
</div>


Which results in

first screenshot

So far so good, but the "active since and datetime" I want to be aligned to the right. So I tried using
p class="text-right
tag, but this will override
strong
tag, moreover it will put whatever is inside to new line. So this code:

<div class="alert alert-warning" role="alert">
Error number: <strong>{{ error.error_number }}</strong>
<p class="text-right">Active since: <strong> {{ error.datetime }}</strong></p></br>
Message: <strong>{{ error.error_message }}</strong>
</div>


will look like

this

Any ideas?

Answer

With a little bit of help from mohamedHabib I tweaked my code, so I used span instead of p, moreover I used class="pull-right" instead of class="text-right". So the code looks like this:

    <div class="alert alert-warning" role="alert">
        Error number: <strong>{{ error.error_number }}</strong>
        <span class="pull-right">Active since: <strong> {{ error.datetime }}</strong></span></br>
        Message: <strong>{{ error.error_message }}</strong>
    </div>