Skip to content
Web Strategy Documentation Library

Content

Images

Image thumbnails

Placeholder image

<img src="https://placehold.co/200x200" width="200" height="200" alt="Placeholder image" class="" />

Placeholder image

<img src="https://placehold.co/200x200" width="200" height="200" alt="Placeholder image" class="img-thumbnail" />

Placeholder image

<img src="https://placehold.co/200x200" width="200" height="200" alt="Placeholder image" class="img-round" />

Figures

For images with captions, use <figure> with <figcaption>.

Placeholder image
A caption for the image.
<figure class="figure">
	<img src="https://placehold.co/400x250" class="figure-img img-fluid" alt="Placeholder image">
	<figcaption class="figure-caption">A caption for the image.</figcaption>
</figure>

Right aligned caption

Placeholder image
A caption for the image.
<figure class="figure">
	<img src="https://placehold.co/400x250" class="figure-img img-fluid" alt="Placeholder image">
	<figcaption class="figure-caption text-right">A caption for the image.</figcaption>
</figure>

Tables

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
	<thead>
		<tr>
		<th scope="col">#</th>
		<th scope="col">First</th>
		<th scope="col">Last</th>
		<th scope="col">Handle</th>
		</tr>
	</thead>
	<tbody>
		<tr>
		<th scope="row">1</th>
		<td>Mark</td>
		<td>Otto</td>
		<td>@mdo</td>
		</tr>
		<tr>
		<th scope="row">2</th>
		<td>Jacob</td>
		<td>Thornton</td>
		<td>@fat</td>
		</tr>
		<tr>
		<th scope="row">3</th>
		<td>Larry</td>
		<td>the Bird</td>
		<td>@twitter</td>
		</tr>
	</tbody>
</table>

Table with striped rows

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped">
	<thead>
		<tr>
		<th scope="col">#</th>
		<th scope="col">First</th>
		<th scope="col">Last</th>
		<th scope="col">Handle</th>
		</tr>
	</thead>
	<tbody>
		<tr>
		<th scope="row">1</th>
		<td>Mark</td>
		<td>Otto</td>
		<td>@mdo</td>
		</tr>
		<tr>
		<th scope="row">2</th>
		<td>Jacob</td>
		<td>Thornton</td>
		<td>@fat</td>
		</tr>
		<tr>
		<th scope="row">3</th>
		<td>Larry</td>
		<td>the Bird</td>
		<td>@twitter</td>
		</tr>
	</tbody>
</table>

Responsive tables

Create responsive tables by wrapping any .table with .table-responsive{-sm|-md|-lg|-xl}, making the table scroll horizontally at each max-width breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.

Always responsive tables

Add .table-responsive for horizontally scrolling tables

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive">
	<table class="table">
		<thead>
			<tr>
			<th scope="col">#</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			</tr>
		</thead>
		<tbody>
			<tr>
			<th scope="row">1</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			</tr>
			<tr>
			<th scope="row">2</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			</tr>
			<tr>
			<th scope="row">3</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			</tr>
		</tbody>
	</table>
</div>

Breakpoint-specific tables

Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. (Adjust window size to see below in action.)

Table Small

# Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive-sm">
	<table class="table">
		<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		</tbody>
	</table>
</div>

Table Medium

# Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive-md">
	<table class="table">
		<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		</tbody>
	</table>
</div>

Table Large

# Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive-lg">
	<table class="table">
		<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		</tbody>
	</table>
</div>

Table Extra Large

# Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive-xl">
	<table class="table">
		<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		</tbody>
	</table>
</div>