Excelsior Bootstrap

The Canvas LMS already adds the role="main" landmark, so it is not required.
However, when using the Excelsior Bootstrap outside of the Canvas LMS or another place that does not specify the main landmark, adding role="main" to any one of the outer div elements will let screen reader know the significance of the content in the page when compared to the other elements on the webpage.

role="main" is an ARIA Landmark. It is recommended to have only one main landmark per HTML page.

<a class="btn btn-internal" href="#">Link for internal navigation</a>
<a class="btn btn-resource" href="#">Link to resource</a>

To use a button, create an a element with the following classes: btn and btn-internal (for internal navigation) or btn-btn-resource (for resources).

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
  <div class="col">
    <div class="card h-100">
      <img class="card-img-top" src="..." alt="" />
      <div class="card-body">
        <p class="h5 card-title">...</p>
        <p class="card-text">...</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img class="card-img-top" src="..." alt="" />
      <div class="card-body">
        <p class="h5 card-title">...</p>
        <p class="card-text">...</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img class="card-img-top" src="..." alt="" />
      <div class="card-body">
        <p class="h5 card-title">...</p>
        <p class="card-text">...</p>
      </div>
    </div>
  </div>
</div>

To create a group of cards with equal height, follow these steps:

1. Start by creating a div element with the following classes: row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3. This div element is the container to hold a “deck of cards”, and its classes instruct the container to display the cards in a mobile responsive grid.
2. In the grid container, each card is wrapped in a div element with a class of col. The div.col element signifies that each card should be its own column.
3. A card starts with a div element with a class name of card. To make the card to have equal heights with other cards in a row, add the h-100 class.
4. Inside the div.card element:
   • Create a div element with a class of card-header. This div.card-header is optional and should only contains a heading tag.
   • Create a img element with a class of card-img-top. This img.card-img-top is optional.
   • Create a div element with a class of card-body. This div.card-body element contains the card title and body texts.
   • Create a div element with a class of card-footer. This div.card-footer element is optional, and anything content inside of it will always be pushed to the bottom.

<div class="callout callout-guide" role="complementary">
  <h3 class="h5">...</h3>
  <p>...</p>
</div>
<div class="callout callout-quote" role="complementary">
  <h3 class="h5">...</h3>
  <p>...</p>
</div>
<div class="callout callout-skills" role="complementary">
  <h3 class="h5">...</h3>
  <p>...</p>
</div>

To create a callout, create a div element with the classes of callout and callout-[prompt], where [prompt] can be guide (purple), quote (blue), and skills (green). For accessibility, make sure to include role="complementary" attribute.

<div class="tip" role="alert">
  <p><i class="bi bi-info-circle"></i><strong> Tip:</strong> Use the Tip box to provide helpful hints or resources for navigating tools or completing activities in the course.</p>
</div>
<div class="tip tip-reminder" role="alert">
  <p><i class="bi bi-exclamation-triangle"></i><strong> Reminder:</strong> Use the Reminder box to call out reminders to students – this could be to mention timelines, assignment requirements, or other alerts that directly impact successful completion of a course element.</p>
</div>
<div class="tip tip-note" role="alert">
  <p><i class="bi bi-pencil-square"></i><strong> Note:</strong> Use the Note box to call out specific learning materials or lesson details that are key things to consider or be aware of related to the course.</p>
</div>

To create a tip box, create a div element with the class of tip. To change the tip box to a reminder or note box, append the respective class: tip-reminder or tip-note.

<hr class="decorative large bi bi-house-door-fill" role="presentation" />

A horizontal rule is created in HTML using the hr element, which is self-closing. This means the correct way to write it is <hr />, although just <hr> is also widely accepted. However, using <hr> ... </hr> is incorrect because the
element does not contain any content and therefore does not need a closing tag.

To use Excelsior Bootstrap’s horizontal rule appearance, add the decorative class to the hr element. For the icon, add the appropriate icon classes, which is available under the Icons section. To adjust the icon size: add the small or large class.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam quod quia hic architecto ipsam ea eius corporis cupiditate. Esse facere accusamus error delectus ratione nam harum quidem quis assumenda eius. Est laborum voluptatibus sunt, repellendus modi saepe nulla, culpa rerum, asperiores corrupti velit accusamus mollitia unde tempora omnis alias voluptatem deserunt? Dolorum assumenda aliquam, dignissimos pariatur quis quisquam recusandae deserunt!

Vel ipsam ex cum officia numquam nemo nobis tempora, eius itaque quia. Numquam, excepturi quaerat, deserunt vitae eligendi quibusdam dolores sint repellat laborum a necessitatibus accusantium! Facilis ducimus voluptatum excepturi! Sunt corporis nobis veniam fugit harum vero velit dolorum perferendis dolor nisi, distinctio nemo laboriosam eum ipsam qui dolores debitis cumque numquam soluta ut autem quas repellat pariatur?

<img class="float-start me-3" src="..." alt="" />
<img class="float-end ms-3" src="..." alt="" />
<img class="d-block mx-auto mb-3" src="..." alt="" />

• To left-aligned image, add the float-start and me-3 classes to the img tag. The me-3 (or margin end) class adds spacing to the right side of the image, so that text is not displayed against it.
• To right-aligned image, add the float-end and ms-3 classes to the img tag. The ms-3 (or margin start) class adds spacing to the left side of the image, so that text is not displayed against it.
• To center-aligned an image, add the d-block and mx-auto classes to the img tag. The mx-auto (or margin left and right) class adds equal spacing to the left and right side of the image. Center-aligned image is a block level element. If the image is followed by texts, add the mb-3 class to the img tag to create a spacing between the image and text.

<figure class="figure">
    <img src="..." class="figure-img" alt="...">
    <figcaption class="figure-caption">...</figcaption>
</figure>

To add a caption to an image, create a figure tag with the class of figure. Inside the figure tag, create an img tag with the class of figure-img. Right after it, create a figcaption tag with the class of figure-caption.

Figure element is a block-level element, but it can be left- or right-aligned as well. Rather than adding the floating helper classes to the img tag, they are added to the figure tag instead.

<table class="table">
  <thead>
    <tr>
      <th scope="col">Year</th>
      <th scope="col">Title</th>
      <th scope="col">Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1997</td>
      <td>The Philosopher's Stone</td>
      <td>4.45 / 5</td>
    </tr>
    <tr>
      <td>1998</td>
      <td>The Chamber of Secrets</td>
      <td>4.39 / 5</td>
    </tr>
  </tbody>
</table>

Creating the HTML structure for a table involves several key elements and steps.

1. Begin by declaring a table element with a class of table. This serves as the container for all your tabular data. The table element wraps all the other elements that make up the table, including rows, headers, and cells.
2. Inside the table, start with the thead element if there are column headers. This section is specifically for headers to define the columns of the table. Within the thead element, add a tr (table row) element that will contain each header. Then, insert th (table header) elements within the tr. Each th represents a column header and can include attributes to specify scope and other properties to improve accessibility and styling.
3. After defining the headers, use the tbody element to encapsulate the main body of the table. This section contains all the data rows. Inside tbody, add tr elements for each row of data in the table. Each row represents a single set of related data items.
4. Within each tr element in the tbody, include td (table data) elements. Each td corresponds to a cell in the table and should contain individual data items that align with the headers defined in th elements. The number of td elements in each row should match the number of th elements in the headers to maintain a consistent structure.
5. Optionally, add a tfoot section if the table requires a footer for summarizing data or providing additional information at the bottom. Like thead, the tfoot contains tr and th or td elements depending on the design.

To make a table accessible, particularly for screen readers, ensure proper use of the scope attribute in the th elements to specify whether they are headers for rows, columns, or groups of rows or columns. To enhance accessibility further, also consider using the aria roles and properties. To learn more about accessible tables, visit Creating Accessible Tables by webaim.org. To see an example of a tabular table that uses caption element and scopes attributes, visit <caption> : The Table Caption element.

A table is not for laying out HTML page structures; it is for tabular data. However, if circumstances ask for it, be sure to add role="presentation" to the table, which helps a screen reader to not interpret it as a table.

<table class="table">
  <thead>
    <tr>
      <th scope="col">Year</th>
      <th scope="col">Title</th>
      <th scope="col">Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1997</td>
      <td>The Philosopher's Stone</td>
      <td>4.45 / 5</td>
    </tr>
    <tr>
      <td>1998</td>
      <td>The Chamber of Secrets</td>
      <td>4.39 / 5</td>
    </tr>
  </tbody>
</table>

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
    <div class="col">
        ...
    </div>
</div>

To use columns, create a div tag with the following classes row, row-cols-1, row-cols-sm-2, row-cols-md-3, and g-3. These classes play specific roles in structuring these layouts.

• The row class is fundamental, establishing a horizontal group of columns.
• The row-cols-1 class dictates that by default, there should be one column per row.
• The row-cols-sm-2 class adjusts the layout to two columns per row on small devices (like tablets).
• The row-cols-md-3 class changes it to three columns per row on medium devices (like desktops).
• The g-3 class adds spacing (gutters) of 3 units (max total of 5 units) between columns and rows, ensuring the content within the grid is visually separated and easier to read.

Together, these classes providing a fluid experience as screen sizes vary. The maximum number of columns that a row can have is 12. A column element is simply a div tag with the class of col. To make all columns in a row to have the same equal height, add the h-100 to the all of the div.col elements.

<code class="language-javascript">const whoAmI = (isWizard) ? 'A Wizard!' : 'I am a what?';</code>

<pre class="language-javascript line-numbers">
  <code>
    const harry = new Character();

    harry.hasScar = true;
    harry.role = ( isWizard( harry ) ) ? 'A Wizard!' : 'I am a what?';

    function isWizard( character ) {
        return ( character.hasScar ) ? true : false;
    }
  </code>
</pre>

<ul class="list-group list-group-flush">
  <li class="list-group-item"><i class="bi bi-search"></i> <strong>Review:</strong> Lesson | Title<br />By Wednesday at 11:59 PM ET</li>
  <li class="list-group-item"><i class="bi bi-chat-square-dots"></i> <strong>Discuss:</strong> Title<br />By Saturday at 11:59 PM ET</li>
  <li class="list-group-item"><i class="bi bi-pencil"></i> <strong>Complete: </strong>Assignment | Title<br />By Sunday at 11:59 PM ET</li>
  <li class="list-group-item"><i class="bi bi-clipboard-check"></i> <strong>Complete: </strong>Knowledge Check | Title<br />By Sunday at 11:59 PM ET</li>
  <li class="list-group-item"><i class="bi bi-people"></i> <strong>Engage: </strong>Live Session | Title<br />By Sunday at 11:59 PM ET</li>
</ul>

To create a task group, create an ul element with the classes of list-group and list-group-flush. Each task item is a list (li) element with the class of list-group-item. Inside the li element, it starts with an icon and follow by the respective task content and due date.

<div class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <a class="accordion-button" role="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Title 1</a>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show">
      <div class="accordion-body">
        <p>Accordion item body content...</p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Title 2</a>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse">
      <div class="accordion-body">
        <p>Accordion item body content...</p>
      </div>
    </div>
  </div>
</div>

To use an accordion, create a div element with the class accordion to contain all your accordion items. Each accordion item consists of a header (an anchor or a tag with the class accordion-button) and a body (a div with the class accordion-collapse).

Each accordion item’s children elements must have the proper attributes and values defined in order for the accordion as a whole to function. For example, each a.accordion-button element must have the following attributes and values:

• role="button" – telling the screen reader that this element functions like button.
• data-bs-toggle="collapse" – telling Bootstrap that this element is in charge of collapsing the targeted element.
• data-bs-target="#[collapse_content_id]" – the targeted element that is collapsible. Replace [collapse_content_id] with the targeted element’s ID.
• aria-expanded="[true/false]" – telling screen reader the current state of the targeted element: true if it is opened, and false if it is closed.
• aria-controls="[collapse_content_id]" – telling the screen reader which element that is being targeted. Replace [collapse_content_id] with the targeted element’s ID, without the # symbol.

For the accordion body (div.accordion-collapse) element, it must have an unique ID value. To keep an accordion item open on initial page load, add the class show to the div.accordion-collapse element of the item AND add the class collapsed to the corresponding a.accordion-button element.

To create a set of tabs, follow these steps:

1. Start by creating a div element with a class of excelsior-tabs or replace the class to excelsior-lg-tabs for the large tab appearance. This will serve as the container for the tabs.
2. Inside the div.excelsior-tabs or div.excelsior-lg-tabs, create a ul element with classes nav and nav-tabs. This will create the tab navigation.
3. Within the ul element, create li elements with a class of nav-item and a role attribute set to presentation. Inside each li, create an a element with a class of nav-link. This will be each tab’s link.
   • Add an id attribute to each a element to uniquely identify it.
   • Add a data-bs-toggle attribute set to tab and a data-bs-target attribute set to the corresponding tab’s id to enable tab switching.
   • Include an aria-controls attribute set to the corresponding tab’s id and an aria-selected attribute set to true for the active tab and false for the inactive tabs.
   • Append the class active to an a element to set the tab to active.
   • Inside each a element, you can add the tab’s name and an optional icon.
4. After the ul element, create a div element with a class of tab-content. This will contain the tab panes.
5. Inside the div.tab-content, create a div element for each tab pane with classes of tab-pane and fade.
   • Append show and active classes if the current tab pane is to remain open and active.
   • Add an id attribute to each tab pane to uniquely identify it.
   • Add a role attribute set to tabpanel and an aria-labelledby attribute set to the corresponding tab’s id to associate the tab with its content.

Every tab content needs to start with a heading. HTML heading tags are not only important for visual organization but also play a critical role in making content accessible to screen readers. Screen readers rely on heading tags to navigate through the content and provide users with a clear understanding of the structure of the page. When heading tags are used properly, screen readers can convey the hierarchy of the content, allowing users to easily jump to different sections of the page.

<div id="page-content-nav">
  <a id="page-content-mobile-nav-btn" role="button" href="#page-content-links" data-bs-toggle="collapse" aria-expanded="false" aria-controls="page-content-links"><i class="bi bi-list"></i> On this page</a>
  <div id="page-content-links" class="collapse">
    <nav>
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" href="#exampleHeading1">First heading</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#exampleHeading2">Second heading</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#exampleHeading2">Third heading</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#exampleHeading2">Fourth heading</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

Several steps are needed to build this sticky navigation.

1. Create a div element with the ID page-content-nav to serve as the main container for the navigation links. Apply the class sticky-top to ensure the navigation sticks to the top of the parent container as the user scrolls down the page.
2. Inside the container, add an a tag with the ID page-content-mobile-nav-btn. This will act as a toggle button to toggle the visiblity of the navigation links when the screen is small.
   • Set the role attribute to “button” to make it accessible.
   • Use href="#page-content-links" to link the button to the collapsible content, which is containing the navigation links.
   • Include data-bs-toggle="collapse" to activate the collapsing behavior on click.
   • Add aria-expanded="false" and aria-controls="page-content-links" for accessibility, indicating that the linked collapsible container is initially closed.
   • Inside the anchor, add an i tag with classes bi and bi-list to represent the button with an icon. Add a text label like “On this page” for clarity.
3. Below the button, create another div with the ID page-content-links and the class collapse to make it collapsible.
4. Inside this div, insert a nav element to contain the navigation links.
   • Create a ul with the class nav to start the list.
   • Add li elements with the class nav-item for each navigation item inside the ul.nav element.
   • Inside each li, place an a with the class nav-link. Set the href attribute to target the IDs of the content sections (e.g., #exampleHeading1).
   • Mark the first link as active with the active class.
5. Below the div#page-content-nav container, create content sections using using appropriate heading tags with corresponding IDs (e.g., id=”exampleHeading1″ for the first section).
6. Add p tags or any other necessary HTML to fill in the content for each section.

<div id="carouselExample" class="carousel slide">
  <div class="carousel-indicators">
    <a href="#carouselExample" role="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></a>
    <a href="#carouselExample" role="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></a>
    <a href="#carouselExample" role="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></a>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <a href="#carouselExample" class="carousel-control-prev" role="button" data-bs-target="#carouselExample" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"> </span>
  <span class="visually-hidden">Previous</span>
  </a>
  <a href="#carouselExample" class="carousel-control-next" role="button" data-bs-target="#carouselExample" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"> </span>
  <span class="visually-hidden">Next</span>
  </a>
</div>

Creating a carousel involves several steps.

Step 1: Create the Carousel Container

Start with a div element to serve as the main container for the carousel. Assign it a unique ID and add the class names carousel and slide to enable carousel functionality and animations.

Step 2: Set Up Carousel Indicators

• Inside the carousel container, add a div with the class carousel-indicators. This will contain navigation indicators for each slide.
• For each slide in the carousel, add an a element inside the indicators container. These elements should have:
  • href pointing to the unique ID of the carousel container.
  • The role attribute set to “button“.
  • Data attributes data-bs-target to link to the carousel’s unique ID and data-bs-slide-to to indicate the slide index (starting from 0).
  • The aria-label for accessibility, describing each slide.
  • The first indicator should have the class active and aria-current="true" to denote it as the currently active slide.

Step 3: Create the Carousel Inner

• Add another div inside the carousel container with the class carousel-inner. This serves as the wrapper for the slides.
• Within the div.carousel-inner, create multiple div elements with the class carousel-item. The first div.carousel-item should also have the class active to show it first when the carousel loads.
• Inside each div.carousel-item, include an img tag with classes d-block and w-100 to make the image responsive and scale properly. Set the src attribute to the path of your image and provide an appropriate alt text.

Step 4: Add Carousel Captions (Optional)

• Within each div.carousel-item, you can optionally add a div with the class carousel-caption to display text overlaying the image.
• Inside the div.carousel-caption, use appropriate heading tag for the title and p tag for additional text or description.

Step 5: Include Navigation Controls

To allow users to navigate through the slides, add two a elements within the carousel container:

• One with the class carousel-control-prev for navigating to the previous slide, and another with carousel-control-next for navigating to the next slide.
• Each control should have a href attribute pointing to the carousel’s unique ID, a role attribute set as “button“, and a data attribute data-bs-target linking back to the carousel’s unique ID, and data-bs-slide set to either “prev” or “next“.
• Include span elements within each control for visual elements (like arrows) and accessibility features. Use classes such as carousel-control-prev-icon and carousel-control-next-icon, and another span element with visually-hidden class to provide a text description like “Previous” or “Next.”

Verify that all links (hrefs) and IDs match so that the controls, indicators, and carousel container are correctly associated.