An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Some of Our Sources
- Slashdot
- Mashable
- Technology Review
- Six Revisions
- Naldz Graphics
- Line 25
- Specky Boy
- Spyre Studios
- Android Dissected
- Dev To
Help Webnuz
Referal links:
Bootstrap 5 horizonal scrolling tabs
More than once, we need to add several tabs to our websites/apps to split the UI nicer. However, when there are more than 4, they might not look so great, especially in mobile environments.
I faced the experience that I needed to add 4 tabs, and my app started to show a second row in some devices. This didn't look great:
That's why I did research and found this great code for Bootstrap 4:
https://www.codeply.com/go/Loo3CqsA7T
It didn't work as expected because it depended on jQuery, and I was using Bootstrap 5. I didn't want to add just one extra layer for that. That's why I re-wrote it with JS, and this is the result:
This is a snippet of the required code:
Required libraries:
<!--Bootstrap icons--><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css"><!--External library--><script src="https://raw.githubusercontent.com/SupernovaIC/scrollable-tabs-bootstrap-5/main/move.min.js"></script><!--https://visionmedia.github.io/move.js/--><!--Scrollable libs--><link href="scrollable-tabs.css" rel="stylesheet"><script src="scrollable-tabs.js"></script>HTML example:
<div class="w-100"> <div class="scroller scroller-left float-start mt-2"><i class="bi bi-caret-left-fill"></i></div> <div class="scroller scroller-right float-end mt-2"><i class="bi bi-caret-right-fill"></i></div> <div class="wrapper-nav"> <nav class="nav nav-tabs list mt-2" id="myTab" role="tablist"> <a class="nav-item nav-link pointer active" data-bs-toggle="tab" data-bs-target="#tab1" role="tab" aria-controls="public" aria-selected="true">Tab1</a> <a class="nav-item nav-link pointer" data-bs-target="#tab2" role="tab" data-bs-toggle="tab">Tab 2</a> <a class="nav-item nav-link pointer" data-bs-target="#tab3" role="tab" data-bs-toggle="tab">Tab 3</a> <a class="nav-item nav-link pointer" data-bs-target="#tab4" role="tab" data-bs-toggle="tab">Tab 4</a> <a class="nav-item nav-link pointer" data-bs-target="#tab5" role="tab" data-bs-toggle="tab">Tab 5</a> <a class="nav-item nav-link pointer" data-bs-target="#tab6" role="tab" data-bs-toggle="tab">Tab 6</a> </nav> </div> <div class="tab-content p-3" id="myTabContent"> <div role="tabpanel" class="tab-pane fade active show mt-2" id="tab1" aria-labelledby="public-tab" > This is the content of Tab 1... </div> <div class="tab-pane fade mt-2" id="tab2" role="tabpanel" aria-labelledby="group-dropdown2-tab" > This is the content of Tab 2... </div> <div class="tab-pane fade mt-2" id="tab3" role="tabpanel" aria-labelledby="group-dropdown2-tab" > This is the content of Tab 3... </div> <div class="tab-pane fade mt-2" id="tab4" role="tabpanel" aria-labelledby="group-dropdown2-tab" > This is the content of Tab 4... </div> <div class="tab-pane fade mt-2" id="tab5" role="tabpanel" aria-labelledby="group-dropdown2-tab" > This is the content of Tab 5... </div> <div class="tab-pane fade mt-2" id="tab6" role="tabpanel" aria-labelledby="group-dropdown2-tab" > This is the content of Tab 6... </div> </div></div>I published it in GitHub if you want to improve it:
https://github.com/SupernovaIC/scrollable-tabs-bootstrap-5
You can also test it here:
Original Link: https://dev.to/fanmixco/bootstrap-5-horizonal-scrolling-tabs-5bgc
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To