Bootstrap 4 Vertical Nav Tabs Snippet

Code Snippet Preview

View Demo View CodePen




Using the Bootstrap 4 grid classes and some HTML markup, we can change the default layout of tabs to be vertical. I also changed the style of the tabs to pills.

Related resources

  • WordPress vs HubSpot CMS Review
  • 25+ Questions to Ask Before Redesigning Your Business Website
  • 5 Things A Business Should Consider Before a Website Redesign
  • How to Quickly Create a Website for B2B Company
  • HubSpot Custom Modules Marketplace
  • Buy HubSpot Modules in Bulk

    • What is Bootstrap?

    Bootstrap is a free, open-source collection of tools (HTML, CSS, and JavaScript) that provides pre-built styles and components for designing and developing responsive websites. It's particularly popular among both beginners and experienced developers due to its simplicity, speed, and flexibility.

    ©2025 Bootstrap Creative LLC - Created and maintained by Jake Lett