Bootstrap 5 Reboot Lists facilitates different kinds of lists, namely, unordered lists, ordered lists, & description lists, that remove the margin-top property & a margin-bottom property with a value of 1rem. The Nested lists don’t have margin-bottom property. Although, for <ul> and <ol> elements, the padding-left property can be reset. The description lists contain an updated margin property, in order to make simpler styling with a clear hierarchy, and better spacing. The margin-left property can be set to 0 & the margin-bottom property can be set to .5rem, in order to reset the description lists & by default, description lists are bolded.
BootStrap 5 Reboot Lists Class: There are no predefined classes for rebooting the list, Bootstrap will reboot the default impact of HTML list tags.
Syntax:
- For Unordered List:
<ul> <li>...</li> </ul>
- For Ordered List:
<ol> <li>...</li> </ol>
- For Description List:
<dl> <dt>...</dt> <dd>...</dd> </dl>
Example 1: In this example, we have implemented an unordered and ordered list.
<!DOCTYPE html> < html >
< head >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
</ head >
< body >
< div class = "container" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >Bootstrap 5 Reboot Lists</ h2 >
< strong > List of Fruits - Unordered</ strong >
< ul >
< li >Banana</ li >
< li >Apple</ li >
< li >Orange</ li >
< li >Grapes</ li >
< li >Mango</ li >
</ ul >
< strong >List of Vegetables - Ordered</ strong >
< ol >
< li >Potato</ li >
< li >Tomato</ li >
< li >Onion</ li >
< li >Brinjal</ li >
< li >Cauliflower</ li >
</ ol >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we have implemented the description list.
<!DOCTYPE html> < html >
< head >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
</ head >
< body >
< div class = "container text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 > Bootstrap 5 Reboot Lists</ h2 >
< dl >
< dt >
Full Stack Development with
React & Node JS - Live:
</ dt >
< dd >
Learn how to develop Single
Page Web Applications.
</ dd >
< dt >System Design - Live:</ dt >
< dd >
For individuals looking to
crack SDE job interviews.
</ dd >
< dt >JAVA Backend Development - Live:</ dt >
< dd >Learn backend development with Java</ dd >
< dt >DSA Live for Working Professionals:</ dt >
< dd >
A LIVE classroom program designed
for Working Professionals
</ dd >
</ dl >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/content/reboot/#lists