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: 3 months 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 (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-19T06:59:15.000Z (7 months ago)
• Last Synced: 2025-02-04T22:35:06.131Z (4 months 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: 348 KB
• Stars: 19
• 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`

|Latest Release|Downloads|

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

|[![npm version](https://img.shields.io/npm/v/scrolling-tabs-bootstrap-5)](https://www.npmjs.com/package/scrolling-tabs-bootstrap-5)|[![NuGet Badge SpotsDialog.Xamarin](https://img.shields.io/npm/dt/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)|