Lists
Bootstrap offers support and styling for the three main list types that HTML offers: ordered, unordered, and definition lists. An unordered list is a list that doesn’t have any particular order and is traditionally styled with bullets.
Unordered list
If you have an ordered list that you would like to remove the bullets from, add class="unstyled" to the opening <ul> tag.
<!DOCTYPE html> <html> <head> <title>Bootstrap Tutorial</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <body> <h3>Favorite Outdoor Activities</h3> <ul> <li>Backpacking in Yosemite</li> <li>Hiking in Arches <ul> <li>Delicate Arch</li> <li>Park Avenue</li> </ul> </li> <li>Biking the Flintstones Trail</li> </ul> </body> </html>
Output
Definition list
The third type of list you get with Bootstrap is the definition list. The definition list differs from the ordered and unordered list in that instead of just having a block-level <li> element, each list item can consist of both the <dt> and the <dd> elements. <dt> stands for “definition term,” and like a dictionary, this is the term (or phrase) that is being defined. Subsequently, the <dd> is the definition of the <dt>.
A lot of times in markup, you will see people using headings inside an unordered list. This works, but may not be the most semantic way to mark up the text. A better method would be creating a <dl> and then styling the <dt> and <dd> as you would the heading and the text. That being said, Bootstrap offers some clean default styles and an option for a side-by-side layout of each definition:
<!DOCTYPE html> <html> <head> <title>Bootstrap Tutorial</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <body> <h3>Common Electronics Parts</h3> <dl> <dt>LED</dt> <dd>A light-emitting diode (LED) is a semiconductor light source.</dd> <dt>Servo</dt> <dd>Servos are small, cheap, mass-produced actuators used for radio control and small robotics.</dd> </dl> </body> </html>
Output
