0

I want to make my html look like below.

enter image description here

  <p>Use .flex-row-reverse to right-align the direction:</p>
  <div class="d-inline-flex flex-row-reverse bg-secondary">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>

But output is coming as

enter image description here

Arup
  • 155
  • 11
  • This [answer](https://stackoverflow.com/a/27459204/4679429) might give you some explanation on your issue. – Zeikman Feb 20 '23 at 12:30

1 Answers1

1

You need to set the width, otherwise the output will be the same as if you would set width: auto;.

See the snippet below.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<p>Use .flex-row-reverse to right-align the direction:</p>
<div class="d-inline-flex flex-row-reverse w-100">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>
Rok Benko
  • 14,265
  • 2
  • 24
  • 49