dark

• The Diary of a Young Girl
• The Little Prince
• Lord of the Flies

Description List

You can create lists that have two parts: on each line you can have a term and a definition. To align these two items horizontally you can use the grid system that we learned about in Bootstrap 4 grid tutorial. If you want to cut a longer piece of text, you can use the .text-truncated utility.

dark

Romeo and Juliet

...

Charlotte's Web

...

...

Alice's Adventures in Wonderland & Through the Looking-Glass

...

Bootstrap 4 List Groups

Basic Example

List groups are unordered lists of items that have a special look: padding on each item and borders. To use them, you will need to add the .list-group class on the

dark

• The Lord of the Rings
• One Hundred Years of Solitude
• Brave New World
• Gone with the Wind

dark

• The Lord of the Rings
• One Hundred Years of Solitude
• Brave New World
• Gone with the Wind

Active Items

To show which element of the list is currently active, you can add the .active class (along with the .list-group-item class). This is how it looks:

dark

• On the Road
• Pride and Prejudice
• Anna Karenina

Disabled Items

And to disabled a list item, you can use the .disabled class on the .list-group-item element. Its content will be greyed out and will look like this:

dark

• Animal Farm
• In Search of Lost Time (out of stock)
• Wuthering Heights

Using Links and Buttons

If you want to make the elements of the .list-group actionable you have two options. You can use anchors instead of

dark

//with links

  
    Hamlet
  
  Mody Dick
  The Color Purple
  Midnight's Children


//with buttons

  
      Winnie-the-Pooh
    
    Slaughterhouse-Five
    War and Peace
    Of Mice and Men

Colouring the List

To colour the background of list items, you can use the list contextual background classes for colour. These are different from the default background colouring classes .bg-[context] and have the format .list-group-item-[context]. Context can be one of the following: light, secondary, dark, primary, info, success, warning, danger.

dark

• Little Women
• Native Son
• Great Expectations
• The Sun Also Rises
• The Stranger
• For Whom the Bell Tolls
• The Hobbit
• Madame Bovary
• The Wind in the Willows

dark

Little Women Native Son Great Expectations The Sun Also Rises The Stranger For Whom the Bell Tolls The Hobbit Madame Bovary The Wind in the Willows

Adding Content to Bootstrap 4 List Groups

You may need more than a piece of text in your list. Here are some basic use cases that may come in handy.

Adding Icons

If you want to add an icon to the beginning of the list item, you can do so easily by inserting the code for the icon inside the

dark

• David Copperfield
• The Portrait of a Lady
• The Trial

Adding Badges

You can add a counter to list items with the help of badges. In order to align the elements in the list item, you need to transform it into a flex container with the .d-flex utility class. In our example we have used the .justify-content-between class to push the badges to the right and the .align-items-center to align the elements vertically.

dark

• Crime and Punishment 10
• A Clockwork Orange 14
• The Age of Innocence 5

Adding Images

You can also place images inside the list. In our example, we have added thumbnails for books. We have used the list items as flex containers with the .justify-content-between class for positioning.

dark

• Don Quixote
• As I Lay Dying
• Things Fall Apart

  Custom Content

  You can add most HTML elements we have learned so far inside a list item. Using the Bootstrap 4 flex utilities, you can easily manage the space inside the list item and position the items. Here is a more complex example:

  dark

  
  

  Don Quixote
  by Miguel de Cervantes
  2 Copies in Stock
  As I Lay Dying
  by William Faulkner
  5 Copies in Stock
  Things Fall Apart
  by Miguel de Cervantes
  0 Copies in Stock

  Using JavaScript to Create Panels

  If you are using actionable panels and you want the item links to toggle content, you can use the JavaScript we have started learning about in Day 11: Bootstrap 4 Navigation Tutorial and Examples.

  To add the panels we need the place them in a container with the class .tab-content and give each panel the .tab-pane class. Their visibility is hidden by default so we need to add the .active class to the one we are going to show on page load. There should be a correlation between the link that is active in the .list-group list and the tab that is active in the .tab-content.

  The next step is to tie all the links in the .list-groups to the panels in the .tab-content. What we are trying to accomplish is to show the associated panel for a link when it is pressed and hide the previous panel. We ca do this in two ways: using data attributes or via JavaScript calls. We’ll have examples with both.

  Via Data Attributes

  If you don’t want to write additional JavaScript, you can tie each link to a panel by adding the data-toggle="list" attribute to every link and setting the anchor to the id of the panel href=”[#id]”.

  dark

  
  

  
    
  
      
  
        The Little Prince
        Where the Wild Things Are
        One Hundred Years of Solitude
      
    
    
  
      
  
        
  ...
        
  ...
        
  ...
      
    
  

  Via JavaScript Calls

  If you would rather write JavaScript, then you don’t need the data-toggle="list" attribute. You still need to have ids for every panel and anchors to them. And you need to add a JavaScript event when you click on one of the links in the list that calls the .tab(‘show’) function. This function shows the associated panel for the link and hides the previous one.

  dark

  
  

  //html
  
    
  
      
  
        The Little Prince
        Where the Wild Things Are
        One Hundred Years of Solitude
      
    
    
  
      
  
        
  ...
        
  ...
        
  ...
      
    
  
  
  //js
  $('#list-tab a').on('click', function (e) {
    e.preventDefault()
    $(this).tab('show')
  });

  Advanced JavaScript Behaviour

  Fade Effect

  You can make the panels appear with a fade effect if you add the .fade class to each .tab-panel. In order for the first panel to be visible, it will also need the .show class (besides the .active class). Here is how the fade effect looks:

  dark

  
  

  
    
  
      
  
        The Little Prince
        Where the Wild Things Are
        One Hundred Years of Solitude
      
    
    
  
      
  
        
  ...
        
  ...
        
  ...
      
    
  

  Methods

  .tab(‘show’)

  If you use the .tab('show') method when a .list-item is clicked, the .list-item will become active and the associated panel will become visible. In the example above we have added this method for each .item-list. But we can also call this method individually. For example, here is a button that shows the information about the book “Where the Wild Things Are”:

  dark

  
  

  //html
  
    
  
      
  
        The Little Prince
        Where the Wild Things Are
        One Hundred Years of Solitude
      
    
    
  
      
  
        
  ...
        
  ...
        
  ...
      
    
  
  
  Show Wild
  
  //js
  $('#show-wild').on('click', function () {
    $('#list-wild-list').tab('show');
  })

  Events

  When panels change, there are a series of events that go on. We will present each one, its order and its behaviour. They are the same events that we described for tabs in Day 11: Bootstrap 4 Navigation Tutorial and Examples, so may already be familiar with them.

  Order	Event	Target	Description
  1	hide.bs.tab	the current active tab	This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
  2	show.bs.tab	the to-be-shown tab	This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
  3	hidden.bs.tab	on the previous active tab, the same one as for the hide.bs.tab event	This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.
  4	shown.bs.tab	on the newly-active just-shown tab, the same one as for the show.bs.tab event	This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.

  If no tab was already active, the hide.bs.tab and hidden.bs.tab events will not be fired.

  We have created an example that uses the shown.bs.tab method and color the .list-items you have previously visited to light blue:

  dark

  
  

  //html
  
    
  
      
  
        The Little Prince
        Where the Wild Things Are
        One Hundred Years of Solitude
      
    
    
  
      
  
        
  ...
        
  ...
        
  ...
      
    
  
  
  //js
  $('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
    $(e.target).removeClass( "light-blue" );
    $(e.relatedTarget).addClass( "light-blue" );
  })

  
  This is all for today! I hope you have enjoyed learning about list and list groups. All the code we have used in this article is available on CodePen where you can fork and edit it. Let me know if you run into any kind of trouble when trying your list! Have a nice day and see you again tomorrow

  Further Reading

  If you have some time left, here are some useful links that you can read for further reference:

  • Official Documentation for Lists
  • Official Documentation for List Groups

  Photo credit to Juna Wangfor her shot.

  Day 11: Bootstrap 4 Navigation

  The post Day 12: Bootstrap 4 Lists Tutorial and Examples appeared first on BootstrapBay.