BootStrap 5 Reboot Lists
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.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body > < div class = "container" > < h1 class = "text-success" > w3wiki </ 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.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body > < div class = "container text-center" > < h1 class = "text-success" > w3wiki </ 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
Contact Us