Snippets

SparklyCodes

Info

Created
3 years, 4 months ago
Creator
SparklyCodes
Favorites
1404
Reference

Profile

snippet hub

[Last Edit: 15/12/2023]

All of these are free to use and edit, for F2U and P2U projects. Originally made this page so I don't have to dig up my own codes, but why not share it?

If you'd like more snippets and/or further information on how things work, visit Bootstrap 4's documentation.

Here is essentially a wiki for CSS properties.

CARDS & ROWS

my base

<div class="mx-auto p-3 row no-gutters" style="max-width: 900px;">
    <!-- ............................. LEFT -->
    <div class="p-1 col-lg-6"> <div class="p-2 bg-faded">
        content column
    </div> </div>
    <!-- ............................. RIGHT -->
    <div class="p-1 col-lg-6"> <div class="p-2 bg-faded">
        content column
    </div> </div>
</div>
content column
content column

simple 2-column row

<div class="row no-gutters">
    <!-- LEFT -->
    <div class="p-1 col-lg-6"> <div class="p-2 bg-faded">
        content column
    </div> </div>
    <!-- RIGHT -->
    <div class="p-1 col-lg-6"> <div class="p-2 bg-faded">
        content column
    </div> </div>
</div>
content column
content column

card with faded border

<div class="p-2 bg-faded"><div class="p-2 card rounded-0 border-0">
    content
</div></div>
content

height-changing row

<div class="row no-gutters">
    <!-- LEFT -->
    <div class="p-1 col-lg-6">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus.</p>
    </div>
    <!-- RIGHT -->
    <div class="p-1 col-lg-6">
        <div class="card border-0 rounded-0 w-100 d-block d-lg-flex" style="min-height: 100%;"> <div class="p-1 overflow-auto" style="flex:1 1 0;">
            <p>This column's height is set by the column beside it! Nifty, isn't it? Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.</p>
        </div> </div>
    </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus.

This column's height is set by the column beside it! Nifty, isn't it? Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.

TABS & TOGGLES

tabs (pills)

<!-- ............ NAV BUTTONS -->
<ul class="nav nav-pills row no-gutters text-center">
    <li class="p-1 col nav-item"> <a style="border-radius: 0;" data-toggle="tab" class="w-100 nav-link active" href="#Tab1">One</a> </li>
    <li class="p-1 col nav-item"> <a style="border-radius: 0;" data-toggle="tab" class="w-100 nav-link" href="#Tab2">Two</a></li>
    <li class="p-1 col nav-item"> <a style="border-radius: 0;" data-toggle="tab" class="w-100 nav-link" href="#Tab3">Three</a></li>
</ul>
<!-- ............ NAV CONTENT -->
<div class="tab-content">
    <!-- ONE -->
    <div class="p-2 tab-pane fade show active" id="Tab1"> 
        Tab 1
    </div>
    <!-- TWO -->
    <div class="p-2 tab-pane fade" id="Tab2"> 
        Tab 2
    </div>
    <!-- THREE -->
    <div class="p-2 tab-pane fade" id="Tab3"> 
        Tab 3
    </div>
</div>
Tab 1
Tab 2
Tab 3

collapse

<a data-toggle="collapse" class="btn btn-primary" href="#Tab4">Collapse</a>
<div id="Tab4" class="collapse show"> <div class="p-2">
    click the button to toggle me!
</div> </div>
Collapse
click the button to toggle me!

carousel

<div id="carousel" class="mx-auto carousel slide" data-ride="carousel" style="max-width: 200px; height: 200px;">
    <div class="h-100 w-100 carousel-inner" style="font-size: 25px; text-shadow: 0 0 2px #000;">
        <!-- page -->
        <div data-interval="99999" class="h-100 w-100 carousel-item active">
            <img src="//placehold.it/300x300" class="d-block mx-auto">
            <div class="carousel-caption text-white"> img </div>
        </div>
        <!-- page -->
        <div data-interval="99999" class="h-100 w-100 carousel-item">
            <div style="background:url('//placehold.it/300x300');
            background-position: center; background-size: cover;" class="d-block mx-auto h-100 w-100"></div>
            <div class="carousel-caption text-white"> div </div>
        </div>
        <!-- page -->
        <div data-interval="99999" class="h-100 w-100 carousel-item">
            <div class="card h-100 w-100">
                <p>Text can also go in here!</p>
            </div>
        </div>
    </div>
    <!-- controls -->
    <a class="carousel-control-prev" href="#carousel" data-slide="prev">
        <i class="fas fa-chevron-left fa-2x"></i> <span class="sr-only">Previous</span></a>
    <a class="carousel-control-next" href="#carousel" data-slide="next">
        <i class="fas fa-chevron-right fa-2x"></i> <span class="sr-only">Next</span></a>
</div>

TEXT

some lorem ipsum paragraphs

<p>This one isn't selectable on one click. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.</p>
<p>Proin nec mollis tellus. Morbi et urna in sem pulvinar sagittis. Donec quis nibh et augue rutrum imperdiet ac sed ipsum. Fusce ut vestibulum nisi, a accumsan ex. Suspendisse dignissim fringilla leo, sit amet condimentum leo accumsan non. Sed felis dui, semper quis libero ac, eleifend imperdiet nulla. Vivamus sit amet quam in est dictum ultricies. Etiam finibus ipsum ligula, at iaculis sem lobortis malesuada.</p>
<p>Curabitur mattis pretium sodales. Nam pulvinar feugiat risus eget commodo. Sed id risus iaculis, venenatis metus dictum, feugiat leo. Aenean tempor rhoncus arcu, in ultricies sapien tempor et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam sollicitudin odio nec sem ultrices sagittis. Vestibulum accumsan augue hendrerit feugiat lacinia. Vivamus porttitor libero eu nulla rhoncus dapibus.</p>
<p>Pellentesque fermentum orci et tincidunt interdum. Pellentesque imperdiet risus metus, sit amet gravida augue feugiat vitae. Integer aliquet convallis nisl, et tincidunt magna varius vitae. Sed congue quam lectus, vel hendrerit mi tempor vitae. Nulla vel suscipit arcu. Aliquam vitae euismod elit. Vivamus a felis rhoncus, bibendum urna id, malesuada enim. Etiam a ex non lectus tempus aliquam. Praesent dapibus aliquam ultricies. Vestibulum tincidunt arcu sit amet enim malesuada bibendum at et dui. Aenean tristique augue a libero condimentum vulputate. Etiam iaculis faucibus blandit. Phasellus facilisis elit at vestibulum auctor. Quisque tellus libero, varius sed iaculis quis, lobortis ac dolor.</p>
<p>Ut efficitur dapibus convallis. Donec rhoncus libero vitae ligula imperdiet, et commodo orci posuere. Cras varius, eros non rutrum viverra, sem velit finibus ligula, ut vestibulum nibh massa id justo. Pellentesque eget aliquet sem. Aenean eget condimentum sapien. Mauris sit amet erat at metus dictum vestibulum vel et ipsum. Phasellus libero orci, euismod vitae nisi vel, blandit convallis ante. Curabitur aliquam libero et purus laoreet vestibulum. Nam tempus lacinia auctor. Mauris suscipit, nisi at placerat eleifend, justo arcu iaculis enim, at venenatis nunc nunc in justo. Ut vel velit eget neque aliquet semper vitae ac lacus. Phasellus tortor augue, varius at eros vitae, consequat egestas tortor. Curabitur scelerisque convallis nisl, at molestie metus hendrerit eu. In ac metus eu nunc tincidunt mollis in sit amet arcu. Vivamus nec metus blandit, mollis massa quis, consequat tellus.</p>

list

<ul class="m-0 pl-4" style="list-style-type: square">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Praesent et euismod enim, vel lobortis sapien.</li>
    <li>Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</li>
    <li>Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus.</li>
</ul>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Praesent et euismod enim, vel lobortis sapien.
  • Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.
  • Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus.

list w/ icons

<ul class="m-0 pl-4 fa-ul">
    <li><i class="fa-li fa-solid fa-star"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li><i class="fa-li fa-solid fa-star"></i> Praesent et euismod enim, vel lobortis sapien.</li>
    <li><i class="fa-li fa-solid fa-star"></i> Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</li>
    <li><i class="fa-li fa-solid fa-star"></i> Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus.</li>
</ul>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Praesent et euismod enim, vel lobortis sapien.
  • Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.
  • Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus.

basic intro section

<div class="row no-gutters">
    <div class="p-1 col-sm-6"> <div class="p-1 px-2 bg-faded justify-content-between">
        <b>FIELD</b>
        <span>information</span>
    </div> </div>
    <div class="p-1 col-sm-6"> <div class="p-1 px-2 bg-faded justify-content-between">
        <b>FIELD</b>
        <span>information</span>
    </div> </div>
</div>
FIELD information
FIELD information

IMAGES

basic

<img src="//placehold.it/300x300" style="height: 200px; width: 200px;">
300x300

div with a background image

<div style="background:url('//placehold.it/300x300');
background-position: center; background-size: cover; height: 200px; width: 200px;">
    <a href="IMAGE_SOURCE" class="m-1 text-white">
        <i class="fa-solid fa-camera"></i>
    </a>
</div>

float

<div>
    <!-- floating image -->
    <div class="p-2 float-sm-left justify-content-center">
        <img src="//placehold.it/300x300" style="height: 150px; width: 150px;">
    </div>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.</p>
</div>
300x300

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.

horizontal mirroring

<div style="background: url('//placehold.it/300x300') center;
transform: rotateY(180deg);
background-size: contain; height: 200px; width: 200px;"></div>

MISCELLANEOUS

embedded music player (icon)

<!-- MUSIC PLAYER -->
<div class="m-0 flex-row justify-content-center align-items-center">
    <i class="fa-solid fa-play fa-lg"></i>
    <div style="margin-left: -1.5em; margin-top: -.7em; height: 2em; width: 2em; opacity: .01; overflow: hidden;" class="justify-content-center align-items-center">
        <!-- CHANGE SONG LINK HERE - put in the video ID where 'dQw4w9WgXcQ' is -->
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=Gxea8L7fooHtBey_&controls=0" frameborder="0"></iframe>
    </div>
</div>

fixed gradient background (for characters ONLY)

<!-- this one is for the whole background -->
<div style="background:linear-gradient(to bottom, #172361, #879AD8); background-position:center; background-attachment:fixed; min-height:60hv; width:100%; position:absolute; left:0px; top:0px; bottom:0px; z-index:-1;"></div>
<!-- this one is to take out the "profile" line above the bio of the character -->
<div class="p-3" style="background:linear-gradient(to bottom, #172361, #879AD8); background-position:center; background-attachment:fixed; min-height:60hv; width:100%; position:relative; margin-top:-55px; z-index:0;">
<!-- CONTENT START -->

insert your character's profile here!

<!-- CONTENT END -->
</div>

<!-- CREDIT, DON'T REMOVE -->
<div class="fixed-bottom btn bg-faded border-0 rounded-0" style="margin: 5px; padding: 4px; left: 0; right: inherit; z-index: 100;">
    <a href="/SparklyCodes" data-toggle="tooltip" title="Background Code by SparklyCodes"><i class="fa-solid fa-fw fa-code"></i></a>
    <a href="BACKGROUND_IMAGE_SOURCE" data-toggle="tooltip" title="Background Image"><i class="fa-solid fa-fw fa-camera"></i></a>
</div>

This is a background for whole character profiles - it also removes the 'profile' header.

Recent Images

No images.

1420 Users Online 2:15 am © cyancrows 2017
About FAQ Rules TOS