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 Bordered 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

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

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

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

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

<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>

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

Heading 3

Lorem ipsum dolor

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.
Geotechnical engineering
Offering about 5% of internships, usually with private consultants.
Structural engineering
Offering about 10-15% of internships, which tend to be with private consultants.
Water resources engineering
Offering about 10-15% of internships, they tend to be with private consultants although some may be 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">&nbsp;</i> <i class="fa fa-user-hard-hat fa-stack-1x text-white pr-2">&nbsp;</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">&nbsp;</i> <i class="fa fa-car-bus fa-stack-1x text-white pr-2">&nbsp;</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">&nbsp;</i> <i class="fa fa-leaf fa-stack-1x text-white pr-2">&nbsp;</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

Lorem ipsum dolor

Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Vel risus commodo viverra maecenas accumsan lacus vel.
Lorem ipsum dolor

Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Vel risus commodo viverra maecenas accumsan lacus vel.
Lorem ipsum dolor

Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Vel risus commodo viverra maecenas accumsan lacus vel.

Lorem ipsum dolor

Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Vel risus commodo viverra maecenas accumsan lacus vel.
Lorem ipsum dolor

Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Vel risus commodo viverra maecenas accumsan lacus vel.
Lorem ipsum dolor

Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Vel risus commodo viverra maecenas accumsan lacus vel.

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>

Basic unordered list

Code

Basic ordered list

Code

Flush list

Code

Bordered list

Heading 1

Heading 2

Heading 3

Code

List with icons

Construction engineering

Transportation engineering

Environmental engineering

Geotechnical engineering

Structural engineering

Water resources engineering

Code

Two-column list with icons

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Code