title: how to let only one side column to work as tabbed content Bootstrap 3.?
body: <p>I have tried to make tabbed content using bootstrap it works when i used it in single column but when i made one side column globally to be present on page always when tab be change only right side column content can be change. </p>
  
  <p>Here is my Code. </p>
  
  <pre><code>&lt;div class="container" &gt;
  &lt;div class="row"&gt;
  &lt;ul class="nav nav-pills nav-centered img-tab"&gt;
    &lt;li class="active"&gt;&lt;a data-toggle="pill" href="#home"&gt; &lt;i class="cooking"&gt;&lt;/i&gt; &lt;br&gt;
      Cooking&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-toggle="pill" href="#menu1"&gt; &lt;i class="wrtiting"&gt;&lt;/i&gt; &lt;br&gt;
      Reading Writing&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-toggle="pill" href="#menu2"&gt; &lt;i class="cooking"&gt;&lt;/i&gt; &lt;br&gt;
      volunteering&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-toggle="pill" href="#menu3"&gt; &lt;i class="sports"&gt;&lt;/i&gt; &lt;br&gt;
      Sports&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-toggle="pill" href="#menu4"&gt; &lt;i class="art"&gt;&lt;/i&gt; &lt;br&gt;
      Art&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-toggle="pill" href="#menu5"&gt; &lt;i class="music"&gt;&lt;/i&gt; &lt;br&gt;
      Music&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-lg-3 form-bg"&gt;
    &lt;form class="filter-form"&gt;
      &lt;div class="input-group search-input"&gt;
        &lt;input id="search" type="text" class="form-control" name="search" placeholder="Search"&gt;
        &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/span&gt; &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="s-label"&gt;SELECT PERIOD&lt;/label&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
            &lt;input type="date" id="fdatepicker" class="form-control width100 d-widthf" placeholder="From"&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
            &lt;input type="date" id="datetimepicker4" class="form-control d-widthl" placeholder="To"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-12"&gt;
          &lt;label class="s-label"&gt;FILTER BY DAY OF THE WEEK&lt;/label&gt;
          &lt;label class="checkbox-inline"&gt;
          &lt;input type="checkbox" class="d-check" /&gt;
          &lt;label for="days"&gt;&lt;/label&gt;
          &lt;/label&gt;
          &lt;label class="checkbox-inline"&gt;
          &lt;input type="checkbox" class="d-check" /&gt;
          &lt;label for="days"&gt;&lt;/label&gt;
          &lt;/label&gt;
          &lt;label class="checkbox-inline"&gt;
          &lt;input type="checkbox" class="d-check" /&gt;
          &lt;label for="days"&gt;&lt;/label&gt;
          &lt;/label&gt;
          &lt;label class="checkbox-inline"&gt;
          &lt;input type="checkbox" class="d-check" /&gt;
          &lt;label for="days"&gt;&lt;/label&gt;
          &lt;/label&gt;
          &lt;label class="checkbox-inline"&gt;
          &lt;input type="checkbox" class="d-check" /&gt;
          &lt;label for="days"&gt;&lt;/label&gt;
          &lt;/label&gt;
          &lt;label class="checkbox-inline"&gt;
          &lt;input type="checkbox" class="d-check" /&gt;
          &lt;label for="days"&gt;&lt;/label&gt;
          &lt;/label&gt;
          &lt;label class="checkbox-inline"&gt;
          &lt;input type="checkbox" class="d-check" /&gt;
          &lt;label for="days"&gt;&lt;/label&gt;
          &lt;/label&gt;
          &lt;br&gt;
          &lt;label class="label-inline"&gt; MO &lt;/label&gt;
          &lt;label class="label-inline"&gt; TU &lt;/label&gt;
          &lt;label class="label-inline"&gt; WE &lt;/label&gt;
          &lt;label class="label-inline"&gt; TH &lt;/label&gt;
          &lt;label class="label-inline"&gt; FR &lt;/label&gt;
          &lt;label class="label-inline"&gt; SA &lt;/label&gt;
          &lt;label class="label-inline"&gt; SU &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-12 text-center"&gt;
            &lt;input type="submit" value="Search" class="search-btn"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="tab-content"&gt;
    &lt;div id="home" class="tab-pane active"&gt;
      &lt;div class="col-lg-9"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-3 "&gt;
            &lt;div class="post-image"&gt; &lt;img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu"&gt;
              &lt;div class="caption post-content"&gt; &lt;a href="activity-detail.html"&gt;
                &lt;h4&gt;Enter Title Here&lt;/h4&gt;
                &lt;/a&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
                &lt;div class="date"&gt; &lt;a href="#"&gt;&lt;i class="fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt; Dubai&lt;/a&gt; &lt;a href="#"&gt;&lt;i class="fa fa-calendar" aria-hidden="true"&gt;&lt;/i&gt; Flexible Dates&lt;/a&gt; &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-3 "&gt;
            &lt;div class="post-image"&gt; &lt;img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu"&gt;
              &lt;div class="caption post-content"&gt; &lt;a href="activity-detail.html"&gt;
                &lt;h4&gt;Enter Title Here&lt;/h4&gt;
                &lt;/a&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
                &lt;div class="date"&gt; &lt;a href="#"&gt;&lt;i class="fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt; Dubai&lt;/a&gt; &lt;a href="#"&gt;&lt;i class="fa fa-calendar" aria-hidden="true"&gt;&lt;/i&gt; Flexible Dates&lt;/a&gt; &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-3 "&gt;
            &lt;div class="post-image"&gt; &lt;img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu"&gt;
              &lt;div class="caption post-content"&gt; &lt;a href="activity-detail.html"&gt;
                &lt;h4&gt;Enter Title Here&lt;/h4&gt;
                &lt;/a&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
                &lt;div class="date"&gt; &lt;a href="#"&gt;&lt;i class="fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt; Dubai&lt;/a&gt; &lt;a href="#"&gt;&lt;i class="fa fa-calendar" aria-hidden="true"&gt;&lt;/i&gt; Flexible Dates&lt;/a&gt; &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-3 "&gt;
            &lt;div class="post-image"&gt; &lt;img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu"&gt;
              &lt;div class="caption post-content"&gt; &lt;a href="activity-detail.html"&gt;
                &lt;h4&gt;Enter Title Here&lt;/h4&gt;
                &lt;/a&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
                &lt;div class="date"&gt; &lt;a href="#"&gt;&lt;i class="fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt; Dubai&lt;/a&gt; &lt;a href="#"&gt;&lt;i class="fa fa-calendar" aria-hidden="true"&gt;&lt;/i&gt; Flexible Dates&lt;/a&gt; &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-3 "&gt;
            &lt;div class="post-image"&gt; &lt;img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu"&gt;
              &lt;div class="caption post-content"&gt; &lt;a href="activity-detail.html"&gt;
                &lt;h4&gt;Enter Title Here&lt;/h4&gt;
                &lt;/a&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
                &lt;div class="date"&gt; &lt;a href="#"&gt;&lt;i class="fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt; Dubai&lt;/a&gt; &lt;a href="#"&gt;&lt;i class="fa fa-calendar" aria-hidden="true"&gt;&lt;/i&gt; Flexible Dates&lt;/a&gt; &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-3 "&gt;
            &lt;div class="post-image"&gt; &lt;img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu"&gt;
              &lt;div class="caption post-content"&gt; &lt;a href="activity-detail.html"&gt;
                &lt;h4&gt;Enter Title Here&lt;/h4&gt;
                &lt;/a&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
                &lt;div class="date"&gt; &lt;a href="#"&gt;&lt;i class="fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt; Dubai&lt;/a&gt; &lt;a href="#"&gt;&lt;i class="fa fa-calendar" aria-hidden="true"&gt;&lt;/i&gt; Flexible Dates&lt;/a&gt; &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;/div&gt; 
    &lt;/div&gt;
  </code></pre>
  
  <p>I just did not added content of rest of tabs yet because only first one is not working when i add more tab content it be visible like with rest of content not getting hide and displaying on click of another tab. </p>