Mini Bootstrap

<!
------------------ MAIN CONTAINER ----- SET TOP & BOTTOM BORDER PATTERN HERE
------------------------------->
<div class="container card border-0 rounded-0 px-0 py-5" style="background:
url(https://66.media.tumblr.com/6439420cfb85b1534f7a5bd877ecc4b1/tumblr_n9wm7mYXU71
r8nyzuo1_500.jpg) fixed; font-family:helvetica, sans-serif;">
<div class="card rounded-0 border-0 pt-2 my-4 bg-faded">
<div class="row">
<div class="col-lg-4 col-md-5 pr-md-0 mb-2">

<div class="card-block h-100" style="background:
url(https://f2.toyhou.se/file/f2-toyhou-se/images/17779051_GKff6kWSax1rJSZ.png);
background-repeat: no-repeat; background-size:cover; background-position: top
center; ">
<div style="min-height:450px;"></div>
</div>
</div>
<div class="col-lg-8 col-md-7 pl-md-0 mb-2">

<div class="card-block">
<ul class="nav row text-center text-uppercase mx-0 mb-2">

<li class="nav-item col pl-0 pr-1">
<a class="nav-item rounded-0 nav-link active px-1 btn btn-block
btn-outline-primary" data-toggle="tab" href="#ONE">
About</a>
</li>
<li class="nav-item col px-1">
<a class="rounded-0 nav-link btn px-1 btn-block btn-outline-
primary" data-toggle="tab" href="#TWO">
Details</a>
</li>
<li class="nav-item col px-1">

<a class="rounded-0 nav-link px-1 btn btn-block btn-outline-
primary" data-toggle="tab" href="#THREE">
Mood</a>
</li>
</ul>
<div class="card border-0 rounded-0 tab-content">

<div class="tab-pane show active card-block" style="height: 560px;
padding-bottom: 5px; overflow:auto;" id="ONE">
<h1 class="bg-primary text-white py-1 px-2 display-4"

style="letter-spacing:2px; font-size: 1.75em;">Basics</h1>
<div class="row">
<div class="col-sm-6 mb-3">
<span class="text-uppercase">Name</span>
<span class="pull-right">content</span>
<hr class="mt-1 mb-0" style="border-style:dashed;">
</div>

<span class="text-uppercase">Called</span>
</div>

<span class="text-uppercase">Age</span>
</div>

<span class="text-uppercase">Gender</span>
</div>

<span class="text-uppercase">Height</span>
</div>
<span class="text-uppercase">Build</span>
</div>

<span class="text-uppercase">Race</span>
</div>

<span class="text-uppercase">Role</span> <span
class="pull-right">content</span>
</div>
</div>


style="letter-spacing:2px; font-size: 1.75em;">Description</h1>
<p>Write about your character here. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget,
euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit
vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat,
volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi
eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et
accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget.
Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae
mollis felis odio vel nulla. Etiam sed libero laoreet ipsum lacinia sagittis eu non
lectus. Fusce sit amet lectus nec massa auctor aliquam et molestie metus. Sed at
est in ante egestas iaculis. Nullam varius gravida ligula nec malesuada.</p>
</div>

<div class="tab-pane card-block" style="height: 560px; padding-
bottom:5px; overflow:auto;" id="TWO">
style="letter-spacing:2px; font-size: 1.75em;">Character</h1>
<div class="row">
<span class="text-uppercase">MBTI</span>
</div>

<span class="text-uppercase">Alignment</span>
<span class="pull-right">chaotic evil</span>
</div>

<span class="text-uppercase">Sign</span>
</div>

<span class="text-uppercase">Enneagram</span>
</div>

<span class="text-uppercase">Flower</span>
</div>

<span class="text-uppercase">Element</span>
</div>
</div>

style="letter-spacing:2px; font-size: 1.75em;">Preferences</h1>
<div class="row">

<p class="text-uppercase">Likes</p>
<ul class="mb-0">
<li class="mb-2">content</li>
</ul>
</div>


<p class="text-uppercase">Dislikes</p>
<ul class="mb-0">
</ul>
</div>
</div>


style="letter-spacing:2px; font-size: 1.75em;">Trivia</h1>
<ul class="mb-0">
<li class="mb-2">Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</li>
</ul>
</div>

<div class="tab-pane card-block" style="height: 560px; padding-
bottom: 5px; overflow:auto;" id="THREE">
style="letter-spacing:2px; font-size: 1.75em;">Aesthetic</h1>

<div class="row">
<div class="col-sm-4 text-center mb-3">
<img
src="https://file.toyhou.se/images/12854984_vNXyV4LfgjYB5lm.png">
</div>

<img
src="https://file.toyhou.se/images/15630166_uyelXGuGudwufC3.png">
</div>

<img
src="https://file.toyhou.se/images/15630152_0mdY82MuTtUCMrS.png">
</div>
</div>


style="letter-spacing:2px; font-size: 1.75em;">Playlist</h1>
<div class="row">
<div class="col-12 mb-3">
Song Title <span class="pull-right">
<a href="SONG_LINK" target="_BLANK"><i class="far fa-play"
/></a></span>
</div>
/></a></span>
</div>

/></a></span>
</div>

/></a></span>
</div>

/></a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="mt-3 text-right">
<a href="/Eggy" class="btn btn-danger"><i class="fas fa-code mr-1" />Credit</a>
</p>

Mini Bootstrap

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mini Bootstrap

Uploaded by

Copyright:

Available Formats

<!

<div class="col-lg-8 col-md-7 pl-md-0 mb-2">

<li class="nav-item col px-1">

<!------ SECTION ONE ----------- BASIC STATS

<h1 class="bg-primary text-white py-1 px-2 display-4"

<div class="col-sm-6 mb-3">

<div class="col-sm-6 mb-3">

<div class="col-sm-6 mb-3">

<div class="col-sm-6 mb-3">

<div class="col-sm-6 mb-3">

<div class="col-sm-6 mb-3">

<!------ SECTION TWO ----------- CHARACTER

<div class="col-sm-6 mb-3">

<div class="col-sm-6 mb-3">

<div class="col-sm-6 mb-3">

<div class="col-sm-6 mb-3">

<div class="col-sm-6 mb-3">

<h1 class="bg-primary text-white py-1 px-2 display-4"

<!------ SECTION THREE ----------- MOOD

<div class="col-sm-4 text-center mb-3">

<div class="col-sm-4 text-center mb-3">

<div class="col-12 mb-3">

<div class="col-12 mb-3">

<div class="col-12 mb-3">

You might also like