Tommyinnit

```
<div class="container">
  <div class="row">
<!----------[ CHARACTER NAME ]---------->
    <div class="card bg-faded p-3" style="width:100%;"><h3 class="text-center text-uppercase font-weight-bold m-0" style="letter-spacing:2px;">Character Name<br><small>Title</small></h3></div>
  </div><!--Row End-->
  <div class="row mt-2">
    <div class="col-sm-8" style="height:450px;">
<!----------[ PILLS ]---------->
      <ul class="nav nav-pills justify-content-center" role="tablist">
        <li class="nav-item">
          <a class="nav-link active btn btn-outline-primary mx-2" data-toggle="pill" href="#img1" role="tab">Image 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-outline-primary mx-2" data-toggle="pill" href="#img2" role="tab">Image 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-outline-primary mx-2" data-toggle="pill" href="#img3" role="tab">Image 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-outline-primary mx-2" data-toggle="pill" href="#img4" role="tab">Image 4</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-outline-primary mx-2" data-toggle="pill" href="#img5" role="tab">Image 5</a>
        </li>
      </ul><!--Pills End-->
<!----------[ TAB CONTENT ]---------->
      <div class="tab-content">
        <div class="tab-pane fade show active p-2" id="img1" role="tabpanel">
          <p class="text-center">
          <img class="m-1 rounded" style="max-height:400px" src="https://cdn.discordapp.com/attachments/565605870705180703/565606394103857162/unknown.png">
          </p>
        </div><!--Tab Panel End-->
        <div class="tab-pane fade p-2" id="img2" role="tabpanel">
          <p class="text-center">
          <img class="m-1 rounded" style="max-height:400px" src="https://cdn.discordapp.com/attachments/565605870705180703/565606174590894086/unknown.png">
          </p>
        </div><!--Tab Panel End-->
        <div class="tab-pane fade p-2" id="img3" role="tabpanel">
          <p class="text-center">
          <img class="m-1 rounded" style="max-height:400px" src="https://cdn.discordapp.com/attachments/565605870705180703/565606396511387668/unknown.png">
          </p>
        </div><!--Tab Panel End-->
        <div class="tab-pane fade p-2" id="img4" role="tabpanel">
          <p class="text-center">
          <img class="m-1 rounded" style="max-height:400px" src="https://cdn.discordapp.com/attachments/565605870705180703/565605923050225675/unknown.png">
          </p>
        </div><!--Tab Panel End-->
        <div class="tab-pane fade p-2" id="img5" role="tabpanel">
          <p class="text-center">
          <img class="m-1 rounded" style="max-height:400px" src="https://cdn.discordapp.com/attachments/565605870705180703/565606032559308801/unknown.png">
          </p>
        </div><!--Tab Panel End-->
      </div><!--Tab End-->
    </div><!--Col End-->
    <div class="col-sm-4">
      <table class="table-striped table-hover mx-auto">
      <tbody>
        <tr>
          <td colspan="2">
            <h4 class="text-uppercase text-center font-weight-bold m-0" style="letter-spacing:3px;">Profile</h4>
          </td>
        </tr>
        <tr>
          <td><b>AGE:</b> -</td>
        </tr>
        <tr>
          <td><b>BIRTHDAY:</b> -</td>
        </tr>
        <tr>
          <td><b>GENDER:</b> -</td>
        </tr>
        <tr>
          <td><b>HEIGHT:</b> -</td>
        </tr>
        <tr>
          <td><b>WEIGHT:</b> -</td>
        </tr>
        <tr>
          <td><b>MBTI:</b> -</td>
        </tr>
        <tr>
          <td><b>OCCUPATION:</b> -</td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
      </tbody>
    </table>
    </div><!--Col End-->
  </div><!--Row End-->
  <div class="row mt-2">
      <div class="col">
      <div class="card bg-faded p-1" style="height:150px;">
        <div class="card p-2" style="height:150px; overflow:auto;">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet ex quis velit congue, eu laoreet est vestibulum. Cras placerat massa arcu, finibus eleifend libero ullamcorper et. Nulla rutrum felis sed massa viverra condimentum. Praesent consectetur tellus justo, vestibulum dictum ex lobortis sed. Pellentesque laoreet dui nec sapien tempor porta. Maecenas tincidunt blandit urna ac varius. Ut at lacus porta, interdum lorem vitae, bibendum nulla. Proin tristique leo ut ipsum rhoncus, in tempus velit elementum. Vivamus in justo nec lacus efficitur finibus vitae in ligula. Sed porta rhoncus nunc quis rhoncus. Sed vestibulum justo eget pulvinar hendrerit. In laoreet luctus massa, in pretium leo lacinia ut. </p>
          <p>Aliquam scelerisque sem sed metus porta consequat. Aliquam eleifend lorem in sem commodo, eu rutrum tellus fermentum. Integer tempor, orci vitae pellentesque sollicitudin, dui neque tempor ligula, sagittis vehicula nunc sem dapibus enim. Nullam hendrerit pulvinar auctor. Curabitur auctor viverra dignissim. Pellentesque pretium est lacus, vitae sagittis dolor euismod id. Aenean tempus nulla vitae quam pretium, sed ornare neque dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean convallis vitae velit a euismod. Maecenas ultrices viverra venenatis. Vestibulum sagittis, arcu at faucibus sodales, tellus tortor venenatis nibh, sed porta dui risus nec purus. Etiam vehicula felis vel mi molestie auctor. Aliquam nec ornare sapien. </p>
        </div><!--Card End-->
      </div><!--Outer Card End-->
    </div><!--Col End-->
  </div><!--Row End-->
<a class="pull-right text-muted text-uppercase" style="font-weight:lighter; font-size:12px;" href="https://toyhou.se/3899356.image-showcase">Code by AviCode</a>
</div><!--Container End-->

```