Bootstrap 4 includes a huge collection of classes to style list and navigation elements. Lets have a look at each of them.
Add class list-group to the parent element of the lists and add class list-group-item to each of the child elements to get the basic list styiling.
<ul class="list-group"> <li class="list-group-item">List Item</li> <li class="list-group-item">List Item</li> <li class="list-group-item">List Item</li> </ul>
Add class active or disabled to add a separate style to a list item.
<ul class="list-group"> <li class="list-group-item active">Active List Item</li> <li class="list-group-item">List Item</li> <li class="list-group-item disabled">Disabled List Item</li> </ul>
Add class list-group-item-action to the list item to add hover effects to the list items. With class list-group-item added to the child element, <li> tag is not compulsory.
<ul class="list-group"> <a href="#" class="list-group-item list-group-item-action active">Active List Item</a> <a href="#" class="list-group-item list-group-item-action">List Item</a> <a href="#" class="list-group-item list-group-item-action disabled">Disabled List Item</a> </ul>
Add class list-group-flush to the parent element of lists to remove borders except from the bottom and border radius from the list items.
<ul class="list-group list-group-flush"> <li class="list-group-item">List Item</li> <li class="list-group-item">List Item</li> <li class="list-group-item">List Item</li> </ul>
Add class list-group-horizontal or one of its responsive variants like list-group-horizontal-md to make the list group display horizontally on all viewports or specific sized viewports.
<ul class="list-group list-group-horizontal-md"> <li class="list-group-item">List Item</li> <li class="list-group-item">List Item</li> <li class="list-group-item">List Item</li> </ul>
You can also add contextual background and colors to list groups using contextual classes like list-group-item-primary to the list group item. Add class list-group-item-action to add hover effects.
<ul class="list-group list-group-flush"> <li class="list-group-item list-group-item-action list-group-item-primary">List Item</li> <li class="list-group-item list-group-item-action list-group-item-secondary">List Item</li> <li class="list-group-item list-group-item-action list-group-item-light">List Item</li> <li class="list-group-item list-group-item-action list-group-item-dark">List Item</li> <li class="list-group-item list-group-item-action list-group-item-success">List Item</li> <li class="list-group-item list-group-item-action list-group-item-info">List Item</li> <li class="list-group-item list-group-item-action list-group-item-warning">List Item</li> <li class="list-group-item list-group-item-action list-group-item-danger">List Item</li> </ul>
Breadcrumbs are added to webpages in order to indicate the current page's location in the navigation heirarchy. Add class breadcrumb to the parent element with class breadcrumb-item on each of its child elements. Add class active to the current page item. You can wrap the breadcrumb with a <nav> element too.
<ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Bootstrap</a></li> <li class="breadcrumb-item"><a href="#">Bootstrap 4</a></li> <li class="breadcrumb-item active">List Groups & Navigations</li> </ol>
Paginations are added a webpage to indicate a series of related contents exist across multiple pages. Add class pagination to the parent element and class page-item to the child elements with class active added to the current page or class disabled to the disabled ones. Add class page-link to the anchor elements. Add class pagination-sm or class pagination-lgfor sizing with flexbox utilities for alignment.
<ul class="pagination pagination-lg justify-content-end"> <li class="page-item disabled"><a class="page-link" href="#">«</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">»</a></li> </ul>
A collection of general and specific navigation styles are available in Bootstrap 4 for simple navigations and navigation bars.
Add class nav to the parent element along with class nav-item to the lists and class nav-link to the anchor elements to add basic styles to the navigation elements. Add class active or disabled to the nav-link to add specific styles to the active or disabled elements.
<ul class="nav"> <li class="nav-item"><a href="#" class="nav-link active">Active Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link disabled">Disabled Nav Item</a></li> </ul>
You can also achieve the same styles without using the <li> element or class nav-item.
<ul class="nav"> <a href="#" class="nav-link active">Active Nav Item</a> <a href="#" class="nav-link">Nav Item</a> <a href="#" class="nav-link">Nav Item</a> <a href="#" class="nav-link disabled">Disabled Nav Item</a> </ul>
Add utility classes like justify-content-* or flex-column with the parent element to align them horizontally or vertically.
Add class nav-tabs to the parent element to create a tab interface.
<ul class="nav nav-tabs"> <li class="nav-item"><a href="#" class="nav-link active">Active Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> </ul>
Add class nav-pills to style them as pills.
<ul class="nav nav-pills"> <li class="nav-item"><a href="#" class="nav-link active">Active Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> </ul>
Add class nav-fill to make the navigation occupy the entire width of the parent container. The space will be divided with respect to the items length.
<ul class="nav nav-pills nav-fill"> <li class="nav-item"><a href="#" class="nav-link active">Active Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">A Nav Item With Longer Text</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> </ul>
Add class nav-justify to force all the nav items take up equal width and the element occupy the entire width of its parent.
<ul class="nav nav-pills nav-justified"> <li class="nav-item"><a href="#" class="nav-link active">Active Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item With Longer Text</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> </ul>
Add class flex-column with responsive class like flex-row-sm to create a responsive nav.
<ul class="nav flex-column flex-row-sm"> <li class="nav-item"><a href="#" class="nav-link active">Active Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li> </ul>
0 Comment
Leave a comment