Let us understand this with the help of an example to make it more clear :
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='utf-8' />
<title>List | Mindstick</title>
<style>
body {
margin-left: 30%;
margin-right: 30%
}
.d-flex {
display: flex;
}
.justify-content-center {
justify-content: center;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.mb-0 {
margin-bottom: 0px !important;
}
.w-100 {
width: 100%
}
.m-1 {
margin: 10px;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<div class='d-flex justify-content-center flex-column'>
<h1>List of Languages</h1>
<ul type='square'>
<li>Core PHP</li>
<li>CodeIgniter</li>
<li>Laravel</li>
<li>.NET Framework</li>
<li>Core Java</li>
<li>Advance Java</li>
<li>C#</li>
</ul>
<ul type='circle'>
<li>Core PHP</li>
<li>Codeigniter</li>
<li>Laravel</li>
<li>.NET Framework</li>
<li>Core Java</li>
<li>Advance Java</li>
<li>C#</li>
</ul>
<ul type='disc'>
<li>Core PHP</li>
<li>Codeigniter</li>
<li>Laravel</li>
<li>.NET Framework</li>
<li>Core Java</li>
<li>Advance Java</li>
<li>C#</li>
</ul>
<ol type='I'>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>AJAX</li>
<li>Owl Carousel</li>
</ol>
<ol type='i'>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>AJAX</li>
<li>Owl Carousel</li>
</ol>
<ol type='a'>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>AJAX</li>
<li>Owl Carousel</li>
</ol>
<ol type='A'>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>AJAX</li>
<li>Owl Carousel</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>is a markup language</dd>
<dt>Java</dt>
<dd>is a programming language and platform</dd>
<dt>JavaScript</dt>
<dd>is a scripting language</dd>
<dt>SQL</dt>
<dd>is a query language</dd>
</dl>
</div>
</body>
</html>
