Topic: Separator between list-inline elements

pawled free asked 3 years ago

How to put separators into list-inline class?

Grzegorz Bujański staff commented 3 years ago

What separator do you mean? Do you mean commas or vertical line between list items?

pawled free commented 3 years ago

Exactly. Pipes that are invisible to the text selection tool.

Grzegorz Bujański staff answered 3 years ago

For the vertical list there is a ready example::

If you want to change this example and apply the solution I gave for llist-inline you can modify the styles:

.list-group-flush > .list-group-item {
    border-width: 0;
.list-group-flush > .list-group-item:not(:last-child):after {
    content:" ";
    position: absolute;
    height: 1px;
    bottom: 0;
    width: 100%;
    left: 1rem;
    background: #666666;   

Grzegorz Bujański staff answered 3 years ago

The inline-list does not provide such a separator. You can add it yourself by adding some css code, e.g .:

  .list-inline-item:not(:last-child):after {
    content:" ";
    margin: 0 .5rem;
    position: absolute;
    height: 1rem;
    top: 4px;
    bottom: 0;
    width: 1px;
    background: #666666;   

pawled free commented 3 years ago

Can you attach similar example for vertical list (how to change its style)?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 3.0.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No