Search code examples
bootstrap-4

Flex item not aligning its content to the right

I have the following HTML where I would like to right align the contents of the right flex item:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="d-flex">
    <div class="flex-grow-1">
        Line 1
        <br />Line 2
    </div>
    <div class="ml-auto">
        <strong>Line 3</strong><br/>
        Longer line 4
    </div>
</div>

However, the contents are not being right-aligned. ie. The text Line 3 and Longer line 4 should be right-aligned.

What am I missing?

Solution

  • use class="text-right"

    <div class="text-right">
   <strong>Line 3</strong><br/>
    Longer line 4
</div>