loading...
user not found

John Doe

General Components

Users
250
Sales
150
Badges and Pills
Basic Badges
Use .badge.badge-*classes.
primary Success Info Warning Danger Purple Mint
Badges with pills
Use .badge.badge-pill.badge-* classes.
Primary Success Info Warning Danger Purple Mint
Squared Badges
Use Custom .rounded-0 class.
Primary Success Info Warning Danger Purple Mint
Badges in Buttons
Place the Badges with in buttons.
Breadcrumb
Basic Breadcrumb
Use .breadcrumb and .breadcrumb-item classes.
  1. Home
  1. Home
  2. Library
  1. Home
  2. Library
  3. Data
Breadcrumb with Nav tag
Use .breadcrumb and .breadcrumb-item classes.
List Groups
Basic List Group
Use .list-group and .list-group-item classes.
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
List Group with Active items
Use .list-group and .list-group-item.active classes.
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
List Group with disabled items
Use .list-group and .list-group-item.disabled classes.
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
List Group with Buttons
Use .list-group-item.list-group-item-action classes.
List Group with Contextual Classes
Use list-group-item-* class.
Dapibus ac facilisis in Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros
List Group with Badges
Use list-group-item-* class.
  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1
  • Porta ac consectetur ac 5
  • Vestibulum at eros 4
Pagination
Basic Pagination
Use .pagination,.page-item and .page-linkclasses.
Pagination with Icons
Use .pagination,.page-item and .page-linkclasses.
Pagination Disabled and Active
Use .page-item.disabled classes.
Pagination in Large size
Use .pagination.pagination-lg classes.
Pagination in Small size
Use .pagination.pagination-sm classes.
Pagination Alignment
Use .pagination.float-right classes.
Progress bars
Basic Progress bars
Use .progress and .progress-bar.progress-*classes.
Stripped Progress bars
Use .progress-bar-striped class.
Progress bars in Large size
Use custom .progress_lg class.
Progress bars in Small size
Use custom .progress_sm class.
Progress bars With labels
Take the labels within .progress-bar class.
25%
50%
75%
100%
75%
50%
Multiple Progress bars
Take the .progress-bar classes within .progress class. And mention the width of progress bar.
25%
25%
25%
50%
25%
25%
25%
25%
50%
Advanced progress bars
Basic Line
Percentage
Progress bar with Circle
Progress bar Circle Percentage
Progress bar with Semi Circle
Progress bar Circle Percentage
Carousel
Carousel with Controls
Use .carousel-inner and .carousel-item classes.
Carousel with Indicators
Use .carousel-indicators class.
Images
Basic Thumbnail Image
Use .img-thumbnail class.
image
Circled Thumbnail Image
Use .img-thumbnail.rounded-circle classes.
image