Bootstrap 4 | List Groups
List Groups are used to display a series of content in an organized way. Use .list-group and .list-group-item classes to create a list of items. The .list-group class is used with <ul> element and .list-group-item is used with <li> element.
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap List Group</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > < script src = </ script > </ head > < body > < h1 style = "color:green;text-align:center;" > GeeksforGeeks </ h1 > < div class = "container" > < h2 >List Groups</ h2 > < ul class = "list-group" > < li class = "list-group-item" > Data Structure </ li > < li class = "list-group-item" > Operating System </ li > < li class = "list-group-item" > Algorithm </ li > </ ul > </ div > </ body > </ html > |
Output:
Active list item: The .active class is used to highlight the current item.
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap List Group</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > < script src = </ script > </ head > < body > < h1 style = "color:green;text-align:center;" > GeeksforGeeks </ h1 > < div class = "container" > < h2 >List Groups</ h2 > < ul class = "list-group" > < li class = "list-group-item active" > Data Structure </ li > < li class = "list-group-item" > Operating System </ li > < li class = "list-group-item" > Algorithm </ li > </ ul > </ div > </ body > </ html > |
Output:
List Group With Linked Items: Use <div> and <a> tag instead of <ul> and <li> to create a list of group with linked items. The .list-group-item-action class is used to set the hover effect to change the background color to gray.
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap List Group</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > < script src = </ script > </ head > < body > < h1 style = "color:green;text-align:center;" > GeeksforGeeks </ h1 > < div class = "container" > < h2 >List Groups</ h2 > < div class = "list-group" > < a href = "#" class = "list-group-item list-group-item-action" > Data Structure </ a > < a href = "#" class = "list-group-item list-group-item-action" > Operating System </ a > < a href = "#" class = "list-group-item list-group-item-action" > Algorithm </ a > </ div > </ div > </ body > </ html > |
Output:
image widget
Disabled Item: The .disabled class is used to disable the text content. This class set the text color to light. When used on links, it will remove the hover effect.
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap List Group</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > < script src = </ script > </ head > < body > < h1 style = "color:green;text-align:center;" > GeeksforGeeks </ h1 > < div class = "container" > < h2 >List Groups</ h2 > < div class = "list-group" > < a href = "#" class = "list-group-item disabled" > Data Structure </ a > < a href = "#" class = "list-group-item" > Operating System </ a > < a href = "#" class = "list-group-item disabled" > Algorithm </ a > </ div > </ div > </ body > </ html > |
Output:
Flush/Remove Borders: The .list-group-flush class is used to remove some borders and rounded corners.
Example:
Code block
Output:
Horizontal List Groups: The .list-group-horizontal class is used to display the list of items horizontally instead of vertically.
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap List Group</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > < script src = </ script > </ head > < body > < h1 style = "color:green;text-align:center;" > GeeksforGeeks </ h1 > < div class = "container" > < h2 >List Groups</ h2 > < ul class = "list-group list-group-horizontal" > < li class = "list-group-item" > Data Structure </ li > < li class = "list-group-item" > Operating System </ li > < li class = "list-group-item" > Algorithm </ li > </ ul > </ div > </ body > </ html > |
Output:
Contextual Classes: It is used to set the color to the list of items. The classes for coloring the list-items are: .list-group-item-success, .list-group-item-secondary, .list-group-item-info, .list-group-item-warning, .list-group-item-danger, .list-group-item-primary, .list-group-item-dark and .list-group-item-light.
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap List Group</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > < script src = </ script > </ head > < body > < h1 style = "color:green;text-align:center;" > GeeksforGeeks </ h1 > < div class = "container" > < h2 >List Groups</ h2 > < ul class = "list-group" > < li class = "list-group-item list-group-item-primary" > Data Structure </ li > < li class = "list-group-item list-group-item-secondary" > Operating System </ li > < li class = "list-group-item list-group-item-success" > Algorithm </ li > < li class = "list-group-item list-group-item-warning" > DBMS </ li > < li class = "list-group-item list-group-item-danger" > Web Technology </ li > </ ul > </ div > </ body > </ html > |
Output:
Link items with Contextual Classes: The contextual classes can be used with list of items.
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap List Group</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > < script src = </ script > </ head > < body > < h1 style = "color:green;text-align:center;" > GeeksforGeeks </ h1 > < div class = "container" > < h2 >List Groups</ h2 > < div class = "list-group" > < a href = "#" class = "list-group-item list-group-item-primary" > Data Structure </ a > < a href = "#" class = "list-group-item list-group-item-secondary" > Operating System </ a > < a href = "#" class = "list-group-item list-group-item-success" > Algorithm </ a > < a href = "#" class = "list-group-item list-group-item-warning" > DBMS </ a > < a href = "#" class = "list-group-item list-group-item-danger" > Web Technology </ a > </ div > </ div > </ body > </ html > |
Output:
List Group with Badges: The .badge class can be combined with utility class to add badges inside the list of group.
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap List Group</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > < script src = </ script > </ head > < body > < h1 style = "color:green;text-align:center;" > GeeksforGeeks </ h1 > < div class = "container" > < h2 >List Groups</ h2 > < ul class = "list-group" > < li class="list-group-item d-flex justify-content-between align-items-center ">Data Structure < span class = "badge badge-success" >10</ span > </ li > < li class="list-group-item d-flex justify-content-between align-items-center">Computer Network < span class = "badge badge-success" >23</ span > </ li > < li class="list-group-item d-flex justify-content-between align-items-center">Operating System < span class = "badge badge-success" >39</ span > </ li > </ ul > </ div > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...