How to align dynamically created items to the right and one below the other in grid layout?

user_17614890 0
Viewed 62

I have this section which receives data dynamically. I want the stars to appear under the hotel name and to look more compact with less space between them and I am not sure how to achieve this

<div class="row">
   <div class="col">
      Hotel Name:
   </div>
   <div class="col" th:text="*{getName()}"></div>
</div>
<div class="row">
   <div class="col">
      Hotel Category:
   </div>
   <div class="col float-right"
      th:each="star : ${#numbers.sequence(1, accommodationViewModel.category)}">
      <i class='bx bxs-star'></i>
   </div>
</div>

This is what they look like now: enter image description here

I tried adding <div class="col-md-6"> and the result was this enter image description here

Edit 1: enter image description here

bootstrap-4
1 Answers

The solution that worked for my problem is:

.col-1 {
flex: 0;
padding: 0;
margin-left: 2%;
}

enter image description here

user_176148900
Related