Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/supernovaic/scrollable-tabs-bootstrap-5

A simple plugin to create scrollable tabs with Bootstrap 5.
https://github.com/supernovaic/scrollable-tabs-bootstrap-5

bootstrap bootstrap-5 bootstrap-plugin bootstrap-tabs bootstrap5 css3 javascript movejs scrollable-tab

Last synced: about 1 month ago
JSON representation

A simple plugin to create scrollable tabs with Bootstrap 5.

Host: GitHub
URL: https://github.com/supernovaic/scrollable-tabs-bootstrap-5
Owner: SupernovaIC
License: apache-2.0
Created: 2022-01-07T07:22:49.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2024-08-25T08:13:25.000Z (3 months ago)
Last Synced: 2024-10-10T09:06:13.305Z (about 1 month ago)
Topics: bootstrap, bootstrap-5, bootstrap-plugin, bootstrap-tabs, bootstrap5, css3, javascript, movejs, scrollable-tab
Language: HTML
Homepage: https://supernovaic.github.io/scrollable-tabs-bootstrap-5/
Size: 343 KB
Stars: 16
Watchers: 1
Forks: 5
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        # Scrollable Tabs for Bootstrap 5

A simple plugin to create scrollable tabs with Bootstrap 5.

[![preview][1]][1]

## Support me:

[![sponsor me][2]](https://www.buymeacoffee.com/fanmixco)

## Usage:

## Breaking change from 1.1.0+:

To allow more than one set of tabs, it required to add a new class to wrap the tabs `tab-wrapper`. It must be added to use it.

### Install:

- [Download the latest release](https://github.com/SupernovaIC/scrollable-tabs-bootstrap-5/archive/refs/tags/v1.1.0.zip)

- Install with [npm](https://www.npmjs.com/): `npm i scrolling-tabs-bootstrap-5`

[![npm version](https://img.shields.io/npm/v/scrolling-tabs-bootstrap-5)](https://www.npmjs.com/package/scrolling-tabs-bootstrap-5)

### Required libraries:

```html

```

### HTML example:

```html



    

    

    

        

            Tab1

            Tab 2

            Tab 3

            Tab 4

            Tab 5

            Tab 6

        

    

    

        

            This is the content of Tab 1...

        

        

            This is the content of Tab 2...

        

        

            This is the content of Tab 3...

        

        

            This is the content of Tab 4...

        

        

            This is the content of Tab 5...

        

        

            This is the content of Tab 6...

        

    



```

**Based on:**

https://www.codeply.com/go/Loo3CqsA7T

  [1]: preview.gif

  [2]: https://raw.githubusercontent.com/FANMixco/Xamarin-SearchBar/master/bmc-rezr5vpd.gif

## Follow me on

|  LinkedIn  |YouTube|Amazon|Goodreads|Instagram|Cyber Prophets|Sharing Your Stories|TikTok|

|:----------|:------------:|:------------:|:------------:|:------------:|:------------:|:------------:|:------------:|

|[![LinkedIn](https://i.sstatic.net/idQWu.png)](https://www.linkedin.com/in/federiconavarrete)|[![YouTube](https://i.sstatic.net/CFPMR.png)](https://youtube.com/@FedericoNavarrete)|[![Amazon](https://i.sstatic.net/NFOeE.png)](https://www.amazon.com/Federico-Navarrete/e/B08NJTXQRV)|[![Goodreads](https://i.sstatic.net/oBk0g.jpg)](https://www.goodreads.com/author/show/21125413.Federico_Navarrete)|[![Instagram](https://i.sstatic.net/PIfqY.png)](https://www.instagram.com/federico_the_consultant)|[![RedCircle Podcast](https://i.sstatic.net/4XICF.png)](https://redcircle.com/shows/cyber-prophets)|[![RedCircle Podcast](https://i.sstatic.net/4XICF.png)](https://redcircle.com/shows/sharing-your-stories)|[![TikTok](https://i.sstatic.net/pP7X2.png)](https://www.tiktok.com/@federicostories)|