Create Showcase Section with Bootstrap Nav-Pills
With nav pills, you can highlight your products, services, or values in an easy-to-use content showcase.
At Solodev, we love effective design -- especially when it comes to showcasing content.
One of our favorite design additions helps highlight content through tabs. Tabbed nav pills can be immensely useful in displaying product features on your site. With tabs, you can make your product information more engaging and organized at the same time. You can fit in more information in a single space preventing the page from increasing in size and forcing the users to scroll more.
Best Practices When Using Tabbed Navigation
It is a good idea to use tabbed sections when you have more than three and less than nine elements, all the elements are related to each other, and you can fit all the elements in a single row or a column. You should make the tabs distinguishable by using a different color or simply putting a border around the selected tab.
To make the information in your tabbed elements more enticing, you can add icons or images that represent your business. Especially adding custom images such as product photos will help demonstrate your product further. Here's how you can implement these tabbed elements on your website:
HTML
The HTML uses Bootstrap's grid and navigational pills to create tabbed navigation:
CSS
Next, we use CSS to adjust our tabs for different screen sizes and to make our tabs distinguishable by giving the active tab a border with shadow. One important thing to pay attention here is our first element is already active when the page loads. We do that by adding a class name of "active" in our HTML code. The most important reason for this is to make it clear to the users that this is a tabbed section so they can click on other tabs to get more information:
Here's the final CSS code:
Here's the result:
Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter
