Uncategorized

Lesson 10 – Bootstrap List Groups

List groups are one of the most important components of any website. Lists help you organize and structure your data and make them pleasing to eyes. In the following lines, we are going to study how to create different types of lists using List Group classes.

We will start from the most basic list group in Bootstrap. It is actually an unordered list with simple classes and items. You can further style the list using custom CSS or other classes from the Bootstrap. Here is the code for this kind of list group.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap List Groups</title>
</head>
<body>
    <div class="container">
        <ul class="list-group">
            <li class="list-group-item">First List Item</li>
            <li class="list-group-item">Second List Item</li>
            <li class="list-group-item">Third List Item</li>
            <li class="list-group-item">Fourth List Item</li>
            <li class="list-group-item">Fifth List Item</li>
        </ul>
    </div>  
    [block]0[/block]
    [block]1[/block]
</body>
</html>

Here is the output of the above code.

Similarly, you can also add “.active” class to any list group item to make it active in the selected state.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap List Group</title>
</head>
<body>
    <div class="container">
        <ul class="list-group">
            <li class="list-group-item active">First List Item</li>
            <li class="list-group-item">Second List Item</li>
            <li class="list-group-item">Third List Item</li>
            <li class="list-group-item">Fourth List Item</li>
            <li class="list-group-item">Fifth List Item</li>
        </ul>
    </div>  
    [block]2[/block]
    [block]3[/block]
</body>
</html>

This is how our list will appear to the visitors now.

We can also convert the list group items to clickable buttons and links using the “.list-group-item-action” class in combination of “.list-group-item” class as the piece of code below shows.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap List Groups</title>
</head>
<body>
    <div class="container">
        <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
            <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
            <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
            <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
        </div>
    </div>  
    [block]4[/block]
    [block]5[/block]
</body>
</html>

Here is the output of the above code.

Now, that you have learned the basics of Bootstrap, we encourage you to continue your study as there is much more to learn. Bootstrap is a popular frontend framework. If you master this framework, you will do a wealth of good to your prospects as a successful web developer.