d-inline

bootstrap5.css

.d-inline {
  display: inline !important;
}

bootstrap5.css

.d-inline-block {
  display: inline-block !important;
}

bootstrap5.css

.d-inline-flex {
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

bootstrap5.css

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-md-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

html bootstrap5 Sample

高さを指定する：h-25

h-25

h-50

h-75

h-100

  <!-- ★inlineだと高さが変らない？ -->
  <div class="h-25 d-inline-block border">h-25</div>
  <div class="h-50 d-inline-block border">h-50</div>
  <div class="h-75 d-inline-block border">h-75</div>
  <div class="h-100 d-inline-block border">h-100</div>

インライン表示のdiv：d-inline

インライン表示のdiv

  <div class="d-inline bg-primary text-white">インライン表示のdiv</div>
  <div class="d-inline bg-dark text-white">インライン表示のdiv</div>

navbar-brand画像：navbar-brand

  <nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">
      <img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
      Bootstrap
    </a>
  </nav>