Semantic-UI List Bulleted Type
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. In this article, we will see how to create a bulleted Type List in Semantic UI.
A Bulleted type is a type of list which have bullet points as its markers.
Semantic UI Bulleted Type Class:
- bulleted: This class is required to form a bulleted type list.
There are 2 methods of creating a bulleted type list, which is given below:
Using <div> tag: This method can be used to create the list using the .ui bulleted list class.
Syntax:
<div class='ui bulleted list'> <div class='item' > ... </a> <div class='item'> ... </a> </div>
Example: This is the basic example illustrating the List Bulleted Type in Semantic-UI, where the <div> tag is utilized to make the list.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Semantic-UI List Bulleted Type</ title > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title > Semantic-UI List Bulleted Type </ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity = "sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin = "anonymous" referrerpolicy = "no-referrer" /> </ head > < body > < h1 >w3wiki</ h1 > < h4 >Semantic-UI List Bulleted Type</ h4 > < h4 >Today's tasks:</ h4 > < div class = "ui bulleted list" > < div class = "item" >Buying milk</ div > < div class = "item" >Going to gym</ div > < div class = "item" > Completing school homework < div class = "list" > < div class = "item" > Maths: Calculus </ div > < div class = "item" > Science : project on electricity </ div > < div class = "item" > Social Studies : Great History of India </ div > </ div > </ div > < div class = "item" > Reading the following blogs: < div class = "list" > < a href = "#" class = "item" > w3wiki post </ a > < a href = "#" class = "item" > bulleted list post </ a > </ div > </ div > </ div > </ body > </ html > |
Output:
Using <ul> tag: You can also create a bulleted type list using a <ul>tag. With this method, you need not specify the class bulleted in your tag. Also, all the <li> tags will be considered as the children of the <ul> tag.
Syntax:
<ul class='ui list'> <li>Content</li> <li>Content</li> </ul>
Example: This is the basic example illustrating the List Bulleted Type in Semantic-UI, where the <ul> tag is utilized to make the list.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Semantic-UI List Bulleted Type</ title > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title > Semantic-UI List Bulleted Type </ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity = "sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin = "anonymous" referrerpolicy = "no-referrer" /> </ head > < body > < h1 >w3wiki</ h1 > < h4 >Semantic-UI List Bulleted Type</ h4 > < h4 >Today's tasks:</ h4 > < ul class = "ui list" > < li >Buying milk</ li > < li >Going to gym</ li > < li > Completing school homework < ul > < li >Maths: Calculus</ li > < li >Science : project on electricity</ li > < li >Social Studies : Great History of India</ li > </ ul > </ li > < li > < ul > < li >< a href = "#" >w3wiki post</ a ></ li > < li >< a href = "#" >bulleted list post</ a ></ li > </ ul > </ li > </ ul > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/elements/list.html#bulleted