Aligning lists horizontally

I am trying to figure out why my breadcrumbs are not all inline like the first?
image
Im using tghe inspect element in ch rome and am having trouble finding out where the drop is cloming from, heres the div

<span class='float-left'>1.</span>
<div class="alert alert-primary border border-primary ml-4 mb-1 pb-0" role="alert">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb justify-content-center m-0">
    <li class="breadcrumb-item"><a href="../pdus/show_pdu.php?id=1"><img src="../../images/pdu_icon.png" alt="Power" width="18" class="jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="PDU"></a></li>
    <li class="breadcrumb-item"><a href="../power_panels/show_power_panel.php?id=1"><img src="../../images/power_panel_icon.png" alt="Power" width="22" class="jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Power Panel"></a></li>
    <li class="breadcrumb-item"><a href="../circuit_breakers/show_circuit_breaker.php?id=1"><img src="../../images/circuit_breaker_icon.png" alt="Power" width="13" class="jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Circuit Breaker"></a> </li>
    <li class="breadcrumb-item"><a href="../receptacles/show_receptacle.php?id=1"><img src="../../images/receptacle_icon.png" alt="Power" width="22" class="jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Receptacle"></a></li>
    <li class="breadcrumb-item"><img src="../../images/power_strip_icon.png" alt="Power" width="21" class="jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Power Strip<br>Outlet: 1"></li>
<li class='breadcrumb-item'><a href='../periphial_storages/show_periphial_storage.php?id=1'><img src='../../images/periphial_storage_icon.png' width='15'></a></li>
    </ol>
  </nav>
</div>

Do you have the corresponding CSS code too, or a live link?

its on my localserver

If I deletethe link to the bootstrap css, i get
image

I got it,
had breadcrumb+.breadcrumb styles

1 Like