Skip to main content

Creating Stylish Horizontal Tabs with Bootstrap 4


In web development, user-friendly navigation and a visually appealing layout are crucial for engaging and retaining website visitors. Horizontal tabs are a popular choice for organizing content in an easily accessible manner, and Bootstrap 4 simplifies the process of creating these tabs. In this blog post, we'll explore how to design sleek horizontal tabs using Bootstrap 4.








HTML Structure

<div class="container mt-4"> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a> </li> </ul> <div class="tab-content"> <div id="tab1" class="tab-pane active"> <h3>Tab 1 Content</h3> <p>This is the content of Tab 1.</p> </div> <div id="tab2" class="tab-pane"> <h3>Tab 2 Content</h3> <p>This is the content of Tab 2.</p> </div> <div id="tab3" class="tab-pane"> <h3>Tab 3 Content</h3> <p>This is the content of Tab 3.</p> </div> </div> </div>

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Digital World

In the modern era, we find ourselves immersed in a digital world. Technology has transformed the way we live, work, communicate, and explore. From the convenience of online shopping to the vast knowledge at our fingertips, the digital realm has become an integral part of our daily lives. In this blog, we will explore the various aspects of the digital world, its impact on society, and the opportunities it presents for individuals and businesses alike.   The Power of Connectivity: The digital world has connected us in ways unimaginable just a few decades ago. Social media platforms enable us to bridge distances and connect with friends, family, and even strangers across the globe. Instant messaging and video calls have made communication seamless, fostering relationships and collaborations beyond borders. This connectivity has brought us closer together and expanded our horizons.   Access to Information and Knowledge: The internet has revolutionized access to info...
Post a Comment
Read more

Little Digital Dreams: Where Learning Meets Fun – The Ultimate YouTube Channel for Kids!

  In today’s digital age, finding safe, educational, and entertaining content for kids can feel like searching for a needle in a haystack. Enter  Little Digital Dreams  – a YouTube channel designed to spark curiosity, nurture creativity, and make learning an adventure for children! If you’re a parent, guardian, or educator looking for wholesome screen time that combines fun with foundational skills, you’ve just found your go-to resource. Let’s dive into why  Little Digital Dreams  is the channel your child will love—and why you’ll love it too! What Makes  Little Digital Dreams  Special? This channel isn’t just another collection of random cartoons. Every video is crafted with care to ensure kids are  learning, laughing, and growing . Here’s what you’ll find: Enchanting Kids’ Cartoon Videos From magical fairy tales to playful animal adventures, our animated stories are packed with vibrant visuals and relatable characters. These cartoons aren’t just...
Post a Comment
Read more

Bootstrap 5 Carousel Code

  <!-- Carousel --> < div  id ="demo"  class ="carousel slide"  data-bs-ride ="carousel" >    <!-- Indicators/dots -->    < div  class ="carousel-indicators" >      < button  type ="button"  data-bs-target ="#demo"  data-bs-slide-to ="0"  class ="active" > < /button >      < button  type ="button"  data-bs-target ="#demo"  data-bs-slide-to ="1" > < /button >      < button  type ="button"  data-bs-target ="#demo"  data-bs-slide-to ="2" > < /button >    < /div >    <!-- The slideshow/carousel -->    < div  class ="carousel-inner" >      < div  class ="carousel-item active" >        < img  src ="la.jpg"  alt ="Los Angeles"  class ="d-block w-100" ...
Post a Comment
Read more