Bootstrap list-group

Purpose of list group component is to render complex and customized content in lists. To get a basic list group:
We have to add the class .list-group to element <ul>.Also have to add class .list-group-item to <li>.
Following example demonstrates this:

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
<h3>List group demo</h3><br />
<ul class="list-group">
   <li class="list-group-item"><h4 class="list-group-item-heading">Javascript</h4>
      <p class="list-group-item-text">
         All modern HTML pages are using JavaScript.
      </p>
   </li>
   <a href="http://plnkr.co/edit/K6uxpgNLt2ELgZa1AdJC" class="list-group-item"> 
   <span class="badge">Latest</span><h4 class="list-group-item-heading">Bootstrap</h4>
      <p class="list-group-item-text">
         Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
      </p></a>
   <li class="list-group-item"> <span class="badge">New</span>
   <h4 class="list-group-item-heading">Angular</h4>
     <p class="list-group-item-text">
         AngularJS is an open-source web application framework.
      </p>
   </li>
   </ul>
</body>

</html>

listgroup

In the above set of codes as we can see there is a link-group with links and badges. It is really a good feature to have in bootstrap. It is also easy to do too.here we are using many kind of tags to accomplice the task.now let us discuss about those tags.
At first to invoke list group we have invoke a class called list-group in body. As we can see in the above code.

<ul class="list-group">

After we have created the list group, we surely would be in need of filling it with valid items. So to do that we have to use list-group-item under <li> tag. As we demonstrated below.

<li class="list-group-item">

Now we have our list group and contents in it. We could end it right here. But we shouldn’t. There are many interesting things to do with this particular class.
We can make a heading with some info as paragraph to make it more understandable and good-looking. So, to do it we will invoke list-group-heading. And as for putting info in paragraph we will be using list-group-text under <p> tag. As demonstrated below.

<h4 class="list-group-item-heading">Javascript</h4>
      <p class="list-group-item-text">
         All modern HTML pages are using JavaScript.
      </p>

We can also use badge to differentiate the status of different informations. Let us see below.

  <span class="badge">Latest</span>

We can also attach links to the lists we can make. S o that if user likes the basic info then the user can directly go to the same page where he can find detailed info about that topic. To do it we have to enclose the list or some text under the <a> tag. How we should do it is explained below

  <a href="http://plnkr.co/edit/K6uxpgNLt2ELgZa1AdJC" class="list-group-item"> 
  <h4 class="list-group-item-heading">Bootstrap</h4>
      <p class="list-group-item-text">
         Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
      </p></a>

Though we have seen many different perspectives of the list group in this article. There are a lot to add. We should discuss all the possibilities.

other useful links:
1>Bootstrap Grid System
2>Bootstrap Nav-bar
3>Working with scrollspy in bootstrap

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address:

Delivered by FeedBurner

2 thoughts on “Bootstrap list-group

Leave a Reply

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