0
0
Bootsrapmarkup~10 mins

List styles (unstyled, inline) in Bootsrap - Interactive Code Practice

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to make the list unstyled using Bootstrap classes.

Bootsrap
<ul class="[1]">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>
Drag options to blanks, or click blank then click option'
Alist-unstyled
Blist-group
Clist-inline
Dlist-inline-item
Attempts:
3 left
💡 Hint
Common Mistakes
Using list-inline instead of list-unstyled will not remove bullets.
Using list-group changes the list style completely.
2fill in blank
medium

Complete the code to display list items inline using Bootstrap classes.

Bootsrap
<ul class="list-inline">
  <li class="[1]">Home</li>
  <li class="list-inline-item">About</li>
  <li class="list-inline-item">Contact</li>
</ul>
Drag options to blanks, or click blank then click option'
Alist-inline-item
Blist-group-item
Clist-unstyled
Dlist-item
Attempts:
3 left
💡 Hint
Common Mistakes
Using list-group-item styles the item as a block group item.
Forgetting to add the class to each <li>.
3fill in blank
hard

Fix the error in the code to correctly display an inline list with Bootstrap.

Bootsrap
<ul class="list-inline">
  <li class="[1]">Item 1</li>
  <li class="list-inline-item">Item 2</li>
  <li class="list-inline-item">Item 3</li>
</ul>
Drag options to blanks, or click blank then click option'
Alist-group-item
Blist-inline-item
Clist-unstyled
Dinline-item
Attempts:
3 left
💡 Hint
Common Mistakes
Using list-group-item instead of list-inline-item.
Missing the list-inline-item class on some <li> elements.
4fill in blank
hard

Fill both blanks to create an unstyled inline list using Bootstrap classes.

Bootsrap
<ul class="[1]">
  <li class="[2]">First</li>
  <li class="list-inline-item">Second</li>
  <li class="list-inline-item">Third</li>
</ul>
Drag options to blanks, or click blank then click option'
Alist-inline
Blist-group
Clist-inline-item
Dlist-unstyled
Attempts:
3 left
💡 Hint
Common Mistakes
Using list-unstyled on <ul> does not make items inline.
Forgetting to add list-inline-item to <li> elements.
5fill in blank
hard

Fill all three blanks to create a Bootstrap list that is unstyled and inline.

Bootsrap
<ul class="[1] [2]">
  <li class="[3]">One</li>
  <li class="list-inline-item">Two</li>
  <li class="list-inline-item">Three</li>
</ul>
Drag options to blanks, or click blank then click option'
Alist-unstyled
Blist-inline
Clist-inline-item
Dlist-group
Attempts:
3 left
💡 Hint
Common Mistakes
Using only one class on <ul> will not achieve both effects.
Forgetting to add list-inline-item to <li>.