Create simple vertical List Groups using Bootstrap classes in HTML,PHP

How to make responsive list groups with multiple list items inside webpage.

Bootstrap list-group class will help us to create vertical list view with by default text align left. So here is the complete step by step tutorial for Create simple vertical List Groups using Bootstrap classes in HTML,PHP.

How to Create simple vertical List Groups using Bootstrap classes in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html
Code for list-groups.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>List Groups</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2> List Groups </h2>


<ul class="list-group">
 <li class="list-group-item">Sunday</li>
 <li class="list-group-item">Monday</li>
 <li class="list-group-item">Tuesday</li>
 <li class="list-group-item">Wednesday</li>
 <li class="list-group-item">Thursday</li>
 <li class="list-group-item">Friday</li>
 <li class="list-group-item">Saturday</li>
 </ul>


</div>
</body>
</html>

Screenshot:

Create simple vertical List Groups using Bootstrap classes in HTML,PHP

Leave a Reply

Your email address will not be published. Required fields are marked *