Bootstrap выравнивает текст и изображение

Question

Я пытаюсь сделать div'ы встроенными в карточную коробку и делаю это тоже. Но текст находится вертикально по центру рядом с. Не удалось сделать текст, чтобы начать вершину.

<div class="card text-left">
       <div class="card-header">
           <ul class="nav nav-tabs card-header-tabs">
                 <li class="nav-item">
                   <a class="nav-link active" href="#">Active</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="#">Link</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link disabled" href="#">Disabled</a>
                                </li>
               </ul>
            </div>
         <div class="card-body">
      <div class="d-inline"><img src="{{$estate->image}}" id="image"></div>
    <div class="d-inline">{{$estate->building_name}}</div>
 </div>
</div>  

Попробуйте использовать d-inline для создания изображения и текста рядом. Но на этот раз текст выравнивается по вертикали.

Answer 1

Вы должны использовать d-inline-flex и align-top

<div class="card-body">
    <div class="d-inline-flex"><img src="{{$estate->image}}" id="image"></div>
    <div class="d-inline-flex align-top">{{$estate->building_name}}</div>
</div>