CODING SNIPPETS

A fast way to copy paste the most used pieces of code! Coder's unite! Hopefully, it'll help out a lot of people. You're more than welcome to add suggestions in the comments ♥

Font color

Changing the color of your text

Own color, you can always add "a" after rgb and hsl for transparency

 <TAG style='color:#HEXCODE'>

 <TAG style='color: rgb(0,0,0);'>

 <TAG style='color:hsl(3, 100%, 72%)'>

Primary color

 <TAG class='text-primary'>

Secondary color

 <TAG class='text-secondary'>

Success color

 <TAG class='text-success'>

Danger color

 <TAG class='text-danger'>

Warning color

 <TAG class='text-warning'>

Info color

 <TAG class='text-info'>

Light color

 <TAG class='text-light'>

Dark color

 <TAG class='text-dark'>

Muted color

 <TAG class='text-muted'>

Background color

Changing the background to desired color

Own color, you can always add "a" after rgb and hsl for transparency

 <TAG style='background-color:#HEXCODE'>

 <TAG style='background-color: rgb(0,0,0);'>

 <TAG style='background-color:hsl(3, 100%, 72%)'>

Primary color

 <TAG class='bg-primary'>

Secondary color

 <TAG class='bg-secondary'>

Success color

 <TAG class='bg-success'>

Danger color

 <TAG class='bg-danger'>

Warning color

 <TAG class='bg-warning'>

Info color

 <TAG class='bg-info'>

Light color

 <TAG class='bg-light'>

Dark color

 <TAG class='bg-dark'>

Muted color

 <TAG class='bg-muted'>

Images/image sizes (<div> edition)

Changing the background of a div element

Cover + center

 <div style="background-image:url(''); background-size: cover; background-position: center;">

Cover + top

 <div style="background-image:url(''); background-size: cover; background-position: top;">

Cover + bottom

 <div style="background-image:url(''); background-size: cover; background-position: right;">

Contain + center

 <div style="background-image:url(''); background-size: contain; background-repeat: no-repeat; background-position: center;">

Contain + left

 <div style="background-image:url(''); background-size: contain; background-repeat: no-repeat; background-position: left;">

Contain + right

 <div style="background-image:url(''); background-size: contain; background-repeat: no-repeat; background-position: right;">

Images (<img> edition)

Sometimes using <img> is more useful!

Simple img

 <img src="LINK_HERE">

Simple img with width

 <img src="LINK_HERE" style="width: 200px">

Simple img with width & height

 <img src="LINK_HERE" style="width: 200px">

Quick columns

Add simple borders quick, don't waste time typing cols again.

Col-sm-1

 <div class='col-sm-1'>

Col-sm-2

 <div class='col-sm-2'>

Col-sm-3

 <div class='col-sm-3'>

Col-sm-4

 <div class='col-sm-4'>

Col-sm-5

 <div class='col-sm-5'>

Col-sm-6

 <div class='col-sm-6'>

Col-sm-7

 <div class='col-sm-7'>

Col-sm-8

 <div class='col-sm-8'>

Col-sm-9

 <div class='col-sm-9'>

Col-sm-10

 <div class='col-sm-10'>

Col-sm-11

 <div class='col-sm-11'>

Col-sm-12

 <div class='col-sm-12'>

Flexbox

One of the best things to code around with ♥

Justify content-center

 <div class='d-flex justify-content-center'>

Justify content around

 <div class='d-flex justify-content-around'>

Justify content between

 <div class='d-flex justify-content-between'>

Justify content end

 <div class='d-flex justify-content-end'>

Align items baseline

 <div class='d-flex align-items-baseline'>

Align items center

 <div class='d-flex align-items-center'>

Font Awesome Icons

Versitale but also annoying to having to keep looking up stuff

Normal icon

 <i class="fa-solid fa-rabbit"><i>

 <i class="fa-regular fa-rabbit"><i>

 <i class="fa-light fa-rabbit"><i>

 <i class="fa-thin fa-rabbit"><i>

 <i class="fa-duotone fa-rabbit"><i>

Brand icon

 <i class="fa-brands fa-trello"><i>

Sizing icon

 <i class="fa-solid fa-strawberry" style="font-size: 3em;"><i>

Rotate icon

 <i class="fa-solid fa-strawberry fa-rotate-90" style="font-size: 1.5em;"><i>

 <i class="fa-solid fa-strawberry fa-rotate-180" style="font-size: 1.5em;"><i>

 <i class="fa-solid fa-strawberry fa-flip-horizontal" style="font-size: 1.5em;"><i>

 <i class="fa-solid fa-strawberry fa-flip-vertical" style="font-size: 1.5em;"><i>

Animation icon

 <i class="fa-solid fa-candle-holder fa-beat"><i>

 <i class="fa-solid fa-candle-holder fa-fade"><i>

 <i class="fa-solid fa-candle-holder fa-beat-fade"><i>

 <i class="fa-solid fa-candle-holder fa-bounce"><i>

 <i class="fa-solid fa-candle-holder fa-spin"><i>

 <i class="fa-solid fa-candle-holder fa-shake"><i>

 <i class="fa-solid fa-candle-holder fa-flip"><i>

 <i class="fa-solid fa-candle-holder fa-spin-pulse"><i>

Stacking icons

          <span class="fa-stack fa-1x">
                <i class="fa-solid fa-camera fa-stack-1x"></i>
                <i class="fa-solid fa-ban fa-stack-2x text-danger" ></i></span>
          

Icons in lists

          <ul class="fa-ul"> 
    <li>< span class="fa-li">< i class="fa-solid fa-check-square">< /i>< /span> List icons can</li> 
    <li>< span class="fa-li">< i class="fa-solid fa-check-square">< /i>< /span> be used to</li> 
    <li>< span class="fa-li">< i class="fa-solid fa-spinner fa-pulse">< /i>< /span> replace bullets</li> 
    <li>< span class="fa-li">< i class="fa-regular fa-square">< /i>< /span> in lists</li> 
  </ul> 
          

Text

Text manipulation like alignment and font weight...

Text-alignment

 <TAG style="text-align:center;">

 <TAG style="text-align:right;">

Font-weight/bold

 <TAG style="font-weight:bold;">
          or
          <b> text_here </b>
          

Text-transform

 <TAG style="text-transform:uppercase;">