Small and compact tables in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What Bootstrap class makes a table smaller and more compact?

The <code>.table-sm</code> class makes a Bootstrap table smaller by reducing cell padding, making it more compact.

beginner

How does .table-sm affect the table's appearance?

It reduces the padding inside table cells, so the table looks tighter and uses less vertical space.

intermediate

Can .table-sm be combined with other Bootstrap table classes?

Yes, you can combine .table-sm with classes like .table-striped or .table-bordered to keep compact spacing while adding styles.

beginner

Why use small and compact tables in web design?

They save space on the page, making data easier to scan especially on smaller screens or when showing lots of data.

beginner

What is the HTML structure to apply a small Bootstrap table?

Use <table class="table table-sm"> with your table rows and cells inside.

Which class makes a Bootstrap table smaller and more compact?

A .table-small

B .table-compact

C .table-sm

D .table-tight

The correct class is .table-sm. The others are not valid Bootstrap classes.

What does the .table-sm class change in a Bootstrap table?

A Reduces cell padding

B Changes text color

C Adds borders

D Makes table full width

.table-sm reduces the padding inside table cells to make the table more compact.

Can you use .table-sm with .table-striped?

A Only on mobile devices

B No, they conflict

C Only with JavaScript

D Yes, they can be combined

Bootstrap allows combining .table-sm with other table classes like .table-striped.

Why might you choose a small table style?

A To save vertical space

B To increase font size

C To add animations

D To disable scrolling

Small tables save vertical space by reducing padding, making data easier to view.

What is the correct HTML to start a small Bootstrap table?

A <table class='compact'>

B <table class='table table-sm'>

C <table class='small-table'>

D <table class='table-small'>

Use <table class='table table-sm'> to create a small Bootstrap table.

Explain how to create a small and compact table using Bootstrap and why you would use it.

Think about the class that changes padding and the benefits of compact tables.

Describe how combining .table-sm with other Bootstrap table classes affects the table's look and usability.

Consider how multiple classes work together in Bootstrap.