Hi ! First of all, good work ! It's a very nice library. ;) <p d

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Tabs on bottom ? about bootstrap-vertical-tabs HOT 2 CLOSED

dbtek commented on June 11, 2024

Tabs on bottom ?

from bootstrap-vertical-tabs.

Comments (2)

dbtek commented on June 11, 2024

Hi @mrblackus,

With some custom css it should be possible. In my opinion, it's not a common need. However, it'd be cool if you could contribute your solution here for those might need it also.

Thanks.

from bootstrap-vertical-tabs.

mrblackus commented on June 11, 2024

Hi!

I managed to have tabs on bottom, but only by using a second ul element and forcing its position to bottom of the container with absolute positioning.
Not very elegant according to me but it works like a charm.

It looks like this

<div class="col-xs-3" id="menu">
  <!-- required for floating -->
  <!-- Nav tabs -->
  <ul class="nav nav-tabs tabs-left" style="height: 100%;">
    <li class="active">
      <a data-toggle="tab" href="#home">Home</a>
    </li>
    <li>
      <a data-toggle="tab" href="#profile">Profile</a>
    </li>
  </ul>

  <ul class="nav nav-tabs tabs-left" style="position: absolute; bottom: 0px;">
    <li>
      <a data-toggle="tab" href="#contact">Contact</a>
    </li>
    <li>
      <a data-toggle="tab" href="#about">About</a>
    </li>
  </ul>
</div>

<div class="col-xs-9">
  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home">Home Tab.</div>
    <div class="tab-pane" id="profile">Profile Tab.</div>
    <div class="tab-pane" id="contact">Contact Tab.</div>
    <div class="tab-pane" id="about">About Tab.</div>
  </div>
</div>