I want large heading text breadcrumbs, but using heading tags breaks breadcrumbs. Any ideas?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item" id="org_breadcrumb">
      <h2>Org</h2>
    </li>
    <li class="breadcrumb-item" id="course_breadcrumb">
      <a href="#">
        <h3>Course</h3>
      </a>
    </li>
    <li class="breadcrumb-item" id="view_breadcrumb">
      <a href="#">
        <h3>View</h3>
      </a>
    </li>
  </ol>
</nav>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Heading elements are block-level by default. Just fix that for the breadcrumbs structure. Also, remove margin and standardize font size.

.breadcrumb {
  font-size: 2em;
}

.breadcrumb h2,
.breadcrumb h3 {
  display: inline-block;
  margin: 0;
  font-size: 1em;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item" id="org_breadcrumb">
      <h2>Org</h2>
    </li>
    <li class="breadcrumb-item" id="course_breadcrumb">
      <a href="#">
        <h3>Course</h3>
      </a>
    </li>
    <li class="breadcrumb-item" id="view_breadcrumb">
      <a href="#">
        <h3>View</h3>
      </a>
    </li>
  </ol>
</nav>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I would suggest that this is a misuse of heading elements. They should really only relate to sections in your page. You could just use typographic style classes. Here I'm also use <b> tags since it's merely for style and not emphasis.

.breadcrumb {
  font-size: 1.4em;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item" id="org_breadcrumb">
      <span class="lead"><b>Org</b></span>
    </li>
    <li class="breadcrumb-item" id="course_breadcrumb">
      <a href="#">
        <span class="lead"><b>Course</b></span>
      </a>
    </li>
    <li class="breadcrumb-item" id="view_breadcrumb">
      <a href="#">
        <span class="lead"><b>View</b></span>
      </a>
    </li>
  </ol>
</nav>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>