tabbed post (code)

a-brilliant-loser

Profile


<!--
  made this post for my sales thread, thought i might as well clean it up and post for people to use!

  a rather simple code that allows you to post a bunch of info in a relatively small place and tab between them.

  can be used in threads or characters.
  if used in a thread it can ONLY BE THE OP due to how sticky works.

  feel free to add tabs, just please consider the people who use this site on mobile ;3;

  Code name: tabbed post
  Creator: @_featherweather
  Date: 16 july 2019
-->

<div class="container-fluid">
  <div class="row">
    <h1 class="card-header mb-2 bg-danger" style="font-variant:small-caps">
      A Forum Post Title
    </h1>
  </div>
  <div class="row">
    <!-- menu bar -->
    <div class="col-md-1 mb-1">
      <div class="sticky-top card">
        <ul class="nav nav-pills justify-content-center row text-center" >
          <li class="nav-item">
            <a class="nav-link p-2" data-toggle="tab" href="#tab1"target="_top">Tab One</a>
          </li>
          <li class="nav-item">
            <a class="nav-link p-2" data-toggle="tab" href="#tab2"target="_top">Tab Two</a>
          </li>
          <li class="nav-item">
            <a class="nav-link p-2 active" data-toggle="tab" href="#tabMain"target="_top">Tab Main</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- end menu bar -->

    <!-- main body -->
    <div class="col-md-11 mb-1">
        <div class="tab-content">
          <!-- main -->
          <div class="tab-pane fade show active" id="tabMain">
            
            <p>some data</p>


            <p style="font-size:48%">coding by @a-brilliant-loser, as always, it isn't required<em>!!</em></p>
            
          </div>
          <!-- end main -->
          
          <!-- tab1 -->
          <div class="tab-pane fade" id="tab1">
              
              <p>some data</p>
              
          </div>
          <!-- end tab1 -->

          <!-- tab2 -->
          <div class="tab-pane fade" id="tab2">
              
              <p>some data here</p>
              
          </div>
          <!-- end tab2 -->

        </div>
    </div>
    <!-- end main body -->


</div>