Nav-bar tab when click display div card with image inside using bootstrap

See more:

HTML5

bootstrap

Hi Team

I need some help with my nav-bar tab, i want when a tab is clicked it should display a div card next to it from the right hand side. So i got only 3 nav bar tabs want them to do the same each time when clicked there should be a display div card with image inside as well details and description of the item within a div card.

What I have tried:

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#step1">Step 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#step2">Step 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#step3">Step 3</a>
        </li>
      </ul>
    </div>
    <div class="col-sm-8">
      <div class="tab-content">
        <div id="step1" class="tab-pane active">
          <div class="card">
            <img class="card-img-top" src="path/to/image1.jpg" alt="Step 1 Image">
            <div class="card-body">
              <h5 class="card-title">Step 1 Title</h5>
              <p class="card-text">Step 1 Description</p>
            </div>
          </div>
        </div>
        <div id="step2" class="tab-pane">
          <div class="card">
            <img class="card-img-top" src="path/to/image2.jpg" alt="Step 2 Image">
            <div class="card-body">
              <h5 class="card-title">Step 2 Title</h5>
              <p class="card-text">Step 2 Description</p>
            </div>
          </div>
        </div>
        <div id="step3" class="tab-pane">
          <div class="card">
            <img class="card-img-top" src="path/to/image3.jpg" alt="Step 3 Image">
            <div class="card-body">
              <h5 class="card-title">Step 3 Title</h5>
              <p class="card-text">Step 3 Description</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>