Who doesn’t love a better than average list style? We use them consistently in our markup for a wide scope of conditions. Truth to be told, list styles are amazingly significant for site specialist to find test once-over style to help improve site (UI). The usage of HTML list is very typical these days. Today, we’re going to look to some degree more removed than making common records, by exhibiting 8 one of a kind ways to deal with wonderfully style your HTML records with CSS. We’ll use some unadulterated CSS procedures to make a depleted list look incredible (and even have some extra convenience). So today, in this article we will be discussing about some examples of Bootstrap 4 list style group with tags like ordered list(ol), unordered list(ul), li(list item).

HTML lists appear as a bulleted (minimal dark circles) structure. Using CSS we can make them snazzy and feasible. Using CSS we can make them lovely and practical, we can similarly use pictures as list thing marker.

Also utilizing styling referenced records was for every circumstance fundamental point important articles and make it obvious to peruser.

To style numbers you have to expel default program styles and add gets to your rundowns parts to target them and style likewise.

Collection of Bootstrap List Examples with Source Code

Down underneath we have brought some great list styles today. Eventually without devouring at whatever point let me direct acclimate you with a portion of those models.

Related

In this article, I will cover what these CSS List styles examples, and what you can do with them.

1. Bootstrap 4 List Group with Badges

The first we have is a direct list style which you can use for a wide scope of destinations and applications.We can see the list of groups with badges. The numbers characterizes the badges.

Since the designer has used the latest structures, you can even improve the arrangement with your own custom movement effects and concealing arrangement.

bootstrap ul li list badges

By making two or three enhancements you can without a lot of a stretch use this code in your endeavor.

Demo/Code

2. Bootstrap 4 List Group Examples

This is a sample examples of Bootstrap List Group. As this is only uses HTML, the design is not fully functional yet.

We can see three different List group presented vertically. Each of them also shows a grey label on hover. On clicking, the list is label blue.

As the design is not functional you can also make it come true as well if you have some basic knowledge of coding.

bootstrap ul li list examples

This is also one of the example of Bootstrap list style which uses tags like ordered list(ol), unordered list(ul), li(list item).

Demo/Code

3. Bootstrap 4 List Item(li) ul with Custom Content

If you are a reader and used to buy books from online book store, then this will eventually not be a new look for you. Because most of the online stores place the list orders this way.

You can see the three list groups with images as well in the right side.

Also the name of the book along with the writer is presented to the user. It also shows how many copies and stocks of the book is left.

bootstrap ul li list custom content

You can also edit the codes and make it look more amazing and beautiful. The demo along with the code snippet is as below.

Demo/Code

4. Bootstrap 4 Collapse List

As the name implies this is a collapsible list example which can eventually be used if you do not have a lot of space for your website. If your website looks conjusted due to greater number of lists you can simply use this idea.

On clicking the list title, the group of lists appears smoothly. So you can choose any of them you want and again click on the title to close the list groups.

bootstrap ul li list collapse

You can also add some more of the sub lists if you have more number of items to show.

Demo/Code

5. Bootstrap 4 ul li List Group with Images

This is the same as the one we discussed previously in number 3. This exactly fits for a online book store. The name of the book along with the images is presented to the user.

Three different list of books arranged vertically looks clean and neat.

If you want to look it more good, you can place the price of the book and ‘Add to card’ button so that the user can directly place the order.

bootstrap ul li list with images

As the idea for the front end part is almost completed by the developer. So now its your turn to take care of the back end part.

Demo/Code

6. Bootstrap 4 List Examples

We just talked about how the previous sample would look perfect if the price of the item and the ‘Add to cart’ button was placed in the design. This design has made that come true.

In this design you can see how professional the design looks with the image in a rounded border along with the name and prices.

A small introduction is also provided just below the name of the item. This simply also has a scroll bar to scroll through more of the items. You can however see if the item is free, new or sold out.

Bootstrap list examples

Demo/Code

7. Bootstrap 4 List Grid View

The designer has presented six of the items along with the item name, price, image and ‘Add to cart’ options. There is also a toggle button in the top left bar which displays if the user want to display the items in list view or grid view.

In the list view, the items are shown one above the other vertically whereas the items are arranged in a grid manner in the Grid view.

However the items look neat in the list view.

grid view

Demo/Code

8. Bootstrap Popover with HTML

The Popover module is like tooltip. It is a pop up box that shows up when the client taps on a component. The thing that matters is that the popover can contain significantly more substance.

To make a popover, include the information toggle=”popover” ascribe to a component as:

$(“[data-toggle=popover]”).each(function(i, obj) {

Bootstrap popover with HTML

Demo/Code

9. Social Network Friends List Style

If you are familiar with Facebook then you wont feel this design new. Just some design and appearance differs. The list of the persons are arranged list by list vertically.

The name of the person along with the mutual friends are in the left side. Also you can see the ‘send request’ option in the right side.

A thin line is showcased to section the lists. This completely uses HTML and also CSS. So the user won’t have to understand the complexity of JavaScript.

Social network friends list style

The demo along with the code snippet is underneath.

Demo/Code

10. Custom List Style Via Clean CSS

The ol element in here utilizes to characterize an arranged list. This is where each list thing is gone before by a numerical or in order identifier. As found in the demo, the list is described by numbers.

The numbers appears inside the container like structure. Just next to the containers are the list things.

You can supplant them with your own contents.

Custom list style via clean CSS

Demo/Code

11. Custom Link List

Here you can see how the designer has arranged different links in a list order. On click the items turns to grey. The good thing is you can customize the design by simply using the toggle switch button.

By clicking the toggle switch you can remove or add the lists depending on your preferences.

You can as well restore the default order by clicking the ‘Restore’ button.

Custom Link list

Demo/Code

12. Bootstrap 4 Reports Lists

This is a Bootstrap Reports Lists table by devlopereswar. In the event that you have to have a table on your site with substance, this planned table would be incredible for you. In the event that important, you can include more sections from the code.

This table has three sections and 4 lines. What’s more, there are additionally headings for every segment.

The Firstname, Lastname and the Email of each person is in the lists table.

Reports list

You can also make a huge difference in this table so it meets your necessities. To sum up these buttons look cool.

Demo/Code

13. Admin Lists Panel

This is a set of Bootstrap list which fits for the admin panel. As you can see the item heading a list view. In the left there is a small checkbox which forms a line between the checked list.

You also have the option to edit or delete the list you want. The designer also has presented Pagination option to divide the lists into discrete pages.

Admin lists panel

Demo/Code

14. Bootstrap 4 – List groups

You can likewise add badges to a list gathering. The badges will consequently be situated on the right. To make a badge, make a component with class .span inside the list item as:

<li class=”list-group-item”>Same content goes here<span class=”badge”>12</span></li>

Additionally you can Use the .active class to feature the current item of your rundown as:

<a href=”#” class=”list-group-item active”>Link 1</a>

bootstrap ul li list groups

Moreover Contextual classes can be utilized to shading list things. The classes for coloring list-items are:

“.list-group-item-success, list-group-item-info, .list-group-item-warning, and .list-group-item-danger”.

The demo along with the code snippet is underneath to see how it works.

Demo/Code

15. Custom Bootstrap Unordered List(ul) list item(li)

This is a demo of Custom Unordered List with customisable hues and marks. The liststyle-type property applies to all list, and to any component that is set to display: list-item.

The shade of the rundown marker will be whatever the figured shade of the component is (set by means of the color property).

Custom Unordered list

This is also one of the example of Bootstrap list style which uses tags like ordered list(ol), unordered list(ul), li(list item).

Demo/Code

16. Category List groups Bootstrap Examples

The most essential rundown gathering is an unordered rundown with rundown things and the correct classes. Expand upon it with the choices that pursue, or with your very own CSS as required. The Bootstrap “span” classes utilizes here for the bootstrap grid framework.

The documentation demonstrates sections named with numbers, each number speaks to the span class utilized for this compartment.

Category examples

Demo/Code

17. CSS Counters with Nested List groups

This CSS/Bootstrap list configuration by Gaving is a really modern looking design. It’s progressed as in inside the list content, there are different sections of list content.

All the more explicitly, this accordion has four panel groups. Inside each panel gathering, there are 2-3 panel groups.

This sort of nesting also makes the contents increasingly composed.

CSS Counters with Nested Lists

In any case, a nesting with numerous levels will confound the client. So rather than profound nesting, I suggest you have a straightforward nesting on your site.

The demo along with the code snippet is underneath.

Demo/Code

18. Bootstrap 4 List Group with Icons

This is an unordered list of items with icons for each name of the group. As discussed in the previous one, this also has list of the items arranged vertically. Also the icon defines each of the list name.

To make this list design, the developer has utilized HTML and CSS code. Since the designer has utilized the most recent systems, you can expect a smooth movement impact with some modifications and customizations.

Group with Icons

Demo/Code

19. Bootstrap Card List

As you can see this is a Movie card list which looks appealing. The cards are arranged vertically one above the other. Rounded corners uses for the cards which also looks beautiful.

A fading movie poster is in the card along with the movie name, brief introduction, Duration and the genre.

Also you can watch the trailer by clicking on the ‘Watch Trailer’ button. In the top left section, you have the like, comment and share options arranged horizontally.

Card List

Demo/Code

Conclusion

Let’s be honest clear, website looks dull and there won’t be any guests paying little attention to whether you have a more noticeable number of plans than others. So essentially give a gander at all these list structures and feel no falterings to go along with them on your site.

Also we will talk about a greater amount of them in near future.