Wardrobe Tabs
created by:HTMLobster
BootstrapHTMLMiscellaneous
Copy
<!----------------------------------------------------------------
WARDROBE TABS
Profile by HTMLobster (noll)
Search for "placeholder" to find all the images to replace.
Search IMG_SRC to find all the image sources to replace.
To add more items, copy an entire row and paste, then delete the items you don't need.
May need to adjust margins and padding.
TOS:
Do not remove my credit. You may edit it, however.
You may edit code/frankenstein with others as long as their TOS allows!
Turn off WYSIWYG and turn on Code Editor.
Do not redistribute edits.
------------------------------------------------------------------>
<div class="container" style="max-width:800px;">
<div class="bg-faded rounded p-2 mb-2">
<!-- Wardrobe heading -->
<h1 class="bg-primary rounded p-2 text-white mb-0 text-center text-uppercase font-weight-bold" style="font-size:1.8em; letter-spacing:2px;">[Character]'s Wardrobe</h1>
</div>
<!-- Main content -->
<div class="row no-gutters">
<!-- Left column -->
<div class="col-md-3 rounded bg-faded px-1 py-2 mr-md-2 mb-2 mb-md-0">
<!-- Buttons - make sure only one of them says "active" -->
<ul class="nav nav-tabs row no-gutters border-0">
<!-- Button 1 -->
<li class="col nav-item mb-2 mx-1"><a class="btn btn-outline-primary w-100 font-weight-bold active" data-toggle="tab" href="#Tops">Tops</a></li>
<!-- Button 2 -->
<li class="col nav-item mb-2 mx-1"><a class="btn btn-outline-primary w-100 font-weight-bold" data-toggle="tab" href="#Bottoms">Bottoms</a></li>
<!-- Button 3 -->
<li class="col nav-item mb-2 mx-1"><a class="btn btn-outline-primary w-100 font-weight-bold" data-toggle="tab" href="#Shoes">Shoes</a></li>
<!-- Button 4 -->
<li class="col nav-item mb-2 mx-1"><a class="btn btn-outline-primary w-100 font-weight-bold" data-toggle="tab" href="#Acc">Accessories</a></li>
</ul>
<!-- Design info -->
<div>
<!-- Color palettes -->
<h4 class="btn w-100 bg-secondary p-2 rounded text-white text-center font-weight-bold">Color Palette</h4>
<!-- Palette 1 - change background colors -->
<div class="row no-gutters mb-2">
<div class="col rounded-left p-3" style="background:#fff;"></div>
<div class="col p-3" style="background:#ccc;"></div>
<div class="col p-3" style="background:#808080;"></div>
<div class="col p-3" style="background:#444;"></div>
<div class="col rounded-right p-3" style="background:#000;"></div>
</div>
<!-- Palette 2 - change background colors -->
<div class="row no-gutters mb-2">
<div class="col rounded-left p-3" style="background:#fff;"></div>
<div class="col p-3" style="background:#ccc;"></div>
<div class="col p-3" style="background:#808080;"></div>
<div class="col p-3" style="background:#444;"></div>
<div class="col rounded-right p-3" style="background:#000;"></div>
</div>
<!-- Style notes - what styles they like to dress in -->
<h4 class="btn w-100 bg-secondary p-2 rounded text-white text-center font-weight-bold">Style Notes</h4>
<ul class="fa-ul ml-4 mb-2">
<li><i class="fa-li fas fa-star text-primary"></i> Style</li>
<li><i class="fa-li fas fa-star text-primary"></i> Style</li>
<li><i class="fa-li fas fa-star text-primary"></i> Style</li>
</ul>
<!-- Design notes - any important design details that shouldn't be missed -->
<h4 class="btn w-100 bg-secondary p-2 rounded text-white text-center font-weight-bold">Design Notes</h4>
<ul class="fa-ul ml-4 mb-0">
<li><i class="fa-li fas fa-star text-primary"></i> Note</li>
<li><i class="fa-li fas fa-star text-primary"></i> Note</li>
<li><i class="fa-li fas fa-star text-primary"></i> Note</li>
</ul>
</div>
</div>
<!-- Left column end -->
<!-- Right column -->
<div class="col rounded py-2 px-1 bg-faded">
<div class="tab-content">
<!--- Tab 1 --->
<div class="tab-pane fade active show" id="Tops">
<!-- Heading -->
<h1 class="bg-primary rounded p-2 text-white mb-0 mx-1">Tops</h1>
<!-- Items -->
<div class="row no-gutters">
<!-- Item 1 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 2 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 3 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 4 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 5 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 6 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 7 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 8 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
</div>
<!-- Items end -->
</div>
<!-- Tab 1 end -->
<!-- Tab 2 -->
<div class="tab-pane fade" id="Bottoms">
<h1 class="bg-primary rounded p-2 text-white mb-0 mx-1">Bottoms</h1>
<!-- Items -->
<div class="row no-gutters">
<!-- Item 1 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 2 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 3 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 4 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
</div>
<!-- Items end -->
</div>
<!-- Tab 2 end -->
<!-- Tab 3 -->
<div class="tab-pane fade" id="Shoes">
<h1 class="bg-primary rounded p-2 text-white mb-0 mx-1">Shoes</h1>
<!-- Items -->
<div class="row no-gutters">
<!-- Item 1 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 2 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 3 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 4 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
</div>
<!-- Items end -->
</div>
<!-- Tab 3 end -->
<!-- Tab 4 -->
<div class="tab-pane fade" id="Acc">
<h1 class="bg-primary rounded p-2 text-white mb-0 mx-1">Accessories</h1>
<!-- Items -->
<div class="row no-gutters">
<!-- Item 1 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 2 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 3 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 4 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 5 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 6 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<!-- Item 7 -->
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url(https://via.placeholder.com/200.png) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
</div>
</div>
</div>
<!-- Items end -->
</div>
<!-- Tab 4 end -->
</div>
<!-- Tab container end -->
</div>
</div>
<div class="text-center mt-3">
<a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="theme by noll"><i class="fas fa-lobster"></i></a>
</div>
</div>Copy
<!----------------------------------------------------------------
WARDROBE TABS
Profile by HTMLobster (noll)
Search for "placeholder" to find all the images to replace.
Search IMG_SRC to find all the image sources to replace.
To add more items, copy an entire row and paste, then delete the items you don't need.
May need to adjust margins and padding.
TOS:
Do not remove my credit. You may edit it, however.
You may edit code/frankenstein with others as long as their TOS allows!
Turn off WYSIWYG and turn on Code Editor.
Do not redistribute edits.
------------------------------------------------------------------>
<div class="container" style="max-width:800px;">
<div class="bg-faded rounded p-2 mb-2">
<!-- Wardrobe heading -->
<h1 class="bg-primary rounded p-2 text-white mb-0 text-center text-uppercase font-weight-bold" style="font-size:1.8em; letter-spacing:2px;">{{!character name!}}'s Wardrobe</h1>
</div>
<!-- Main content -->
<div class="row no-gutters">
<!-- Left column -->
<div class="col-md-3 rounded bg-faded px-1 py-2 mr-md-2 mb-2 mb-md-0">
<!-- Buttons - make sure only one of them says "active" -->
<ul class="nav nav-tabs row no-gutters border-0">
<!-- Button 1 -->
<li class="col nav-item mb-2 mx-1"><a class="btn btn-outline-primary w-100 font-weight-bold" data-toggle="tab" href="#{{!Tab 1 ID!}}">{{!tab 1 name!}}</a></li>
{{%More categories%
<li class="col nav-item mb-2 mx-1"><a class="btn btn-outline-primary w-100 font-weight-bold" data-toggle="tab" href="#{{%Tab ID%}}">{{%tab name%}}</a></li>
%end%}}
</ul>
<!-- Design info -->
<div class="mx-1">
<!-- Color palettes -->
<h4 class="btn w-100 bg-secondary p-2 rounded text-white text-center font-weight-bold">Color Palette</h4>
<!-- Palette 1 - change background colors -->
{{%color palette%
<div class="row no-gutters mb-2">
<div class="col rounded-left p-3" style="background:{{c%color 1%}};"></div>
<div class="col p-3" style="background:{{c%color 2%}};"></div>
<div class="col p-3" style="background:{{c%color 3%}};"></div>
<div class="col p-3" style="background:{{c%color 4%}};"></div>
<div class="col rounded-right p-3" style="background:{{c%color 5%}};"></div>
</div>
%end%}}
<!-- Style notes - what styles they like to dress in -->
<h4 class="btn w-100 bg-secondary p-2 rounded text-white text-center font-weight-bold">Style Notes</h4>
<ul class="fa-ul ml-4 mb-2">
{{%style notes%
<li><i class="fa-li fas fa-star text-primary"></i> {{%note%}}</li>
%end%}}
</ul>
<!-- Design notes - any important design details that shouldn't be missed -->
<h4 class="btn w-100 bg-secondary p-2 rounded text-white text-center font-weight-bold">Design Notes</h4>
<ul class="fa-ul ml-4 mb-0">
{{%design notes%
<li><i class="fa-li fas fa-star text-primary"></i> {{%note%}}</li>
%end%}}
</ul>
</div>
</div>
<!-- Left column end -->
<!-- Right column -->
<div class="col rounded py-2 px-1 bg-faded">
<div class="tab-content">
<!--- Tab 1 --->
<div class="tab-pane fade active show" id="{{!Tab 1 ID!}}">
<!-- Heading -->
<h1 class="bg-primary rounded p-2 text-white mb-0 mx-1">{{!tab 1 name!}}</h1>
<!-- Items -->
<div class="row no-gutters">
<!-- Item 1 -->
{{%tab 1 wardrobe items%
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url({{u%item image%}}) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="{{u%item image source URL%}}"><i class="fas fa-info-circle"></i></a>
</div>
</div>
%end%}}
</div>
<!-- Items end -->
</div>
<!-- Tab 1 end -->
{{%More categories%
<div class="tab-pane fade" id="{{%Tab ID%}}">
<!-- Heading -->
<h1 class="bg-primary rounded p-2 text-white mb-0 mx-1">{{%tab name%}}</h1>
<!-- Items -->
<div class="row no-gutters">
<!-- Item 1 -->
{{%wardrobe items%
<div class="col-sm-3 col-6 rounded mt-2 px-1">
<!-- Image -->
<div class="rounded pl-1 align-items-end" style="height:200px; background:url({{u%item image%}}) center; background-size:cover;">
<!--- Image credit --->
<a class="text-secondary" href="{{u%item image source URL%}}"><i class="fas fa-info-circle"></i></a>
</div>
</div>
%end%}}
</div>
<!-- Items end -->
</div>
%end%}}
</div>
<!-- Tab container end -->
</div>
</div>
<div class="text-center mt-3">
<a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="theme by noll"><i class="fas fa-lobster"></i></a>
</div>
</div>