BootStrap 5 Reboot Lists
Last Updated :
13 Jan, 2023
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:
<ul>
<li>...</li>
</ul>
<ol>
<li>...</li>
</ol>
<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 =
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.
HTML
<!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
Share your thoughts in the comments
Please Login to comment...