Using Lists Group in Bootstrap 4 with Example
In Web Layouts, lists are commonly used all around to give desired design effects for viewers. In Bootstrap 4 all the basic three types of listings are allowed i.e.
- 1. Unordered Lists: Any list that needs ruling within page layout without any rule and is marked with bullets only.
- 2. Ordered Lists: A characteristics list that follows the given order with hierarchy. By default, they are marked with numbers.
- 3. Definition Lists: A specific list of items with their respective descriptions.
Bootstrap Lists Example
Here is a quick example of using lists and their view in the browser respectively.
<ul class="list-group">
<li>HTML</li>
<ul><li>Inline Elements</li><li>Block Elements</li></ul>
<li>CSS</li>
<ol>
<li>Media Queries</li><li>CSS3</li>
</ol>
</ul>
<dl>
<dt>Interview Questions</dt>
<dd>HTML Interview Questions, CSS Interview Questions, WordPress Interview Questions, Responsive Web Design Interview Questions</dd>
</dl>
Bootstrap 4 List CSS
Here is a quick look for the CSS that is used with Bootstrap List with respect to the main class element being starting as .list-group, .list-group-item, active and disabled state and their various color as well as other characteristics.
.list-group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0}
.list-group-item-action{width:100%;color:#495057;text-align:inherit}
.list-group-item-action:focus,.list-group-item-action:hover{color:#495057;text-decoration:none;background-color:#f8f9fa}
.list-group-item-action:active{color:#212529;background-color:#e9ecef}
.list-group-item{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:-1px;background-color:#fff;border:1px solid rgba(0,0,0,.125)}
.list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}
.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}
.list-group-item:focus,.list-group-item:hover{z-index:1;text-decoration:none}
.list-group-item.disabled,.list-group-item:disabled{color:#6c757d;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#007bff;border-color:#007bff}
.list-group-flush .list-group-item{border-right:0;border-left:0;border-radius:0}.list-group-flush:first-child .list-group-item:first-child{border-top:0}
.list-group-flush:last-child .list-group-item:last-child{border-bottom:0}.list-group-item-primary{color:#004085;background-color:#b8daff}
.list-group-item-primary.list-group-item-action:focus,.list-group-item-primary.list-group-item-action:hover{color:#004085;background-color:#9fcdff}
.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#004085;border-color:#004085}
.list-group-item-secondary{color:#383d41;background-color:#d6d8db}
.list-group-item-secondary.list-group-item-action:focus,.list-group-item-secondary.list-group-item-action:hover{color:#383d41;background-color:#c8cbcf}
.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#383d41;border-color:#383d41}
.list-group-item-success{color:#155724;background-color:#c3e6cb}
.list-group-item-success.list-group-item-action:focus,.list-group-item-success.list-group-item-action:hover{color:#155724;background-color:#b1dfbb}
.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#155724;border-color:#155724}
.list-group-item-info{color:#0c5460;background-color:#bee5eb}
.list-group-item-info.list-group-item-action:focus,.list-group-item-info.list-group-item-action:hover{color:#0c5460;background-color:#abdde5}
.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#0c5460;border-color:#0c5460}
.list-group-item-warning{color:#856404;background-color:#ffeeba}
.list-group-item-warning.list-group-item-action:focus,.list-group-item-warning.list-group-item-action:hover{color:#856404;background-color:#ffe8a1}
.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#856404;border-color:#856404}
.list-group-item-danger{color:#721c24;background-color:#f5c6cb}
.list-group-item-danger.list-group-item-action:focus,.list-group-item-danger.list-group-item-action:hover{color:#721c24;background-color:#f1b0b7}
.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#721c24;border-color:#721c24}
.list-group-item-light{color:#818182;background-color:#fdfdfe}
.list-group-item-light.list-group-item-action:focus,.list-group-item-light.list-group-item-action:hover{color:#818182;background-color:#ececf6}
.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#818182;border-color:#818182}
.list-group-item-dark{color:#1b1e21;background-color:#c6c8ca}
.list-group-item-dark.list-group-item-action:focus,.list-group-item-dark.list-group-item-action:hover{color:#1b1e21;background-color:#b9bbbe}
.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#1b1e21;border-color:#1b1e21}Bootstrap 4 List Group
How to make list in bootstrap: It starts with basic ul and li structure only with specific classes with main .list-group to ul and .list-group-item to li respectively.
<ul class="list-group"> <li class="list-group-item">HTML</li> <li class="list-group-item">CSS</li> <li class="list-group-item">JS</li> <li class="list-group-item">Magento</li> <li class="list-group-item">SEO</li> </ul>
Bootstrap list design : Now We will study various design patterns that can be integrated with these lists.
Bootstrap Lists Active and Disable State
Bootstrap list Color
Bootstrap list with buttons
Bootstrap striped list
Bootstrap Lists Active and Disable State
In a similar Bootstrap ul li design, you can add specific .active and .disabled states respectively. .active will impart special color behavior while .disabled class will make it dull color with no arrow changing to textual signs.
Bootstrap list Color
All default contextual classes can be added to specific class items with their respective defined color in bootstrap i.e .list-group-item-success, list-group-item-info, list-group-item-warning, and .list-group-item-danger respectively with specific classes to impart that behavior.
Bootstrap 4 List Group inline
To make lists group inline you need to add specific classes .list-inline and .list-inline-item respectively to give them the desired output.
Bootstrap 4 List group flush
Using Flush we can remove the rounded corners and borders to make bootstrap lists group look like a simple tabular form. This is done through adding specific class .list-group-flush to the ul element respectively.
bootstrap 4 list Group with link items and button
In this example, we have used a link with <a> element and use of buttons to give more weightage to design accordingly.
Bootstrap 4 List group with image
In this example, we have images to corresponding list items in the group that provides a better visual presentation to the whole design.
Bootstrap 4 List group with Badges
These lists groups are also used badges to notify them with specific information characterized by new messages, unread messages, and other useful things. Here is a quick look at the design pattern that you will get after using them.
Bootstrap select list
Here in this example we have used select with list options with code and try it editor.
Bootstrap dropdown list
Check this dropdown built within bootstrap list group example with code and try it editor now.
Bootstrap checkbox list
In the following example, we have used a checkbox within the lists group to use them for suitable results.
Bootstrap Striped List
In this pattern, we are going to use a different color to every second li being striped to make it looks more attractive from a user experience point of view. We will be adding custom CSS to use it accordingly as ‘striped’.
ul.list-group.list-group-striped li:nth-of-type(odd){background: lightgrey;}
ul.list-group.list-group-striped li:nth-of-type(even){background: darkgrey;}
ul.list-group.list-group-hover li:hover{ background: white;}Bootstrap List Template
Here is a simple template that has most of the Bootstrap list-style integrated with specific requirements to be used for using within websites
