List styles (unstyled, inline) in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the <code>.list-unstyled</code> class do in Bootstrap?

It removes the default bullet points and left padding from a list, making it look clean and simple without any markers.

beginner

How does the <code>.list-inline</code> class change the appearance of list items?

It makes list items display side by side horizontally, like words in a sentence, instead of stacked vertically.

intermediate

Why would you use .list-inline-item inside a .list-inline list?

Because each list item needs the <code>.list-inline-item</code> class to properly display inline with spacing and alignment.

beginner

What is the visual difference between a normal <ul> list and one with .list-unstyled?

A normal <code>&lt;ul&gt;</code> shows bullet points and indentation; <code>.list-unstyled</code> removes these, showing plain text lines.

intermediate

Can you combine .list-unstyled and .list-inline on the same list?

Yes, although redundant, as both remove bullets and left padding. .list-inline-item is still needed on items for horizontal display.

What Bootstrap class removes bullet points from a list?

A .list-group

B .list-inline

C .list-inline-item

D .list-unstyled

The .list-unstyled class removes bullet points and left padding from lists.

Which class makes list items appear side by side horizontally?

A .list-unstyled

B .list-inline

C .list-group-item

D .list-item

The .list-inline class makes list items display inline horizontally.

Inside a .list-inline list, what class should each <li> have?

A .list-group-item

B .list-unstyled

C .list-inline-item

D .inline

Each list item needs the .list-inline-item class to display inline properly.

What happens if you use .list-unstyled on a list?

A Bullets and indentation are removed

B List items become inline

C List items get borders

D Nothing changes visually

The .list-unstyled class removes bullets and left padding, making the list plain.

Can .list-inline and .list-unstyled be used together on the same list?

A Yes, they work well together

B Only on ordered lists

C Only if you add extra CSS

D No, they serve different purposes and conflict

.list-unstyled and .list-inline have similar effects (remove bullets and padding), so they work together (though redundant).

Explain how to create a list with no bullet points using Bootstrap classes.

Think about how to make a list look clean without markers.

Describe how to make list items appear horizontally in Bootstrap.

Imagine turning a vertical list into a horizontal menu.