Bootstrap striped list

Bootstrap striped list DEFAULT

Bootstrap List Groups

❮ PreviousNext ❯


Basic List Groups

The most basic list group is an unordered list with list items:

  • First item
  • Second item
  • Third item

To create a basic list group, use an element with class , and elements with class :

Example

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Try it Yourself »

List Group With Badges

You can also add badges to a list group. The badges will automatically be positioned on the right:

  • 12 New
  • 5 Deleted
  • 3 Warnings

To create a badge, create a element with class inside the list item:

Example

<ul class="list-group">
  <li class="list-group-item">New <span class="badge">12</span></li>
  <li class="list-group-item">Deleted <span class="badge">5</span></li>
  <li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>

Try it Yourself »


List Group With Linked Items

The items in a list group can also be hyperlinks. This will add a grey background color on hover:

First itemSecond itemThird item

To create a list group with linked items, use instead of and instead of :

Example

<div class="list-group">
  <a href="#" class="list-group-item">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

Try it Yourself »

Active State

First itemSecond itemThird item

Use the class to highlight the current item:

Example

<div class="list-group">
  <a href="#" class="list-group-item active">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

Try it Yourself »

Disabled Item

The following list group has a disabled item:

First itemSecond itemThird item

To disable an item, add the class:

Example

<div class="list-group">
  <a href="#" class="list-group-item disabled">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

Try it Yourself »

Contextual Classes

Contextual classes can be used to color list items:

  • First item
  • Second item
  • Third item
  • Fourth item

The classes for coloring list-items are: , , , and :

Example

<ul class="list-group">
  <li class="list-group-item list-group-item-success">First item</li>
  <li class="list-group-item list-group-item-info">Second item</li>
  <li class="list-group-item list-group-item-warning">Third item</li>
  <li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>

Try it Yourself »

Custom Content

You can add nearly any HTML inside a list group item.

Bootstrap provides the classes and which can be used as follows:

Example

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">First List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Second List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
</div>

Try it Yourself »


❮ PreviousNext ❯


Sours: https://www.w3schools.com/bootstrap/bootstrap_list_groups.asp

Bootstrap 4 List Groups

❮ PreviousNext ❯


Basic List Groups

The most basic list group is an unordered list with list items:

  • First item
  • Second item
  • Third item

To create a basic list group, use an element with class , and elements with class :

Example

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Try it Yourself »

Active State

  • Active item
  • Second item
  • Third item

Use the class to highlight the current item:

Example

<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Try it Yourself »


List Group With Linked Items

First itemSecond itemThird item

To create a list group with linked items, use instead of and instead of . Optionally, add the class if you want a grey background color on hover:

Example

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First item</a>
  <a href="#" class="list-group-item list-group-item-action">Second item</a>
  <a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>

Try it Yourself »

Disabled Item

The class adds a lighter text color to the disabled item. And when used on links, it will remove the hover effect:

Disabled itemDisabled itemThird item

Example

<div class="list-group">
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

Try it Yourself »

Flush / Remove Borders

Use the class to remove some borders and rounded corners:

  • First item
  • Second item
  • Third item
  • Fourth item

Example

<ul class="list-group list-group-flush">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

Try it Yourself »

Horizontal List Groups

If you want the list items to display horizontally instead of vertically (side by side instead of on top of each other), add the class to :

  • First item
  • Second item
  • Third item
  • Fourth item

Example

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

Try it Yourself »

Contextual Classes

Contextual classes can be used to color list items:

  • Success item
  • Secondary item
  • Info item
  • Warning item
  • Danger item
  • Primary item
  • Dark item
  • Light item

The classes for coloring list-items are: , , , , , , and ,:

Example

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-secondary">Secondary item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-dark">Dark item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
</ul>

Try it Yourself »

Link items with Contextual Classes

Action itemSuccess itemSecondary itemInfo itemWarning itemDanger itemPrimary itemDark itemLight item

Example

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>

Try it Yourself »

List Group with Badges

Combine classes with utility/helper classes to add badges inside the list group:

Example

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge badge-primary badge-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Ads
    <span class="badge badge-primary badge-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Junk
    <span class="badge badge-primary badge-pill">99</span>
  </li>
</ul>

Try it Yourself »

❮ PreviousNext ❯


Sours: https://www.w3schools.com/bootstrap4/bootstrap_list_groups.asp
  1. Ip puller pastebin
  2. Snake discovery available reptiles
  3. Chalk paste

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 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 Lists

Try it Editor


Bootstrap 4 List CSS

Here is a quick look for the CSS that are used with Bootstrap List with respect to 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 and 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>

Try it Editor


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 similar Bootstrap ul li design you can add specific and state respectively. .active will impart special color behaviour while .disabled class will make it dull color with no arrow changing to textual signs.

Try it Editor


Bootstrap list Color

All default contextual classes can be added to specific class item with their respective defined color in bootstrap i.e , , and .list-group-item-danger respectively with specific classes to impart that behaviour.

Try it Editor


Bootstrap 4 List Group inline

To make lists group inline you need to add specific classes and respectively to give them the desired output.

Try it Editor


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.

Try it Editor


bootstrap 4 list Group with link items and button

In this example we have used link with <a> element and use of buttons to give more weightage to design accordingly.

Try it Editor


Bootstrap 4 List group with image

In this example we have image to corresponding list items in group that provides better visual presentation to the whole design.

Try it Editor


Bootstrap 4 List group with Badges

These lists groups are also used badges to notify them with specific information characterised by new messages, unread message and other useful things. Here is a quick look at the design pattern that you will get after using them.

Try it Editor


Bootstrap select list

Here in this example we have used select with list options with code and try it editor.

Try it Editor


Bootstrap dropdown list

Check this dropdown built within bootstrap list group example with code and try it editor now.

Try it Editor


Bootstrap checkbox list

In the following example we have used checkbox within lists group to use them for suitable results.

Try it Editor


Bootstrap Striped List

In this pattern we are going to use different colour to every second li being striped to make it look it more attractive from user experience point of view. We will be adding custom CSS to use it accordingly as .

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;}

Try it Editor


Bootstrap List Template

Here is simple template that has most of the Bootstrap list style integrated with specific requirement to be used for using within websites

Try it Editor


Sours: https://www.tutorialmines.net/bootstrap-list-example/
Bootstrap 5 Grid System Tutorial

As part of my blog rewrite, I wanted to create a striped list effect for my sidebars, something like this:

image

In this post I'll show how we can take a regular unordered list and style it with stripes using CSS. As an example, here's a simple list of items:

By default, this will render with bullet points and some indentation:

image

Let's give our a class of , and then we can clear the default formatting like this:

This gets rid of the bullet points and indentation:

image

Next, let's introduce the striping. That's easy thanks to the CSS selector. We'll give every numbered row a :

We're almost there already:

image

But we could do with some extra padding on elements and I'd also like a dividing line between list elements. We can do that by giving each some padding, and putting a one pixel bottom border on each :

image

Now we're almost there but if you look very carefully you'll see that the bottom item in the list has a border, and I only wanted to use the border as a separator between items. We can get rid of that with the help of the CSS selector, turning off the border on the last element only.

And this gives us the desired effect:

image

Of course, I'm sure this is all very basic stuff if you already know CSS, but hope someone finds this useful. You can play with a full example on CodePen.

Sours: https://markheath.net/post/css-striped-list

Striped list bootstrap

.

Bootstrap 3 Striped Responsive Table for Data Listing

.

Now discussing:

.



731 732 733 734 735