35 Free Bootstrap Tabs Examples & Templates 2026
We found many great examples of Bootstrap tabs for prototyping.
Since there weren’t any truly reliable solutions we could reuse multiple times, we created our snippets.
What you will find here: 12 tab components we designed in 2026 (vertical, pill, pricing, product, dashboard and code tabs), the uiCookies tab pack, then our multi-step form wizards, where each step of a sign-up, booking or checkout form sits behind its own tab, and three CodePen examples at the end. All Colorlib items are dependency-free HTML, CSS and vanilla JavaScript that work on their own or inside Bootstrap 4, 5 and 6 projects.
We ensured each comes with a user-friendly code, complete responsiveness, and regular updates.
Perfect for beginners but just as amazing for professionals.
Our Bootstrap tabs simplify organizing elements, saving website space, and BOOSTING UX.
You have everything you need for quick execution. Enjoy!
Best Bootstrap Tabs Examples
uiCookies Tab Templates (8 templates)
Eight tab patterns: a sliding underline, a pill segmented control, vertical settings tabs, boxed browser-style tabs, icon tabs with badges, a pure-CSS set that needs no JavaScript at all, dark app tabs, and a set that collapses into an accordion on narrow screens.
That last one solves the problem most tab components ignore, which is what happens when six labels will not fit on a phone. From our own uiCookies library, free download, one self-contained file per design.
Free Colorlib Bootstrap Tabs Snippets
We designed these 12 tab components in 2026. Each follows the WAI-ARIA tabs pattern, so arrow keys, Home and End work, and each is a free download with a live demo.
Tabs V01: Account settings tabs with an animated sliding underline
A settings page for a SaaS workspace with five tabs: General, Team, Billing, Notifications and Integrations. A single underline slides and resizes under the selected tab, and the strip scrolls sideways on small screens. Each panel holds realistic content such as a profile form, a member list, a seat meter and notification switches.
Best for: SaaS account and workspace settings pages. Plain HTML and CSS with a few lines of vanilla JavaScript, a 533 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Tabs V02: Segmented control switching Day, Week and Month analytics
An iOS-style segmented control that switches a store analytics card between Day, Week and Month. Each range has its own headline number, trend chip, bar chart drawn purely in CSS and three summary stats. A white thumb slides behind the selected option.
Best for: dashboards, analytics widgets and report cards. Plain HTML and CSS with a few lines of vanilla JavaScript, a 164 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Tabs V03: Vertical account settings tabs with real forms
A vertical tab sidebar for account settings with Profile, Security, Notifications and Billing sections. Every panel holds a working form with labelled inputs, a switch, radio and checkbox groups or a country select. On phones the sidebar turns into a horizontal, swipeable strip of pill tabs.
Best for: user account, profile and preferences pages. Plain HTML and CSS with a few lines of vanilla JavaScript, a 376 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Tabs V04: Mobile bottom tab bar with icon and label tabs
A phone-sized travel app card with a bottom tab bar for Home, Search, Saved and Profile. Each tab has an inline SVG icon and a label, and the selected one gets a tinted pill and a filled icon. Every screen scrolls on its own, so the bar stays fixed at the bottom.
Best for: mobile app mockups, PWA shells and app landing pages. Plain HTML and CSS with a few lines of vanilla JavaScript, a 387 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Tabs V05: File-folder tabs for a documentation page
Documentation tabs styled as physical file-folder tabs, each in its own paper colour. The selected tab rises and joins the folder, which changes to the same colour, and the content sits on a ruled paper sheet inside. The demo covers quick start steps, installation notes, a configuration table and an API signature.
Best for: product documentation, guides and knowledge bases. Plain HTML and CSS with a few lines of vanilla JavaScript, a 267 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Tabs V06: E-commerce product detail tabs
Product page tabs for Description, Specifications, Reviews and Shipping, placed under a product summary with photo, price and rating. The Specifications tab holds a proper row-header table, Reviews shows the rating breakdown and three customer reviews, and Shipping lists delivery options and the returns policy. A link in the summary opens the Reviews tab directly.
Best for: online shop product pages. Plain HTML and CSS with a few lines of vanilla JavaScript, a 229 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Tabs V07: Monthly / Yearly pricing tabs
A pricing section where a Monthly and Yearly tab switch the prices in three plan cards. Yearly shows the discounted per-month price, the yearly total and a Save 20% badge on every card. Both tabs control the same panel, and a polite live region announces the change for screen reader users.
Best for: SaaS pricing pages and plan comparison sections. Plain HTML and CSS with a few lines of vanilla JavaScript, a 155 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Tabs V08: Scrollable news category tabs with scroll buttons
A newspaper-style front page with thirteen section tabs in a single row that scrolls sideways. Left and right scroll buttons with a soft fade appear only when there is more to see in that direction, and the selected tab is always scrolled into view. Each section shows a lead story and two secondary headlines.
Best for: news sites, blogs and magazines with many categories. Plain HTML and CSS with a few lines of vanilla JavaScript, a 864 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Tabs V09: Dark dashboard status tabs with count badges
Dark project-dashboard tabs that split a sprint's tasks into Open, In progress and Done, each with a coloured status dot and a count badge. Every panel lists tasks with an ID, priority tag, assignee initials and due date. The selected tab lifts out of a recessed track and its badge takes the status colour.
Best for: admin dashboards, issue trackers and project tools. Plain HTML and CSS with a few lines of vanilla JavaScript, a 170 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Tabs V10: FAQ grouped into topic tabs with native accordions
A help-centre FAQ where General, Billing and Account tabs each hold a set of questions. Every answer is a native details and summary element, so it opens and closes with the keyboard and still works with JavaScript turned off. A support card beside the questions offers a way to get in touch.
Best for: help centres, FAQ pages and support sections. Plain HTML and CSS with a few lines of vanilla JavaScript, a 300 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Tabs V11: Gallery filter tabs for a photo grid
Portfolio filter tabs for All, Nature, City and People above a grid of nine square photos. Choosing a tab hides the photos that do not match and a polite live region announces how many are showing. All filter tabs control the same grid panel, so the tabs pattern stays valid.
Best for: portfolios, photography sites and project galleries. Plain HTML and CSS with a few lines of vanilla JavaScript, a 716 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Tabs V12: Code sample tabs with a copy button
A dark code window with index.html, style.css and main.js file tabs, line numbers and syntax colouring done with plain spans. The Copy button copies the active file using the Clipboard API with a textarea fallback, then shows Copied and announces it to screen readers. A rendered preview of the sample component sits beside the code.
Best for: documentation, component libraries and tutorials. Plain HTML and CSS with a few lines of vanilla JavaScript, a 135 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Tabbed Form Wizards
These Colorlib wizards use tabs, or numbered steps that behave like tabs, to split a long form into short stages. Switching steps takes a few lines of vanilla JavaScript and no plugin.
Colorlib Wizard 30
Colorlib Wizard 30 is a highly useful form wizard that organizes the form content into numbered tabs. Instead of taking all the user inputs in one big step, this wizard allows you to accept user inputs in three steps, making the entire process easier for your customer.
There are three tabs for the three steps. The tab icons are numbers indicating the steps. The numbers 1, 2, and 3 indicate the first, second, and third steps, respectively.
This form collects the first and last names in the first step. The next step is revealed when you click the ‘Next Step’ button.
The user can also see a PARTICULAR step by clicking the numbered tabs.
The second tab requires the user to enter an email address and password, while the third tab allows the user to choose a subject and write a comment.
Colorlib Wizard 29
This is a convenient and quick solution if you are looking for a straightforward and modern, free 4-step wizard. It checks each field with the browser’s built-in validation, shown in the design’s own style, and needs no framework.
What’s cool is that you can head over to the live demo preview to test it out on mobile and desktop first and then proceed from there.
The four steps include username, email, password, and password confirmation. However, if you would like to perform any CONFIGURATIONS, by all means, do so.
The structure is very convenient, ensuring every user gets the most out of it.
Colorlib Wizard 27
Colorlib Wizard 27 provides vertical tabs. This amazing form wizard enables you to collect the necessary details from your website users. Three tabs are positioned on the left side of the form.
The user can see the content of each tab by clicking the tabs.
They can also view the content of the next tab by clicking the ‘Next’ button.
The tabs look great due to their excellent design. The color of the text used in the tabs is white, while the background color in the tabs is a variation of blue.
This color combination is visually appealing. The tabs have a special, nice shape.
Colorlib Wizard 26
Colorlib Wizard 26 comes with three horizontal tabs. The tabs appear modern and stylish, and switching between them needs no plugin. When clicked, the content of the tabs appears very smoothly.
The user can also see the content of the next tab by clicking the ‘Next’ button.
The tabs are ‘Personal Info’, ‘Booking’, and ‘Confirm’.
As the tab titles suggest, the first tab collects personal information such as name and phone number. The second tab takes booking information from the user. In contrast, the third tab displays the entered details, including the price, and prompts the user to confirm.
Colorlib Wizard 25
Colorlib Wizard 25 is a great form wizard developed by Colorlib. It gives you three nicely designed tabs. The tab headings are ‘Personal Information’, ‘Bank Information’, and ‘Confirm Details’.
In the ‘Personal Information’ tab, the user is asked to enter personal information such as name, date of birth, etc. When the ‘Bank Information’ tab is opened, the user is asked for bank information.
The ‘Confirm Details’ tab prompts the user to confirm the entered details.
The tab icons use the tick symbol, and the ‘Next’ button uses an array symbol. Instead of showing the word ‘Next,’ an arrow sign indicates the next step.
Colorlib Wizard 24
Colorlib Wizard 24 is an amazing signup form made by Colorlib. This signup form has 4 tabs, a nice example of icon tabs used as form steps.
The tabs represent the category of information COLLECTED from the user in this registration form.
The tabs’ headings have meaningful texts such as ‘About’ and ‘Account’. They also feature meaningful icons, allowing users to understand the content of each tab.
The color of the tab icons changes when they are clicked, making the form visually appealing and improving the user experience.
Colorlib Wizard 23
Colorlib Wizard 23 is one of the best wizards built by Colorlib. It is a signup form with several tabs. It collects various kinds of information from the user in multiple steps, making it easy to provide the necessary details.
There are four tabs in this wizard, each with an appropriate heading and icon. The tab headings are ‘Account’, ‘Personal’, ‘Payment’, and ‘Confirm’. The user can determine the content of each tab by simply looking at the tab headings and icons.
For example, anyone can easily understand just by looking at the tab heading and the icon of the ‘Personal’ tab that personal information must be entered in this tab.
Colorlib Wizard 22
Colorlib Wizard 22 is a form wizard that collects user input in three steps. This wizard has a tab for each step and three tabs. The tab icons are numbers indicating the steps.
The user can go to the next step by clicking the ‘Next Step’ button or the numbered tabs.
The color of the tab icons changes when the next step button or the tab icons are clicked.
The first tab collects personal information, including name, phone number, and email address.
The second tab asks the user to select a location, date, and time.
The third tab allows the user to confirm the entered details.
Colorlib Wizard 21
Another modern and simple-to-integrate free tabbed wizard that you can fine-tune and alter to your needs. It comes with a gradient background by default, but you can go behind the scenes and edit it.
In short, while you can work with the free wizard as is, you can tailor it to your needs.
The snippet features three steps for account, payment, and information confirmation. It also includes several predefined fields that will save you additional time.
The responsive layout also ensures the 3-step process works great on different screen sizes.
Colorlib Wizard 20
Colorlib Wizard 20 is an excellent registration form developed by Colorlib. It features three tabs that enable easier account creation, and the whole download is only 31 KB.
Through this form wizard, your website visitors can create an account in three easy steps.
The tab icons look very stylish. The tab headings are ‘Account Setup’, ‘Social Profiles’, and ‘Personal Details’. You can change everything in this registration form. If required, you can change the tab headings.
You can also MODIFY the input fields. If you do not require all the input fields in this form, you can remove the unnecessary ones.
Colorlib Wizard 19
Colorlib Wizard 19 is another great form wizard. It includes three tabs, making it easy for your users to register on your site, and its drop-downs are real select menus, so their values are sent with the form.
As the required information is collected in three small steps, it becomes easier for the users to provide their details.
The tab headings reflect the categories of required inputs, so users can understand what information needs to be entered in each tab.
Your website visitors can see the content of a particular tab by clicking on the tab headings. They can also navigate between the tabs by clicking the ‘NEXT’ and ‘PREV’ buttons.
Colorlib Wizard 15
Colorlib Wizard gives you three vertical tabs. The tabs are positioned to make it convenient for users to click on a particular tab and view its content.
Appropriate icons and meaningful headings have been used for the tabs, allowing users to understand what each tab contains. The ‘Personal Info’ tab will prompt the user to enter personal details, such as name, email address, and phone number.
The numbers in the tab icons indicate the steps. The tab with the number 1 indicates to the user that this is the first step.
Colorlib Wizard 14
Colorlib Wizard 14 is a powerful form wizard that you can use as a registration form on your website. This form allows visitors to register with your company or website.
The title of the form is ‘BUILD YOUR PROFILE’. You can change this title to something more appropriate for you.
The background color of the page is a variation of light green.
This wizard provides three tabs with the headings ‘About’, ‘Account’, and ‘Address’. Each tab collects a particular type of information from the user. You can change the tab headings if you need to collect other information from your user.
Colorlib Wizard 11
Colorlib Wizard 11 is another good example of a form wizard built around tabs. This form has four tabs. This form wizard does not allow the user to proceed to the next tab or view another tab without completing the form in the first tab.
Therefore, if a user wants to proceed to the next tab, they must complete all the required fields in the first tab.
Similarly, when the user is on the second tab, they cannot proceed to the next or last tab without completing the required fields.
This is a nice feature that allows your users to create an account using this form systematically.
Colorlib Wizard 8
Colorlib Wizard 8 comes with four tabs. The tabs’ design is amazing. The tab headings are ‘step 01’, ‘step 02’, and so on. Each tab has an INTERESTING icon.
This form wizard is ideal for you if you have an online store that sells fruits.
The first step is to enter the buyer’s basic details, such as name, email address, and country. The second step prompts the user to change their current password. The third step takes your customer to their cart. The final step shows cart totals and tells the customer to check out.
Colorlib Wizard 5
Colorlib Wizard 5 is a fantastic form wizard developed by Colorlib. In this form, the user can only see the heading of the currently opened tab. It has four tabs, and the step switching runs on a few lines of vanilla JavaScript.
The user can see their headings only when those tabs are active. In other words, they can see the tab headings when the tabs are opened. He/she cannot see the headings of inactive tabs.
This has simplified the entire form. This kind of minimal design looks VERY cool. Use it on your website, and it will impress your customers.
Colorlib Wizard 3
Colorlib Wizard 3 has tabs with stylish icons. Take a look at this form wizard. It looks amazing. If you like it, you can use it on your website. It’s free, and you can also modify the code.
You can make changes according to your requirements and preferences, including changing the photo. This form is fully customizable, like any other form mentioned in this blog post.
To view more information about this form wizard or download it, click the ‘more info/download’ button below. To preview this wizard, click the ‘demo’ button below.
Colorlib Wizard 2
Colorlib Wizard 2 will be the right fit if you’re developing a hotel website for your client or yourself. This form will allow customers to book rooms.
The steps to make a reservation are provided in different tabs in this form.
There are four vertical tabs. The user is asked to enter details in each tab and choose from various options. The final tab tells the user to confirm their choices and the entered details.
The tabs BREAK DOWN the entire reservation process into small, easy steps.
This tab template could be a great companion to these hotel WordPress themes.
Colorlib Wizard 1
Colorlib Wizard 1 is a cool registration form wizard developed by Colorlib. This registration form has three tabs, and the steps work without a plugin.
Once the user fills out the fields in the first tab, they must click the ‘Forward’ button to go to the next tab.
The user can also navigate to the next tab by clicking its icon.
Each tab has a meaningful title that instructs the user on what to do. For example, the first tab’s title is ‘Please fill in your details instructing the user to enter their details.
Bonus Free Bootstrap Tabs
Bootstrap Tabs by Boomer
Bootstrap tabs by Boomer are a pretty advanced example of Bootstrap tabs. It’s advanced because it features nested tabs, which are tabs within other tabs. Nested tabs are useful in some cases but not always.
Nested tabs make your website complex. You should avoid this kind of complexity, but in some cases, using nested tabs is simply the best option.
This tab sample provides 4 main tabs with the titles ‘Home’, ‘Profile’, ‘Messages’, and ‘Settings’. There are secondary tabs under the ‘Home’ tab with the headings ‘option 1’ and ‘option 2’.
You can easily change the tab headings at any time from the code.
Bootstrap Tab + jQuery Validate by Gabriel Buzzi Venturi
Gabriel Buzzi Venturi have developed this Bootstrap tab example. This example has two tabs, with‘ Contact Information’ and ‘Address Information’.
In the ‘Contact Information’ tab, the user has to enter his/her name and email address, while in the ‘Address Information’ tab, the user’s address has to be entered.
In the second tab, the user must enter their zip code, address, and city name.
This is just a template, using which you can save some time, but you have to modify many things in this template to make it appropriate for your website.
Bootstrap Tab/Collapse by Ivan Melgrati
This Bootstrap tab template has five vertical tabs. Ivan Melgrati has created this pen.
As this is a fully customizable Bootstrap template, you can change anything in this example of the Bootstrap tab. If you do not require five tabs, you can remove one or more.
And if you think you need more tabs, you can add more from the code. You can change the design and change the content of each tab to meet your requirements. See the code of this template and MODIFY it as per your preferences.
By modifying the code, you can change every aspect of this template.
This post provides a list of the best Bootstrap tabs examples and tabbed form wizards. Although there are many examples of Bootstrap tabs available on the Internet, I have mentioned the best templates. I hope you have found this list useful.
Related Posts
Comments (0)