Lists organize information into sections that are easy to scan and follow.
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
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>
Bordered list
Use bordered lists when the list items contain a heading or other secondary information.
Heading 1
Lorem ipsum dolor
Diam vel quam elementum pulvinar etiam. Enim praesent elementum facilisis leo vel fringilla. Enim blandit volutpat maecenas volutpat. Consectetur a erat nam at lectus urna duis convallis. Tincidunt augue interdum velit euismod in pellentesque massa placerat.
Heading 2
Lorem ipsum dolor
Diam vel quam elementum pulvinar etiam. Enim praesent elementum facilisis leo vel fringilla. Enim blandit volutpat maecenas volutpat. Consectetur a erat nam at lectus urna duis convallis. Tincidunt augue interdum velit euismod in pellentesque massa placerat.
Heading 3
Lorem ipsum dolor
Diam vel quam elementum pulvinar etiam. Enim praesent elementum facilisis leo vel fringilla. Enim blandit volutpat maecenas volutpat. Consectetur a erat nam at lectus urna duis convallis. Tincidunt augue interdum velit euismod in pellentesque massa placerat.
Code
<ul class="list-group list-group-flush mb-5">
<li class="list-group-item pb-4 pl-0">
<div class="fa-stack fa fa-2x float-left"><i class="fa fa-circle fa-stack-2x text-primary"> </i> <i class="fa fa-user-hard-hat fa-stack-1x text-white pr-2"> </i></div>
<div class="ml-5 pl-5">
<h3 class="mt-0">List heading</h3>
List body text.</div>
</li>
<li class="list-group-item pb-4 pl-0">
<div class="fa-stack fa fa-2x float-left"><i class="fa fa-circle fa-stack-2x text-primary"> </i> <i class="fa fa-car-bus fa-stack-1x text-white pr-2"> </i></div>
<div class="ml-5 pl-5">
<h3 class="mt-0">List heading</h3>
List body text.</div>
</li>
<li class="list-group-item pb-4 pl-0">
<div class="fa-stack fa fa-2x float-left"><i class="fa fa-circle fa-stack-2x text-primary"> </i> <i class="fa fa-leaf fa-stack-1x text-white pr-2"> </i></div>
<div class="ml-5 pl-5">
<h3 class="mt-0">List heading</h3>
List body text.</div>
</li>
</ul>
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
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.
<ul class="list-group list-group-flush mb-5">
<li class="list-group-item pb-4 pl-0">
<div class="fa-stack fa fa-2x float-left"><i class="fa fa-circle fa-stack-2x text-primary"> </i> <i class="fa fa-user-hard-hat fa-stack-1x text-white pr-2"> </i></div>
<div class="ml-5 pl-5">
<h3 class="mt-0">List heading</h3>
List body text.</div>
</li>
<li class="list-group-item pb-4 pl-0">
<div class="fa-stack fa fa-2x float-left"><i class="fa fa-circle fa-stack-2x text-primary"> </i> <i class="fa fa-car-bus fa-stack-1x text-white pr-2"> </i></div>
<div class="ml-5 pl-5">
<h3 class="mt-0">List heading</h3>
List body text.</div>
</li>
<li class="list-group-item pb-4 pl-0">
<div class="fa-stack fa fa-2x float-left"><i class="fa fa-circle fa-stack-2x text-primary"> </i> <i class="fa fa-leaf fa-stack-1x text-white pr-2"> </i></div>
<div class="ml-5 pl-5">
<h3 class="mt-0">List heading</h3>
List body text.</div>
</li>
</ul>
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"> </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"> </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"> </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"> </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"> </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"> </i></span>
<h3 class="mt-0 text-secondary">List heading</h3>
<p class="pr-5">List body text.</p>
</li>
</ul>
</div>
</div>