How to usenav-tabs in Bootstrap
These are the following classes we have used in the code to make the card with tabs:
- container: This class is used to create a responsive fixed-width container to hold the content. It helps to keep the content centered and consistent across different screen sizes.
- nav: It creates a navigation list.
- nav-tabs: This class styles the navigation list to appear as tabs.
nav-link.active: This class is used to style the active tab link. - tab-content : This class is used to contain the content for the tabs.
- tab-pane fade: This class is applied to each tab content div to create a fade effect when switching between tabs.
- show: This class is used to make the content visible.
- active: This class indicates that the content is the active tab.
Example: This example shows the implementation of the above-explained all classes.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Bootstrap Tabs Example</ title > <!-- Bootstrap CSS --> < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel = "stylesheet" > <!-- Bootstrap Bundle JS --> < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" > </ script > < style > /* Override Bootstrap's link active state styles */ .nav-link { color: #fff !important; } .nav-link.active{ color: rgb(42, 165, 73) !important; background-color: aliceblue !important; } </ style > </ head > < body > < div class = "container mt-5" > < h2 class = "text-center text-success" > w3wiki Navigation Tabs Example </ h2 > < ul class = "nav nav-tabs justify-content-center bg-success" id = "myTab" role = "tablist" > < li class = "nav-item" > < a class = "nav-link active" id = "home-tab" data-bs-toggle = "tab" href = "#home" role = "tab" aria-controls = "home" aria-selected = "true" > Home </ a > </ li > < li class = "nav-item" > < a class = "nav-link" id = "profile-tab" data-bs-toggle = "tab" href = "#profile" role = "tab" aria-controls = "profile" aria-selected = "false" > About Us </ a > </ li > < li class = "nav-item" > < a class = "nav-link" id = "contact-tab" data-bs-toggle = "tab" href = "#contact" role = "tab" aria-controls = "contact" aria-selected = "false" > Contact Us </ a > </ li > </ ul > < div class = "tab-content mt-3" id = "myTabContent" > < div class = "tab-pane fade show active" id = "home" role = "tabpanel" aria-labelledby = "home-tab" > < h3 class = "text-center text-success" >Home Content</ h3 > < strong class = "text-success" > Company Profile and Brand </ strong >< br > w3wiki is a leading platform that provides computer science resources and coding challenges for programmers and technology enthusiasts, along with interview and exam preparations for upcoming aspirants. With a strong emphasis on enhancing coding skills and knowledge, it has become a trusted destination for over 12 million plus registered users worldwide. < br /> Our exceptional mentors hailing from top colleges & organizations have the ability < br /> Our brand is built on the pillars of expertise, accessibility, and community. We strive to empower individuals to enhance their programming skills, to bridge the gap between academia and industry, and provide a supportive community to the learners. </ p > < a href = Visit w3wiki </ a > </ div > < div class = "tab-pane fade" id = "profile" role = "tabpanel" aria-labelledby = "profile-tab" > < h3 class = "text-center text-success" > Aboutus Content</ h3 > < p >This is the content of the Aboutus tab.</ p > </ div > < div class = "tab-pane fade" id = "contact" role = "tabpanel" aria-labelledby = "contact-tab" > < h3 class = "text-center text-success" > Contactus Content</ h3 > < p >This is the content of the Contactus tab.</ p > </ div > </ div > </ div > </ body > </ html > |
Output:
How to Create a Card with Tabs & Content in Bootstrap 5 ?
We will create a Card with Tabs and content in Bootstrap 5. Bootstrap 5 Cards refers to a user interface where related information is organized into individual cards that can be interacted with and rearranged for easy viewing and access. The individual cards are known as tabs. This approach is commonly used in mobile app design and website design for a visually appealing and organized way of presenting information.
The card is a component provided by Bootstrap 5 which provides a flexible and extensible content container with multiple variants and options. It includes options for headers and footers. Cards support a wide variety of content, including images, text, list groups, links, and more.
Contact Us