Semantic-UI List Bulleted Type
Last Updated :
07 Mar, 2022
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=
integrity=
"sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer" />
</head>
<body>
<h1>GeeksforGeeks</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">
GeeksforGeeks 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=
integrity=
"sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer" />
</head>
<body>
<h1>GeeksforGeeks</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="#">GeeksforGeeks 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
Share your thoughts in the comments
Please Login to comment...