List | UW College of Engineering

Lists organize information into sections that are easy to scan and follow.

Basic unordered list Basic ordered list Flush list List with icons Two-column list with icons

Basic unordered list

Use unordered lists when the order of the items does not matter.

List item 1
List item 2
List item 3

Code


<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

Basic ordered list

Use ordered lists when the items need to be in a sepcific order.

List item 1
List item 2
List item 3

Code


<ul class="list-group list-group-flush">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

Flush list

Use flush lists when you want a clean and streamlined design without bullet points.

Item 1
Item 2
Item 3

Live example

Code


<div class="list-group">
  <div class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h2 class="h3 mt-0 mb-1">Heading 1</h2>
      <p class="font-weight-bold">Secondary info</p>
    </div>
    <p class="mt-0 mb-1">List item body text.</p>
  </div>
  <div class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h2 class="h3 mt-0 mb-1">Heading 2</h2>
      <p class="font-weight-bold">Secondary info</p>
    </div>
    <p class="mt-0 mb-1">List item body text.</p>
  </div>

  <div class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h2 class="h3 mt-0 mb-1">Heading 3</h2>
      <p class="font-weight-bold">Secondary info</p>
    </div>
    <p class="mt-0 mb-1">List item body text.</p>
  </div>
</div>

List with icons

Construction engineering

Offering about 40% of internships, these range from construction firms to public agencies (such as the City of Seattle and the Washington State Department of Transportation).

Transportation engineering

Offering about 25% of internships, these can be with consultants or public agencies responsible for transportation (such as the City of Seattle).

Environmental engineering

Offering about 10% of internships, most of which are with private consultants, although some are with public entities.

Code

Update the Font Awesome icons as needed.

<style>
  .list-group-item {
    grid-template-columns: 1;
    gap: 1rem;
  }
  .list-group-item i {
    font-size: 3rem;
  }
  .list-group-item :is(h2,h3,h4,h5) {
    font-size: 1.375rem;
  }
  @media screen and (min-width: 768px) {
    .list-group-item {
      grid-template-columns: 6rem minmax(0,1fr);
      gap: 1.25rem;
    }
    .list-group-item i {
      font-size: 4rem;
    }
    .list-group-item :is(h2,h3,h4,h5) {
      font-size: 1.75rem;
    }
  }
</style>

<div class="group list-group block-margin-bottom grid child-bg-transparent grid-cols-1 gap-[2rem] md:gap-15 [&>.list-group-item]:p-0">
  <!-- Item 1 -->
  <div class="list-group-item direct-child grid items-start">
    <div>
      <i class="fa-sharp fa-solid fa-hard-hat text-husky-purple justify-self-start md:justify-self-center px-0 py-[0.25rem] lg:p-[0.5rem]"></i>
    </div>
    <div class="pr-0 md:pr-[0.5rem] w-full md:w-[initial] flex-grow">
      <h3>Construction engineering</h3>
      <p>Offering about 40% of internships, these range from construction firms to public agencies (such as the City of Seattle and the Washington State Department of Transportation).</p>
    </div>
  </div>

  <!-- Item 2 -->
  <div class="list-group-item direct-child grid items-start">
    <div>
      <i class="fa-sharp fa-solid fa-car-bus text-husky-purple justify-self-start md:justify-self-center px-0 py-[0.25rem] lg:p-[0.5rem]"></i>
    </div>
    <div class="pr-0 md:pr-[0.5rem] w-full md:w-[initial] flex-grow">
      <h3>Transportation engineering</h3>
      <p>Offering about 25% of internships, these can be with consultants or public agencies responsible for transportation (such as the City of Seattle).</p>
    </div>
  </div>

  <!-- Item 3 -->
  <div class="list-group-item direct-child grid items-start">
    <div>
      <i class="fa-sharp fa-solid fa-leaf text-husky-purple justify-self-start md:justify-self-center px-0 py-[0.25rem] lg:p-[0.5rem]"></i>
    </div>
    <div class="pr-0 md:pr-[0.5rem] w-full md:w-[initial] flex-grow">
      <h3>Environmental engineering</h3>
      <p>Offering about 10% of internships, most of which are with private consultants, although some are with public entities.</p>
    </div>
  </div>
</div>

Two-column list with icons

List heading

List body text.
List heading

List body text.
List heading

List body text.

List heading

List body text.
List heading

List body text.
List heading

List body text.

Code

Update the Font Awesome icons as needed.

	<div class="row">
        <div class="col-sm-6">
                <ul class="list-group list-group-flush ">
                        <li class="list-group-item px-0">     <span class="float-right "><i class="text-primary fas fa-2x fa-cog">&nbsp;</i></span>
                                <h3 class="mt-0 text-secondary">List heading</h3>
                                <p class="pr-5">List body text.</p>
                        </li>
                        <li class="list-group-item px-0">     <span class="float-right "><i class="text-primary fas fa-2x fa-cog">&nbsp;</i></span>
                                <h3 class="mt-0 text-secondary">List heading</h3>
                                <p class="pr-5">List body text.</p>
                        </li>
                        <li class="list-group-item px-0">     <span class="float-right "><i class="text-primary fas fa-2x fa-cog">&nbsp;</i></span>
                                <h3 class="mt-0 text-secondary">List heading</h3>
                                <p class="pr-5">List body text.</p>
                        </li>
                </ul>
        </div>

        <div class="col-sm-6">
                <ul class="list-group list-group-flush ">
                        <li class="list-group-item px-0">     <span class="float-right "><i class="text-primary fas fa-2x fa-cog">&nbsp;</i></span>
                                <h3 class="mt-0 text-secondary">List heading</h3>
                                <p class="pr-5">List body text.</p>
                        </li>
                        <li class="list-group-item px-0">     <span class="float-right "><i class="text-primary fas fa-2x fa-cog">&nbsp;</i></span>
                                <h3 class="mt-0 text-secondary">List heading</h3>
                                <p class="pr-5">List body text.</p>
                        </li>
                        <li class="list-group-item px-0">     <span class="float-right "><i class="text-primary fas fa-2x fa-cog">&nbsp;</i></span>
                                <h3 class="mt-0 text-secondary">List heading</h3>
                                <p class="pr-5">List body text.</p>
                        </li>
                </ul>
        </div>
</div>