• Jquery

Download Butter Cake files, and include css and js file

<link rel="stylesheet" href="css/butterCake.css">

.................

<script src="js/butterCake.js"></script>

<div class="row"> 
  
  <div class="col-md-6">
  ..........
  </div>
  
  <div class="col-md-6">
  ..........
  </div>
  
</div>

• .row
• .col
• .col-md-x
• .col-lg-x
• .col-xl-x

• .container
• .container-fluid

• .d-none
• .d-block
• .d-inline
• .d-inline-block
• .d-flex or .flex

• .bg-primary
• .bg-dark
• .bg-light
• .bg-white

• .text-primary
• .text-dark
• .text-light
• .text-white

• .btn-primary

• .btn-secondary

• .btn-success

• .btn-warning

• .btn-danger

• .btn-dark

• .btn-light

• .btn-white

• .rounded (rounded)

• .outline (outline)

<!-- REGULAR BUTTONS -->
            <div class="container-fluid py-1">
                <a class="btn-primary" href="#!">button</a>
            </div>

            <!-- ROUNDED BUTTONS -->
            <div class="container-fluid py-1">
                <a class="btn-primary rounded" href="#!">button</a>
            </div>

            <!-- OUTLINE BUTTONS -->
            <div class="container-fluid py-1">
                <a class="btn-primary outline" href="#!">button</a>
             </div>

• p-0 to 10 ( 0 - 100px (xy))
• pt-0 to 10 ( 0 - 100px (padding top))
• pb-0 to 10 ( 0 - 100px (padding bottom))
• pl-0 to 10 ( 0 - 100px (padding left))
• pr-0 to 10 ( 0 - 100px (padding right))

• .mx-auto ( margin: 0 auto)
• .ml-auto ( margin-left: auto)
• .mr-auto ( margin-right: auto)
• .m-0 to 10 ( 0 - 100px (xy))
• .mt-0 to 10 ( 0 - 100px (margin top))
• .mb-0 to 10 ( 0 - 100px (margin bottom))
• .ml-0 to 10 ( 0 - 100px (margin left))
• .mr-0 to 10 ( 0 - 100px (margin right))

• .w-100 (width: 100%)

• .img-fluid
• .img-rounded
• .img-cirle
• .img-cover
• .img-contain

• .bg-cover
• .bg-fixed

• .list-unstyled

• .shadow

• .radius-none

• .border-none
• .border-top-none
• .border-bottom-none
• .border-left-none
• .border-right-none

• .text-center
• .text-left
• .text-right
• .capitalize
• .uppercase
• .lowercase

Font Weight

• .font-normal
• .font-bold
• .weight-100 to .weight-900

Font Sizes

• .display-1
• .display-2
• .display-3
• .display-4

• .float-left
• .float-right
• .clearfix

Jusitify

• .flex-justify-start
• .flex-justify-center
• .flex-justify-end
• .flex-justify-between
• .flex-justify-around
• .flex-justify-evenly
• .flex-justify-baseline

Align

• .flex-align-start
• .flex-align-center
• .flex-align-end
• .flex-align-stretch

Flex align center - Vertically & Horizontally

• .flex-center-center

Flex Direction

• .flex-column
• .flex-row

• .disabled
• disabled (attribute)

Thank you!