Posted by
Zhullyblog
on
- Get link
- X
- Other Apps
How to create a list group
In this tutorial, you will learn to create a list group using Bootstrap.
List are used for enumerate elements or items in either an ordered or Unordered sequence. You can decide to list the generations of computer, list frameworks of a particular programming language such as PHP and so on. We discussed list in details in the previous tutorial.
To create a list group, .list-group is used and the . list-group-item is used to list the group item.
This syntax is quite similar to HTML list. In HTML, <ul> starts the list and <li> is used to list the items. Quite similar right? . Click here to see how to create a list in HTML.
Let's see the code properly.
Here is an example.
The code
Please share
In this tutorial, you will learn to create a list group using Bootstrap.
List are used for enumerate elements or items in either an ordered or Unordered sequence. You can decide to list the generations of computer, list frameworks of a particular programming language such as PHP and so on. We discussed list in details in the previous tutorial.
To create a list group, .list-group is used and the . list-group-item is used to list the group item.
This syntax is quite similar to HTML list. In HTML, <ul> starts the list and <li> is used to list the items. Quite similar right? . Click here to see how to create a list in HTML.
Let's see the code properly.
Here is an example.
The code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to create a list group</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
</head>
<body>
<h1>Zhullyblog courses</h1>
<ul class="list-group">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">JavaScript</li>
<li class="list-group-item">Bootstrap</li>
<li class="list-group-item">PHP</li>
<li class="list-group-item">Python</li>
</ul>
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>How to create a list group</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
</head>
<body>
<h1>Zhullyblog courses</h1>
<ul class="list-group">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">JavaScript</li>
<li class="list-group-item">Bootstrap</li>
<li class="list-group-item">PHP</li>
<li class="list-group-item">Python</li>
</ul>
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
Please share
Comments
Post a Comment