Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How To Use Vertical Tabs to Enhance Your Case Study Content

With Bootstrap, you can create sleek vertical tabs that provide a more dynamic, well-organized UX for featuring your case study content.

We love using tabs to organize web content. It's a simple, elegant way to make the customer experience on a page more engaging. Oh, and increase conversions.

In a previous post, we showed you how to create tabbed nav pills to highlight different product features. In this article, we'll show you how to use vertical Bootstrap tabs to create a killer case study experience on your website, so you can take your bragging rights to the next level.

Case studies are the "proof in the pudding." Companies of all sizes – and across industries – rely on them as a critical part of their sales and marketing strategies. Case studies are like gold because they give your prospects an overview of successful customer experiences with real-world examples, and this helps inspire trust.

Whether you're a developer showing off your latest project, or a business sharing a complex solution, it's important to provide context with your creations. Having succinct, well-written case studies on your website can provide essential details around your products, services, and expertise – and allow you to dive deeper into the process and demonstrate your innovative thinking. All stuff that makes a customer more inclined to buy from you.

And let's not forget: by sharing case studies online, you're making it easier for prospects to find, read and learn about what you sell... even when you're not there to sell them.

Writing Good Case Studies

Most case studies follow a similar pattern, outlining the challenge, solution, and results for a real customer. You can organize relevant content around your audience to reflect their journey and segment by industry, roles, or even products. There's lots of room to customize, as long as you're providing these key ingredients.

While you're here, we've got a few more pointers for making your case study content more impactful:

Try writing your case studies in an approachable manner and resist the urge to get too technical.
Talk about specific customer outcomes, ROI, or alignments with KPIs.
Provide only the essential customer information and, if possible, link to the live website or project.
Don't forget the role of SEO – a little keyword research can go a long way.
Ask your customer for a quote or validation, and remember to get their input and permission to use your case study.
Selecting strong case studies for your website should be about quality, not quantity, but 3-5 is a good place to start.

Remember that one really good case study can cover a lot of ground, especially if it reinforces your company's mission and vision. And while some case studies may call for longer-form content, no one wants to read War and Peace. Tabs can help with this by keeping the essentials composed on a single page – and you can always link to deeper content as needed.

The example below will give you the code and direction for building your own case study with three links: Opportunity, Solution, and Success (feel free to change these titles). By clicking on each tab, you'll be able to surface new content without leaving the page. The result is fun, interactive, and takes the UX to another level.

I think we've made our case. Have fun building.

Getting Started

The CDN links below are links to all the Bootstrap files. Go ahead and place them in your project's file inside the head tag:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

HTML

The HTML below features two main parts: A ul list that contain the tab links and the corresponding tab content. We have used "opportunity", "solution", and "success". Feel free to change the names of the tab links for your website and switch out the content inside the tabs:

<div class="container">
  <div class="row">
    <div class="tabs-wrapper mt-5 mb-5">
      <div class="row">
        <div class="col-md-3">
          <ul class="nav nav-tabs normal-tabs-nav text-center-sm" role="tablist">
            <li class="active" role="presentation">
              <a onclick="documentTrack('#opportunity');" aria-controls="opportunity" data-toggle="tab" href="#opportunity" role="tab">Opportunity</a>
            </li>
            <li class="" role="presentation">
              <a onclick="documentTrack('#solution');" aria-controls="solution" data-toggle="tab" href="#solution" role="tab">Solution</a>
            </li>
            <li class="" role="presentation">
              <a onclick="documentTrack('#success');" aria-controls="success" data-toggle="tab" href="#success" role="tab">Success</a>
            </li>
          </ul>
        </div>
        <div class="col-md-8">
          <div class="tab-content normal-tabs-content">
            <div class="tab-pane active fade in" id="opportunity" role="tabpanel">
              <h2>
                At LunarXP, we’re dreamers and explorers. We’ve always looked up for purpose – and we’ve never looked back. As a company, we believe that the future of mankind lies beyond earth and in the stars.
              </h2>
              <p>
                Our fleet of advanced spacecraft have revolutionized the lunar economy and provided safe travel for thousands of scientists, engineers, technicians, medical staff and civilians. These amazing vessels are also paving the way for reaching Mars in the next decade.
              </p>
              <p>
                Lorem Ipsum is the standard filler text used in design throughout the world. It’s been the standards since the 1500’s and it’s time for an update. The NASA OpenGov team took the opportunity at Science Hack Day to create a new online tool to generate filler text based on a database of historical space quotes. The project serves as an example of what can be done to utilize historic NASA data and mash it up in a new and exciting way.
              </p>
            </div>
            <div class="tab-pane fade" id="solution" role="tabpanel">
              <h2>
                LunarXP introduced different types of spacecraft to make transportation more efficient
              </h2>
              <ul>
                <li>Valkyrie-1: medium-sized lift and reentry vehicles designed for ground-to-orbit escape velocity and safe, reusable landings on both the earth and the moon
                </li>
                <li>Lunar XPlorer: space-based container vessels capable of moving large quantities of people and supplies ??from earth orbit to lunar orbit
                </li>
                <li>Talon-2: small, low-altitude atmospheric vehicles designed for lunar takeoff, landing and internship transport
                </li>
              </ul>
            </div>
            <div class="tab-pane fade" id="success" role="tabpanel">
              <h2>
                LunarXP has won a prestigious award for its participation in a variety of cosmic explorations.
              </h2>
              <p>(Cape Canaveral, FL) LunarXP, the leader in moon exploration and colonization, is proud to announce that it is the recipient of the prestigious "Space Innovator of the Year" Award. This marks the third year in a row that the private interstellar travel and resource development organization has received the distinction.</p>

              <blockquote>"We're thrilled to be honored by the international space community once again this year," said Shane Morrison, Chief Space Officer of LunarXP and commander of the moon-based container fleet. "This company was founded on a dream: to explore the stars. Together, we've been able to make that dream a reality and turn this mission into a commercially viable enterprise. We look forward to continuing our exploration to Mars and beyond in the coming years."</blockquote>

              <p>LunarXP is running daily flights from Cape Canaveral, FL and San Jose, CA to the orbiting XPlatform, where multiple Lunar XPlorer vessels ferry passengers to a growing number of lunar habitats. LunarXP is currently hiring specialists in a number of key areas for part- and full-time employment in their permanent moon settlements.</p>

              <p>"Not only is LunarXP exploring new worlds, but our scientists are developing new technologies that are impacting the earth's reliance on fossil fuels and renewable energy sources," said Morrison. "We're mining new types of metals and minerals that have unlimited applications across industries. We excited to be sharing our discoveries with the world."</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

In the CSS code below, we set the necessary properties of elements sich as the text alignment and the display properties. Feel free change the values of the colors, font size and family to match with your own website style:

.tabs-wrapper {
    border-bottom: none;
    border-top: none;
    margin-bottom: 0;
    margin-top: 60px;
    padding-bottom: 0;
    padding-top: 0;
  }
  
  .row {
    margin-right: -15px;
    margin-left: -15px;
  }
  
  .nav-tabs {
    border: none;
  }
  
  .nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }
  
  .nav-tabs > li {
    margin: 20px;
    text-align: right;
    margin-right: 0;
    float: none;
    width: 100%;
  }
  
  .nav-tabs > li > a {
    border-right: 6px solid #d2d3d4;
    padding: 0;
    padding-right: 15px;
    font-size: 1.2rem;
    line-height: 35px;
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
    transition: color 0.2s ease-in-out;
    position: relative;
    display: block;
    text-align: right;
    margin-right: 0;
  }
  
  .nav-tabs >li.active a,
  .nav-tabs > li a:hover,
  .nav-tabs > li.active a:focus,
  .nav-tabs > li.active a:hover {
    border: none;
    border-right: 6px solid #d2282e;
    text-decoration: none;
  }

  .nav-tabs > li a:hover,
  .nav-tabs > li.active a:focus,
  .nav-tabs > li.active a:hover {
    color: #d2282e;
  }
  
  .normal-tabs-content {
    margin-top: 15px;
  }
  
  #opportunity h2,
  #success h2,
  #solution h2 {
    font-weight: 800;
    font-size: 1.8rem;
    margin-top: 0;
    color: #3d3d3d;
    margin-bottom: 32px;
  }
  
  .fade.in {
    opacity: 1;
  }
  
  blockquote {
    margin: 1rem 0 1rem 1rem;
    border-left: 2px solid #3d5d6f;
    padding-left: 1rem;
  }
  
  @media screen and (max-width: 991px) {
  
    .normal-tabs-nav.nav-tabs > li,
    .normal-tabs-nav.nav-tabs > li a,
    .normal-tabs-nav.nav-tabs > li a:hover,
    .normal-tabs-nav.nav-tabs > li a:focus {
      display: block;
      text-align: center;
      width: 100%;
      margin: 4px auto;
      border-right: 0;
    }

    .col-md-3, .col-md-8 {
      display: block;
      flex: 0 0 100%;
      max-width: 100%;
    }
  }

And there it is! Check out the JSFiddle example below to see how it looks before committing to its use:

How To Use Vertical Tabs to Enhance Your Case Study Content

Writing Good Case Studies

Getting Started

HTML

CSS

Sign up to explore