Bootstrap breadcrumb styling with schema data - html

Question

I'm new to bootstrap and trying to style the breadcrumb. I tried this and it gives me the proper inline layout I want.
<div class="BreadCrumbs">
<a href="www.yahoo.com" >Yahoo</a>
<span class="divider" > > </span>
<a href="www.example.com" >Example</a>
<span class="divider" > > </span> Google
</div>
But I want to add schema data and still maintain the proper styling. So I tried this but all the links are in different lines. How do I get them to be inline in one single line?
<div class = "BreadCrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.yahoo.com" itemprop="url">
<span itemprop="title">Yahoo</span>
</a> ›
</div>
<div class = "BreadCrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.example.com" itemprop="url">
<span itemprop="title">Example</span>
</a> ›
</div>
<div class = "BreadCrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.google.com" itemprop="url">
<span itemprop="title">Google</span>
</a>
</div>

Answer 1

From Google: https://developers.google.com/search/docs/data-types/breadcrumbs
Use a list and then style the li elements inline
.breadcrumbs li {
display: inline;
}
<div class="breadcrumbs">
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/books">
<span itemprop="name">Books</span>
<img itemprop="image" src="http://example.com/images/icon-bookicon.png" alt="Books"/></a>
<meta itemprop="position" content="1" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/books/sciencefiction">
<span itemprop="name">Science Fiction</span>
<img itemprop="image" src="http://example.com/images/icon-science-fiction.png" alt="Genre: Science Fiction"/></a>
<meta itemprop="position" content="2" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/books/sciencefiction/ancillaryjustice">
<span itemprop="name">Ancillary Justice</span>
<img itemprop="image" src="http://example.com/images/cover-ancillary-justice.png" alt="Ancillary Justice"/></a>
<meta itemprop="position" content="3" />
</li>
</ol>
</div>