Lists

Default lists

Use the .list-group define the list of items. and used .list-group-item to indicate the current content.

  • Logo Design
  • Web Design & Development
  • E-Commerce
  • SEO

Active lists

Use.active to a.list-group-item to indicate the current active.

  • UI Kits
  • Wow Animations
  • Apex Charts
  • Starter Kits

Flush lists

Use .list-group-flush to remove some borders and rounded corners to render list group items.

  • PRODUCT
  • PRODUCT DETAILS
  • CART
  • CHECKOUT

Horizontal lists

Use .list-group-horizontalto change the layout of list group items from vertical to horizontal across all breakpoints..list-group-horizontal-[sm/md/lg/xl/xxl].

  • Product
  • Product details
  • Pricing
  • Payment details
  • Checkout
  • Mega options
  • Basic table
  • Sizing table
  • Border table
  • Basic inputs
  • Form validations
  • Flat style
  • Edge style
  • Button group
  • Rating
  • Crypto
  • Blog
  • Blog details
  • Blog single
  • Order history
  • Gallery grid
  • Gallery desc
  • Masonry Desc

Lists with checkbox

Use the .form-check-input to check your checkbox.

Lists with radios

Use the .form-check-input to check your radio buttons.

Lists with numbers

Use the .list-group-numbered to ordered wise print numbers.

  1. known for delivery of useful and usable solutions
  2. Solve your problem with us
  3. Certified Professionals
  4. Growth-Driven

JavaScript behavior

Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file to extend our list group to create table panes of local content.

Numbered & badge lists

Use the .list-group-numbered modifier class to numbered list group items.Numbers are generated via CSS for better placement inside list group items.

  1. Stella Nowland
    Freelance
  2. Lola Stanford
    Issue
  3. Caitlin Coungeau
    Social
  4. Graciela W. McClaran
    Issue

Disabled lists

Use .disabled to a .list-group-item to make it appear disabled.