Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Lists

##### Default Lists

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

- Logo design
- Web development
- E-commerce
- SEO

    <ul class="list-group">
     <li class="list-group-item">
       <i class="icofont icofont-arrow-right"></i>Logo design
     </li>
     <li class="list-group-item">
       <i class="icofont icofont-arrow-right"></i>Web development
     </li>
     <li class="list-group-item">
       <i class="icofont icofont-arrow-right"></i>E-commerce
     </li>
     <li class="list-group-item">
       <i class="icofont icofont-arrow-right"></i>SEO
     </li>
    </ul>

##### Active Lists

Add `active` to a `list-group-item` to indicate the current active selection.

- UI kits
- Wow animations
- Apex charts
- Starter kits

    <ul class="list-group">
     <li class="list-group-item active bg-warning-light" aria-current="true">
       <i class="icofont icofont-arrow-right"></i>UI kits
     </li>
     <li class="list-group-item">
       <i class="icofont icofont-arrow-right"></i>Wow animations
     </li>
     <li class="list-group-item">
       <i class="icofont icofont-arrow-right"></i>Apex charts
     </li>
     <li class="list-group-item">
       <i class="icofont icofont-arrow-right"></i>Starter kits
     </li>
    </ul>

##### Flush Lists

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

- Charts
- Alerts
- Cart
- Checkout

    <ul class="list-group list-group-flush">
     <li class="list-group-item"><i class="icofont icofont-chart-histogram-alt"></i>Charts</li>
     <li class="list-group-item"><i class="icofont icofont-warning"></i>Alerts</li>
     <li class="list-group-item"><i class="icofont icofont-cart"></i>Cart</li>
     <li class="list-group-item"><i class="icofont icofont-checked"></i>Checkout</li>
    </ul>

##### Contextual Classes

Use contextual classes to style list items with a stateful background and colors.`list-light-*` and `txt-*`.

This is primary bg you can use .list-light-primary class.This is secondary bg you can use .list-light-secondary class.This is success bg you can use .list-light-success class.This is danger bg you can use.list-light-danger class.This is warning bg you can use .list-light-warning class.This is info bg you can use .list-light-info class.This is white bg you can use .list-light-white class.This is white bg you can use .list-light-dark class.

    <div class="card-body contextual-wrapper">
     <div class="list-group">
       <a class="list-group-item list-group-item-action list-light-primary" href="#!">This is primary bg you can use
         <em class="txt-primary fw-bold">.list-light-primary</em>class.
       </a>
       <a class="list-group-item list-group-item-action list-light-secondary" href="#!">This is secondary bg you can use
         <em class="txt-secondary fw-bold">.list-light-secondary</em>class.
       </a>
       <a class="list-group-item list-group-item-action list-light-success" href="#!">This is success bg you can use
         <em class="txt-success fw-bold">.list-light-success</em>class.
       </a>
       <a class="list-group-item list-group-item-action list-light-danger" href="#!">This is danger bg you can use
         <em class="txt-danger fw-bold">.list-light-danger</em>class.
       </a>
       <a class="list-group-item list-group-item-action list-light-warning" href="#!">This is warning bg you can use
         <em class="txt-warning fw-bold">.list-light-warning</em>class.
       </a>
       <a class="list-group-item list-group-item-action list-light-info" href="#!">This is info bg you can use
         <em class="txt-info fw-bold">.list-light-info</em>class.
       </a>
       <a class="list-group-item list-group-item-action list-light-white" href="#!">This is white bg you can use
         <em class="txt-white fw-bold">.list-light-white</em>class.
       </a>
       <a class="list-group-item list-group-item-action list-light-dark" href="#!">This is white bg you can use
         <em class="txt-white fw-bold">.list-light-dark</em>class.
       </a>
     </div>
    </div>

##### Horizontal Lists

Use `list-group-horizontal` to 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

    <div class="horizontal-list-wrapper dark-list">
     <ul class="fw-bold list-group list-group-horizontal-sm pb-2">
       <li class="list-group-item border-left-primary">Product </li>
       <li class="list-group-item">Product details</li>
       <li class="list-group-item">Pricing</li>
       <li class="list-group-item">Payment details</li>
       <li class="list-group-item">Checkout </li>
       <li class="list-group-item">Mega options </li>
     </ul>
     <ul class="fw-bold list-group list-group-horizontal-md pb-2">
       <li class="list-group-item border-left-secondary">Basic table</li>
       <li class="list-group-item">Sizing table </li>
       <li class="list-group-item">Border table</li>
       <li class="list-group-item">Basic inputs </li>
       <li class="list-group-item">Form validations</li>
     </ul>
     <ul class="fw-bold list-group list-group-horizontal-lg pb-2">
       <li class="list-group-item border-left-warning">Flat style </li>
       <li class="list-group-item">Edge style </li>
       <li class="list-group-item">Button group</li>
       <li class="list-group-item">Rating</li>
       <li class="list-group-item">Crypto</li>
     </ul>
     <ul class="fw-bold list-group list-group-horizontal-xl pb-2">
       <li class="list-group-item border-left-success">Blog </li>
       <li class="list-group-item">Blog details </li>
       <li class="list-group-item">Blog single </li>
       <li class="list-group-item">Order history </li>
     </ul>
     <ul class="fw-bold list-group list-group-horizontal-xxl">
       <li class="list-group-item border-left-info">Gallery grid </li>
       <li class="list-group-item">Gallery desc</li>
       <li class="list-group-item">Masonry Desc</li>
     </ul>
    </div>

##### Custom Content Lists

Use `list-group-item` through make custom design of all lists.

###### Molly Blake

MollyBoake@rhyta.com

5 days ago

Next step is to choose a tone of voice for your content type. From casual to convincing, pick one from 20+ tones in the dropdown.Why did we say “snag eyeballs” instead of “get attention?” Why do we say “brick-and-mortar words” instead of “concrete words?” Because, in your email subject lines, it’s better to use words that people can picture.

20K Followers

###### Gabrielle Fahey

GabrielleFahey@dayrep.com

10 days ago

Your aim with this blog is to advertise yourself and your services in blog design. That means it's vital to create content about just that: blog design. Anything else on your page may act as a distraction to your potential customers, and you don't want that!

100 Followers

###### Lucinda Moseley

LucindaMoseley@teleworm.us

3 days ago

People who are looking to hire a web designer may not know what to look out for. This will give you a chance to prove your trustworthiness by providing potential customers with advice and will let you sell your services by highlighting their best qualities.

23M Followers

    <div class="list-group main-lists-content pt-0">
     <a class="list-group-item list-group-item-action active bg-primary" href="#" aria-current="true">
       <div class="d-flex w-100 justify-content-between align-items-center">
         <div class="list-wrapper">
           <img class="list-img me-0" src="../assets/images/user/1.jpg" alt="profile">
           <div class="list-content">
             <h6>Molly Blake</h6>
             <p>MollyBoake@rhyta.com</p>
           </div>
         </div>
         <small>5 days ago</small>
       </div>
       <p class="mb-1">Next step is to choose a tone of voice for your content type. From casual to convincing, pick one from 20+ tones in the dropdown.Why did we say “snag eyeballs” instead of “get attention?” Why do we say “brick-and-mortar words” instead of “concrete words?” Because, in your email subject lines, it’s better to use words that people can picture.</p>
       <small>20K Followers</small>
     </a>
     <a class="list-group-item list-group-item-action list-hover-primary" href="#!">
       <div class="d-flex w-100 justify-content-between align-items-center">
         <div class="list-wrapper">
           <img class="list-img me-0" src="../assets/images/user/3.png" alt="profile">
           <div class="list-content">
             <h6>Gabrielle Fahey</h6>
             <p>GabrielleFahey@dayrep.com</p>
           </div>
         </div>
         <small class="text-muted">10 days ago</small>
       </div>
       <p class="mb-1">Your aim with this blog is to advertise yourself and your services in blog design. That means it's vital to create content about just that: blog design. Anything else on your page may act as a distraction to your potential customers, and you don't want that!</p>
       <small class="text-muted">100 Followers</small>
     </a>
     <a class="list-group-item list-group-item-action list-hover-primary" href="#!">
       <div class="d-flex w-100 justify-content-between align-items-center">
         <div class="list-wrapper">
           <img class="list-img me-0" src="../assets/images/user/2.jpg" alt="profile">
           <div class="list-content">
             <h6>Lucinda Moseley</h6>
             <p>LucindaMoseley@teleworm.us</p>
           </div>
         </div>
         <small class="text-muted">3 days ago</small>
       </div>
       <p class="mb-1">People who are looking to hire a web designer may not know what to look out for. This will give you a chance to prove your trustworthiness by providing potential customers with advice and will let you sell your services by highlighting their best qualities.</p>
       <small class="text-muted">23M Followers</small>
     </a>
    </div>

##### Lists with Checkbox

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

- Auto start
- Auto update
- Don't check auth key
- Success all

    <ul class="list-group">
     <li class="list-group-item">
       <input class="form-check-input me-1 checkbox-primary" id="firstCheckbox" type="checkbox" value="" checked="">
       <label class="form-check-label txt-primary mb-0" for="firstCheckbox">Auto start</label>
     </li>
     <li class="list-group-item">
       <input class="form-check-input me-1 checkbox-secondary" id="secondCheckbox" type="checkbox" value="">
       <label class="form-check-label txt-secondary mb-0" for="secondCheckbox">Auto update</label>
     </li>
     <li class="list-group-item">
       <input class="form-check-input me-1 checkbox-success" id="thirdCheckbox" type="checkbox" value="">
       <label class="form-check-label txt-success mb-0" for="thirdCheckbox">Don't check auth key</label>
     </li>
     <li class="list-group-item">
       <input class="form-check-input me-1 checkbox-warning" id="fourCheckbox" type="checkbox" value="">
       <label class="form-check-label txt-warning mb-0" for="fourCheckbox">Success all</label>
     </li>
    </ul>

##### Lists with Radios

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

- Meditations
- Read a book
- Learn to code
- Drink more water

    <ul class="list-group">
     <li class="list-group-item">
       <input class="form-check-input me-1 checkbox-danger" id="firstRadio" type="radio" name="listGroupRadio" value="" checked="">
       <label class="form-check-label mb-0" for="firstRadio">Meditations</label>
     </li>
     <li class="list-group-item">
       <input class="form-check-input me-1 checkbox-primary" id="secondRadio" type="radio" name="listGroupRadio" value="">
       <label class="form-check-label mb-0" for="secondRadio">Read a book</label>
     </li>
     <li class="list-group-item">
       <input class="form-check-input me-1 checkbox-success" id="thirdRadio" type="radio" name="listGroupRadio" value="">
       <label class="form-check-label mb-0" for="thirdRadio">Learn to code </label>
     </li>
     <li class="list-group-item">
       <input class="form-check-input me-1 checkbox-info" id="fourRadio" type="radio" name="listGroupRadio" value="">
       <label class="form-check-label mb-0" for="fourRadio">Drink more water</label>
     </li>
    </ul>

##### Lists with Numbers

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

1. Known for practical solutions
2. Solve your problem
3. Certified Professionals
4. Growth-Driven

    <ol class="list-group list-group-numbered">
     <li class="list-group-item txt-primary fw-bold">Known for practical solutions</li>
     <li class="list-group-item txt-danger fw-bold">Solve your problem</li>
     <li class="list-group-item txt-success fw-bold">Certified Professionals</li>
     <li class="list-group-item txt-warning fw-bold">Growth-Driven </li>
    </ol>

##### JavaScript Behavior

Use 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.

Home Profile Contact Us Settings

    <div class="row">
     <div class="col-sm-4">
       <div class="list-group" id="list-tab" role="tablist">
         <a class="list-group-item list-group-item-action bg-primary" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a><a class="list-group-item list-group-item-action list-hover-primary" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a><a class="list-group-item list-group-item-action list-hover-primary" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Contact Us</a><a class="list-group-item list-group-item-action list-hover-primary" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
       </div>
     </div>
     <div class="col-sm-8">
       <div class="tab-content" id="nav-tabContent">
         <div class="tab-pane fade show list-behaviors" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
           <div class="d-flex mb-xl-4 list-behavior-1">
             <div class="flex-shrink-0">
               <img class="tab-img img-fluid" src="../assets/images/blog/img.png" alt="home">
             </div>
             <div class="flex-grow-1">
               <p class="mb-xl-0 mb-sm-4">We provide end to end digital solutions, right from designing your website/application development: Domain, Web Hosting, Email Hosting Registration, Search Engine Optimization and other Internet Marketing, Renewal of Services timely and effectively.</p>
             </div>
           </div>
           <div class="d-flex list-behavior-1 mb-xl-4">
             <div class="flex-shrink-0">
               <img class="tab-img img-fluid" src="../assets/images/blog/blog.jpg" alt="home">
             </div>
             <div class="flex-grow-1">
               <p class="mb-0">When someone visits your homepage, your design should inspire them to stay. Therefore, your value proposition should be established on the homepage for visitors to select to stay on your website.Building trust, expressing value, and guiding visitors to the next step all depend on a page's design.</p>
             </div>
           </div>
         </div>
         <div class="tab-pane fade dark-list" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
           <div class="flex-space align-items-center list-light-dark contact-profile">
             <img class="tab-img" src="../assets/images/avtar/3.jpg" alt="profile">
             <ul class="d-flex flex-column gap-2">
               <li><strong>Visit Us:</strong>2600 Hollywood Blvd,Florida, United States-33020</li>
               <li><strong>Mail Us:</strong>contact@us@gmail.com</li>
               <li><strong>Contact Number:</strong>(954) 357-7760</li>
             </ul>
           </div>
         </div>
         <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
           <ul class="d-flex flex-column gap-1">
             <li>Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them.</li>
             <li><strong>Visit Us:</strong>2600 Hollywood Blvd,Florida, United States-33020</li>
             <li><strong>Mail Us:</strong>contact@us@gmail.com</li>
             <li><strong>Contact Number:</strong>(954) 357-7760</li>
           </ul>
         </div>
         <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
           <ul class="d-flex flex-column gap-2">
             <li><strong>Available Pages in Theme:</strong></li>
             <li>--> Typography: Typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader.
             </li>
             <li>--> Tooltip: A tooltip is a brief, informative message that appears when a user interacts with an element in a graphical user interface (GUI).
             </li>
           </ul>
         </div>
       </div>
     </div>
    </div>

##### Numbered & Badge Lists

Use`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

    <ol class="list-group list-group-numbered badge-list">
     <li class="list-group-item">
       <div>Stella Nowland</div>
       <span class="badge badge-warning rounded-pill p-2">Freelance</span>
     </li>
     <li class="list-group-item">
       <div>Lola Stanford</div>
       <span class="badge badge-danger text-white rounded-pill p-2">Issue</span>
     </li>
     <li class="list-group-item">
       <div>Caitlin Coungeau</div>
       <span class="badge badge-primary text-white rounded-pill p-2">Social</span>
     </li>
     <li class="list-group-item">
       <div>Graciela W. McClaran</div>
       <span class="badge badge-danger text-white rounded-pill p-2">Issue</span>
     </li>
    </ol>

##### Disabled Lists

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

Teresa J. Mosteller Gloria D. Acheson Sharon C. Obrien Bryan A. Owens

    <div class="list-group">
     <a class="list-group-item list-group-item-action list-hover-primary active" href="#!">
       <img class="rounded-circle" src="../assets/images/dashboard-11/user/1.jpg" alt="user">Teresa J. Mosteller
     </a>
     <a class="list-group-item list-group-item-action list-hover-primary" href="#!">
       <img class="rounded-circle" src="../assets/images/dashboard-11/user/2.jpg" alt="user">Gloria D. Acheson
     </a>
     <a class="list-group-item list-group-item-action disabled" href="#!">
       <img class="rounded-circle" src="../assets/images/dashboard-11/user/3.jpg" alt="user">Sharon C. Obrien
     </a>
     <a class="list-group-item list-group-item-action disabled" href="#!">
       <img class="rounded-circle" src="../assets/images/dashboard-11/user/7.jpg" alt="user">Bryan A. Owens
     </a>
    </div>

##### Scrollable Lists

Use property `overflow:auto` through scrollable lists.

###### Molly Boake

MollyBoake@rhyta.com

f-light

###### Gabrielle Fahey

GabrielleFahey@dayrep.com

10 days ago

###### Lucinda Moseley

LucindaMoseley@teleworm.us

3 days ago

###### Francis K. Henriques

FrancisKHenriques@teleworm.us

2 days ago

###### Jose A. Seay

JoseASeay@rhyta.com

15 days ago

###### Phil F. Cunningham

PhilFCunningham@dayrep.com

6 days ago

###### Richard E. Johnson

RichardEJohnson@teleworm.us

20 days ago

###### Lawrence L. Nash

LawrenceLNash@jourrapide.com

8 days ago

    <div class="list-group main-lists-content scrollbar-wrapper custom-scrollbar">
     <a class="list-group-item list-group-item-action active list-hover-primary" href="#" aria-current="true">
       <div class="list-wrapper gap-0">
         <img class="list-img" src="../assets/images/dashboard-11/user/12.jpg" alt="profile">
         <div class="list-content">
           <h6>Molly Boake</h6>
           <p class="f-light">MollyBoake@rhyta.com</p><small>f-light</small>
         </div>
       </div>
     </a>
     <a class="list-group-item list-group-item-action list-hover-primary" href="#!">
       <div class="list-wrapper gap-0">
         <img class="list-img" src="../assets/images/dashboard-11/user/11.jpg" alt="profile">
         <div class="list-content">
           <h6>Gabrielle Fahey</h6>
           <p class="f-light">GabrielleFahey@dayrep.com</p><small class="f-light">10 days ago</small>
         </div>
       </div>
     </a>
     <a class="list-group-item list-group-item-action list-hover-primary" href="#!">
       <div class="list-wrapper gap-0">
         <img class="list-img" src="../assets/images/dashboard-11/user/10.jpg" alt="profile">
         <div class="list-content">
           <h6>Lucinda Moseley</h6>
           <p class="f-light">LucindaMoseley@teleworm.us</p><small class="f-light">3 days ago</small>
         </div>
       </div>
     </a>
     <a class="list-group-item list-group-item-action list-hover-primary" href="#!">
       <div class="list-wrapper gap-0">
         <img class="list-img" src="../assets/images/dashboard-11/user/9.jpg" alt="profile">
         <div class="list-content">
           <h6>Francis K. Henriques</h6>
           <p class="f-light">FrancisKHenriques@teleworm.us</p><small class="f-light">2 days ago</small>
         </div>
       </div>
     </a>
     <a class="list-group-item list-group-item-action list-hover-primary" href="#!">
       <div class="list-wrapper gap-0">
         <img class="list-img" src="../assets/images/dashboard-11/user/8.jpg" alt="profile">
         <div class="list-content">
           <h6>Jose A. Seay</h6>
           <p class="f-light">JoseASeay@rhyta.com</p><small class="f-light">15 days ago</small>
         </div>
       </div>
     </a>
     <a class="list-group-item list-group-item-action list-hover-primary" href="#!">
       <div class="list-wrapper gap-0">
         <img class="list-img" src="../assets/images/dashboard-11/user/4.jpg" alt="profile">
         <div class="list-content">
           <h6>Phil F. Cunningham</h6>
           <p class="f-light">PhilFCunningham@dayrep.com</p><small class="f-light">6 days ago</small>
         </div>
       </div>
     </a>
     <a class="list-group-item list-group-item-action list-hover-primary" href="#!">
       <div class="list-wrapper gap-0">
         <img class="list-img" src="../assets/images/dashboard-9/user/5.png" alt="profile">
         <div class="list-content">
           <h6>Richard E. Johnson</h6>
           <p class="f-light">RichardEJohnson@teleworm.us</p><small class="f-light">20 days ago</small>
         </div>
       </div>
     </a>
     <a class="list-group-item list-group-item-action list-hover-primary" href="#!">
       <div class="list-wrapper gap-0">
         <img class="list-img" src="../assets/images/dashboard-9/user/1.png" alt="profile">
         <div class="list-content">
           <h6>Lawrence L. Nash</h6>
           <p class="f-light">LawrenceLNash@jourrapide.com</p><small class="f-light">8 days ago</small>
         </div>
       </div>
     </a>
    </div>