A Framework Which Improves Components & Styles Bootstrap 4 | BS4 Helper

Added BS4 Helper with different colors for input groups and download progress bars. Loading progress bars are exactly the same as growth bars, but they grow up to 100% width and will take 1 second to finish the animation. To use it, just  data-progress="loading" to the progress bar.

Note: BS4 Helper allows only one loading progress bar per page.


  • Growing/shrinking progress bars.
  • Scroll position indicator.
  • Additional Heading Styles.
  • Highlight the text.
  • Improved tip.
  • Additional sizes and colors.
  • Rotatable component.
  • Timer bar component.
  • And much more.

How to make use of it:

1. Import the BS4 Helper’s JavaScript and Stylesheet in your Bootstrap undertaking.

<!-- Bootstrap Framework -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- BS4 Helper -->
<link rel="stylesheet" href="bs4-helper.css" />
<script src="bs4-helper.js"></script>

2. Load the next CSS files for extra colors and background colors:

<link rel="stylesheet" href="bs4-helper-colors.css" />
<link rel="stylesheet" href="bs4-helper-bg-colors.css" />

3. To allow the rotatable elements, load the bs4-helper-rotations.css stylesheet:

<link rel="stylesheet" href="bs4-helper-rotations.css" />

4. Create Growing/Shrinking progress bars.

<!-- Growing Progress Bar -->
<div class="progress">
  <div class="progress-bar bg-success" data-progress="grow" data-transition=10 data-max-width=95 show-percentage="true"></div>

<!-- >Shrinking Progress Bar -->
<div class="progress">
  <div class="progress-bar bg-success" data-progress="shrink" data-transition=10 data-min-width=25 show-percentage="true"></div>

5. Create a timer (countdown) bar.

<div class="progress">
  <div class="progress-bar bg-success" data-progress="timer" data-time=120 toggle-btn="mybtn" reset-btn="myresetbtn" show-label="myp"></div>
<div class="row">
  <button class="btn btn-outline-success timer-btn float-left" id="mybtn"></button>
  <button class="btn btn-outline-light timer-btn float-left" id="myresetbtn"></button>
  <p class="text-white timer-label" style="text-align: right" id="myp">Remaining Time: 00:02:00</p>

6. Create a backside progress bar indicating the present scroll progress.

<div class="scroll-container">
  <div class="scroll-indicator bg-danger"></div>

7. Additional heading types.

<h1 class="heading heading-medium">BS4 Helper Headings</h1>
<h1 class="display-1">Display-1</h1>
<h2 class="display-2">Display-2</h2>
<h3 class="display-3">Display-3</h3>
<h4 class="display-4">Display-4</h4>
<h2 class="heading heading-small">Colored Headings</h2>
<h1 class="heading heading-red">Red Heading</h1>
<h1 class="heading heading-orange">Orange Heading</h1>
<h1 class="heading heading-yellow">Yellow Heading</h1>
<h1 class="heading heading-green">Green Heading</h1>
<h1 class="heading heading-cyan">Cyan Heading</h1>
<h1 class="heading heading-blue bg-red">Blue Heading</h1>
<h1 class="heading heading-indigo bg-red">Indigo Heading</h1>
<h1 class="heading heading-violet bg-red">Violet/Purple Heading</h1>

8. Highlight the textual content.

<mark>Highlighted Text</mark>

9. Additional Text Sizes and Colors.

<p class="text-xl">Extra Large Text</p>
<p class="text-large">Large Text</p>
<p class="text-medium">Medium Text</p>
<p class="text-small">Small Text</p>
<p class="text-xs">Extra Small Text</p>
<p class="text-red">Red Text</p>
<p class="text-orange">Orange Text</p>
<p class="text-yellow">Yellow Text</p>
<p class="text-green">Green Text</p>
<p class="text-cyan">Cyan Text</p>
<p class="text-blue">Blue Text</p>
<p class="text-indigo">Indigo Text</p>
<p class="text-violet">Violet Text</p>
<p class="text-comment">These sizes and colors can be combined as follows:</p>
<p class="text-xl text-orange">Extra Large Orange Text</p>
<p class="text-large text-red">Large Red Text</p>
<p class="text-medium text-yellow">Medium Yellow Text</p>
<p class="text-small text-green">Small Green Text</p>
<p class="text-xs text-blue">Extra Small Blue Text</p>
<p class="text-comment">...and other possible combinations.</p>
<p class="text-large color-red-200">Red 200 Text</p>
<p class="text-large bg-red-200">Red 200 Background</p>
<p class="text-large color-cyan-200">Cyan 200 Text</p>
<p class="text-large bg-cyan-200">Cyan 200 Background</p>
<p class="text-large color-teal-200">Teal 200 Text</p>
<p class="text-large bg-teal-200">Teal 200 Background</p>
<p class="text-large color-red-900">Red 900 Text</p>
<p class="text-large bg-red-900 color-white">Red 900 Background</p>
<p class="text-large color-cyan-900">Cyan 900 Text</p>
<p class="text-large bg-cyan-900 color-white">Cyan 900 Background</p>
<p class="text-large color-teal-900">Teal 900 Text</p>
<p class="text-large bg-teal-900 color-white">Teal 900 Background</p>

10. Create rotatable components.

<p class="rotate-10">Text Rotated by 10 degrees(.rotate-10)</p>
<p class="rotate-20">Text Rotated by 20 degrees(.rotate-20)</p>
<p class="rotate-30">Text Rotated by 30 degrees(.rotate-30)</p>
<p class="rotate-40">Text Rotated by 40 degrees(.rotate-40)</p>
<p class="rotate-50">Text Rotated by 50 degrees(.rotate-50)</p>
<p class="rotate-60">Text Rotated by 60 degrees(.rotate-60)</p>
<p class="rotate-70">Text Rotated by 70 degrees(.rotate-70)</p>
<p class="rotate-80">Text Rotated by 80 degrees(.rotate-80)</p>
<p class="rotate-90">Text Rotated by 90 degrees(.rotate-90)</p>
<p class="rotate-100">Text Rotated by 100 degrees(.rotate-100)</p>
<p class="rotate-200">Text Rotated by 200 degrees(.rotate-200)</p>
<p class="rotate-300">Text Rotated by 300 degrees(.rotate-300)</p>
<p class="rotate-310">Text Rotated by 310 degrees(.rotate-310)</p>
<p class="rotate-320">Text Rotated by 320 degrees(.rotate-320)</p>
<p class="rotate-330">Text Rotated by 330 degrees(.rotate-330)</p>
<p class="rotate-340">Text Rotated by 340 degrees(.rotate-340)</p>
<p class="rotate-350">Text Rotated by 350 degrees(.rotate-350)</p>
<p class="rotate-360">Text Rotated by 360 degrees(.rotate-360)</p>

jQuery Additions

BS4 Helper also adds and initializes components like Growing Progress Bars. Just add data-progress="grow" and data-max-width=[width relative to parent in percentage without % symbol](optional) to an <div> element with class="progress-bar". If you want to set a transition, add data-transition=[milliseconds] too. Add show-percentage="true" to show the percentage.

Note: BS4 Helper only allows one growing progress bar per page.

Rotated Elements

BS4 Helper also adds classes for rotating elements by different angles. Just include class="rotate-[measure of angle]".

Additional Styling

BS4 Helper also adds additional styling properties to Bootstrap 4 classes like .display-1,2,3,4.

New Classes

BS4 Helper also adds new classes to Bootstrap 4 like .heading.heading-large.heading-mediumheading-small.heading-redheading-orange etc.

Additional Components & Styles For Bootstrap, BS4 Helper Plugin/Github

See Demo And Download

Official Website(bhogi7589): Click Here

This superior jQuery/javascript plugin is developed by bhogi7589. For extra Advanced Usage, please go to the official website.