A Framework for Bootstrap 4 Additional Components and Styles - BS4 Helper

By Karthikeya Kaza

Download BS4 helper:

Instructions:

 Click to Download.

Using CDN:

Instructions:

If you don't want to download and host BS4 Helper yourself, you can include it from a CDN (Content Delivery Network).


Copy the code below and paste it in your <head> tag:

<link rel="stylesheet" href="https://res.wdphp.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://bhogi7589.github.io/bs4-helper/bs4-helper.css">
<script src="https://res.wdphp.com/jquery/3.5.1/jquery.min.js"></script>
<script src="https://res.wdphp.com/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://res.wdphp.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://bhogi7589.github.io/bs4-helper/bs4-helper.js"></script>



You must also import Font Awesome 4 Icons:

<link rel="stylesheet" href="https://res.wdphp.com/font-awesome/4.7.0/css/font-awesome.min.css">

For more colors and background colors, use the colors and background colors style sheets of BS4 Helper:

<link rel="stylesheet" href="https://bhogi7589.github.io/bs4-helper/bs4-helper-colors.css">
<link rel="stylesheet" href="https://bhogi7589.github.io/bs4-helper/bs4-helper-bg-colors.css">

To enable rotated components, use the rotations stylesheet of BS4 Helper:

<link rel="stylesheet" href="https://bhogi7589.github.io/bs4-helper/bs4-helper-rotations.css">
Warning! BS4 Helper may not work as expected without importing Bootstrap 4!

BS4 Helper Preview

BS4 Helper Growing Progress Bars

Normal Progress Bar

Growing Progress Bar

Shrinking Progress Bar

Timer Bar

Remaining Time: 00:02:00

BS4 Helper Location Sensor

BS4 Helper Scroll Indicators

Look at the bottom to see the scroll indicator and scroll this page to see the effect.

BS4 Helper Headings

Display-1

Heading-1

Display-2

Heading-2

Display-3

Heading-3

Display-4

Heading-4

Colored Headings

Red Heading

Orange Heading

Yellow Heading

Green Heading

Cyan Heading

Blue Heading

Indigo Heading

Violet/Purple Heading

Highlighted Text vs. Normal text (<mark> element)

Highlighted Text Normal Text

BS4 Helper Tooltip

Hover over me

BS4 Helper Text Sizes and Colors

Extra Large Text

Large Text

Medium Text

Small Text

Extra Small Text

Red Text

Orange Text

Yellow Text

Green Text

Cyan Text

Blue Text

Indigo Text

Violet Text

These sizes and colors can be combined as follows:

Extra Large Orange Text

Large Red Text

Medium Yellow Text

Small Green Text

Extra Small Blue Text

...and other possible combinations.

BS4 Helper Additional Colors

Red 200 Text

Red 200 Background

Cyan 200 Text

Cyan 200 Background

Teal 200 Text

Teal 200 Background

Red 900 Text

Red 900 Background

Cyan 900 Text

Cyan 900 Background

Teal 900 Text

Teal 900 Background

BS4 Helper Rotations

Text Rotated by 10 degrees(.rotate-10)

Text Rotated by 20 degrees(.rotate-20)

Text Rotated by 30 degrees(.rotate-30)

Text Rotated by 40 degrees(.rotate-40)

Text Rotated by 50 degrees(.rotate-50)

Text Rotated by 60 degrees(.rotate-60)

Text Rotated by 70 degrees(.rotate-70)

Text Rotated by 80 degrees(.rotate-80)

Text Rotated by 90 degrees(.rotate-90)

Text Rotated by 100 degrees(.rotate-100)

Text Rotated by 200 degrees(.rotate-200)

Text Rotated by 300 degrees(.rotate-300)

Text Rotated by 310 degrees(.rotate-310)

Text Rotated by 320 degrees(.rotate-320)

Text Rotated by 330 degrees(.rotate-330)

Text Rotated by 340 degrees(.rotate-340)

Text Rotated by 350 degrees(.rotate-350)

Text Rotated by 360 degrees(.rotate-360)