Bootstrap 4.6.2

<link href="https://scripts.afit.edu/bootstrap4/css/bootstrap.min.css" rel="stylesheet" type="text/css">

Bootstrap Bundled JS 4.6.2

<script src="https://scripts.afit.edu/bootstrap4/js/bootstrap.bundle.min.js"></script>

Bootstrap 5.3

<link href="https://scripts.afit.edu/bootstrap5/css/bootstrap.min.css" rel="stylesheet" type="text/css">

Bootstrap Bundled JS 5.3

<script src="https://scripts.afit.edu/bootstrap5/js/bootstrap.bundle.min.js"></script>

Stable jQuery Releases

jQuery minified latest (3.7.1)

<script src="https://scripts.afit.edu/js/jquery.latest.min.js"></script>

jQuery minified 3.7.0

<script src="https://scripts.afit.edu/jQuery/jquery-3.7.0.min.js"></script>

jQuery minified 3.6.1

<script src="https://scripts.afit.edu/jQuery/jquery-3.6.1.min.js"></script>

jQuery minified 3.6.0

<script src="https://scripts.afit.edu/jQuery/jquery-3.6.0.min.js"></script>

jQuery minified 3.5.1

<script src="https://scripts.afit.edu/jQuery/jquery-3.5.1.min.js"></script>

jQuery minified 3.4.1

<script src="https://scripts.afit.edu/jQuery/jquery-3.4.1.min.js"></script>

Stable jQuery UI Releases

jQuery UI JS

<script src="https://scripts.afit.edu/jQueryUI/jquery-ui.min.js"></script>

jQuery UI CSS

<link href="https://scripts.afit.edu/jQueryUI/jquery-ui.min.css" rel="stylesheet" type="text/css">

FontAwesome 6.5.1

FontAwesome minified 6.5.1

<link href="https://scripts.afit.edu/fontawesome/all.min.css" rel="stylesheet" type="text/css">

AOS (Animate-on-Scroll)

AOS CSS Minified - place this in the head of your document

<link href="https://scripts.afit.edu/aos/aos.css" rel="stylesheet" type="text/css">

AOS JS Minified - place this below your call to jQuery

<script src="https://scripts.afit.edu/aos/aos.js"></script>

Place this beneath the AOS.JS and jQuery calls.

    
    <script>
      AOS.init({
        easing: 'ease-in-out-sine'
      });
    </script>

Add the animations to your DIV elements but adding data-aos="[effect]" attributes to the tag. A complete list can be found here:

fade-up
fade-down
fade-right
fade-left
fade-up-right
fade-up-left
fade-down-right
fade-down-left
flip-left
flip-right
flip-up
flip-down
zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right

Example:

<div class="d-block bg-primary p-4 text-center text-white" data-aos="zoom-in">My info here</div>

HTML Page Tour

Tour CSS Minified - place this in the head of your document

<link href="https://scripts.afit.edu/tour/tour.css" rel="stylesheet" type="text/css">

Tour JS Minified - place this below your call to jQuery

<script src="https://scripts.afit.edu/tour/tour.js"></script>

Place these attributes in your tags for each step within the tour.

data-title="Item 1" (this is the title of the item)
data-intro="A description of the item." (describes the item)
data-step="1" (the order number of the item)
Trigger the tour using onClick="introJs().start()"

Sortable DataTables

DataTables CSS Minified - place this in the head of your document

<link href="https://scripts.afit.edu/datatables/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">

DataTables JS Minified - place this below your call to jQuery

<script src="https://scripts.afit.edu/datatables/js/jquery.dataTables.min.js"></script>

Add the following to your table tag - the name can be any valid name:

id="sortTable"

Add this script below the .js file to initialize the datatables:

    <script>
    $(document).ready( function () {
        $('#sortTable').DataTable(
            {
            paging: true,
            searching: true
            }
        );
    } );		
    </script>

Change the #sortTable to match the ID of the table you want to make sortable.

Change the values of paging and searching to turn the automatic pagination and search feature on or off with true or false.

Tagger Field

Tagger CSS - place this in the head of your document

<link href="https://scripts.afit.edu/tagger/amsify.suggestags.css" rel="stylesheet" type="text/css">

Tagger JS - place this below your call to jQuery

<script src="https://scripts.afit.edu/tagger/jquery.amsify.suggestags.js"></script>

Add the following to your table tag - the name can be any valid name:

            
            <style>
            .amsify-suggestags-input-area
            .amsify-select-tag.col-bg {
                background: #800002;
                color: white;
            }
            </style>

Your tag, using jpBSField, should look like this:

            
            <cf_jpBSfield size="12" ID="country" name="country" type="text" label="Country Name" placeholder="enter country name" required="true" requiredtext="Please enter country name" value="USA" helptext="To generate a tag, type your tag and press the comma key." tooltip="true" tooltipcontent="Type a country name and press the commma key.  Max of 5 countries!">

Add this script below the .js file to initialize the tag script. Change the listed ID to the ID of your field. Note the different options:

    <script>
	$('input[name="country"]').amsifySuggestags({
		//set the max number of tags
			tagLimit: 5,
		//set the list of suggestions for users to pick from
			//suggestions: ['USA', 'Russia', 'Germany', 'Italy', 'Austria', 'Switzerland', 'Scotland'],
		//if you want folks to pick from the list only set this to true
			//whiteList: true,
		//For each of the suggestions you can specify a background
			//backgrounds: ['#ff8c00', '#ff8c00', '#ff8c00', '#ff8c00', '#ff8c00', '#ff8c00', '#ff8c00'],
		//OR you can specify the Bootstrap classes
			//classes: ['bg-primary','bg-primary','bg-primary','bg-primary','bg-primary','bg-primary','bg-primary'],
		//set the text colors for the suggested tags
			//colors: ['white', 'white', 'white', 'white', 'white', 'white', 'white'],
	});	
    </script>

I recommend adding tooltips in order to make the tag usage understood:

            
            <script>
            $(function () {
              $('[data-toggle="tooltip"]').tooltip()
            })
            </script>

Fast Bootstrap

There are three classes in FastBS. They allow you to create avatars, off-canvas navigation, and a section called a blankslate.

FastBS CSS - place this in the head of your document

<link href="https://scripts.afit.edu/bootstrap4/css/fastBS.css" rel="stylesheet" type="text/css">

You can create avatars out of images or DIV tags like so:

            
<span class="avatar text-white bg-danger">JP</span>
<span class="avatar text-white bg-primary"><i class="fas fa-star"></i></span>
<img class="avatar" src="images/avatar.png" />

You can create different sizes of avatars using Bootstrap's breakpoint size classes like so:

            

<img class="avatar avatar-xs" src="images/avatar.png" />
<img class="avatar avatar-sm" src="images/avatar.png" />
<img class="avatar" src="images/avatar.png" />
<img class="avatar avatar-lg" src="images/avatar.png" />
<img class="avatar avatar-xl" src="images/avatar.png" />
<img class="avatar avatar-xxl" src="images/avatar.png" />

You can create a stack of avatars - to show the people that have liked/accessed/etc an item, like so:

            

<div class="avatar-stack">
    <span class="avatar text-white">+6</span>
    <img class="avatar border-danger" src="images/avatar.png" />
    <img class="avatar" src="images/avatar.png" />
    <img class="avatar" src="images/avatar.png" />
    <img class="avatar" src="images/avatar.png" />
</div>

You can create a group of avatars - to show the people that have liked/accessed/etc an item, like so:

            

<div class="avatar-group">
    <img class="avatar border-danger" src="images/avatar.png" />
    <img class="avatar" src="images/avatar.png" />
    <img class="avatar" src="images/avatar.png" />
    <img class="avatar" src="images/avatar.png" />
	<span class="avatar text-white">+6</span>
</div>

You can create an avatar with an attached dropdown menu like so:

            

<div class="dropdown mt-4">
  <button class="btn btn-transparent" type="button" data-toggle="dropdown" aria-expanded="false">
    <img class="avatar avatar-lg" style="border: 2px solid white;" src="images/avatar.png" />
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

A Blankslate is a section of code used to warn users that they have hit an area they do not have access to. This can be useful for folks accessing pages without logging in or accessing specific tools in your app that require elevated access:

            

		<div class="blankslate">
			<img class="blankslate-top-img" src="images/server.png" />
			<div class="blankslate-body text-white">
				<h4>You don't have access to this issue</h4>
				<p>
				Make sure the issue exists in this project. If it does, ask a project
				admin for permission to see the project's issues.
				</p>
			</div>
			<div class="blankslate-actions">
				<button class="btn btn-secondary" type="button">Secondary action</button>
				<button class="btn btn-primary" type="button">Primary action</button>
			</div>
		</div>

Creating an off-canvas menu in Bootstrap 4 is now very simple. Just use the following code. Please note that the jQuery script included means you will need a jQuery call in your pages.:

            

<!--- Left off-canvas sidebar --->
<div class="bs-canvas bs-canvas-left position-fixed bg-light h-100">
	<header class="bs-canvas-header p-3 bg-success">
    	<h4 class="d-inline-block text-light mb-0">Canvas Header</h4>
        <button type="button" class="bs-canvas-close close" aria-label="Close"><span aria-hidden="true" class="text-light">×</span></button>
    </header>
    <div class="bs-canvas-content px-3 py-5">
    	<!--- Place your sidebar content here --->
    </div>    
</div>

<!--- Right off-canvas sidebar --->
<div class="bs-canvas bs-canvas-right position-fixed bg-light h-100">
	<header class="bs-canvas-header p-3 bg-primary overflow-auto">
    	<button type="button" class="bs-canvas-close float-left close" aria-label="Close"><span aria-hidden="true" class="text-light">×</span></button>
        <h4 class="d-inline-block text-light mb-0 float-right">Canvas Header</h4>
    </header>
    <div class="bs-canvas-content px-3 py-5">
    	<!--- Place your sidebar content here --->
    </div>    
</div>

<script>
jQuery(document).ready(function($){
	$(document).on('click', '.pull-bs-canvas-right, .pull-bs-canvas-left', function(){
		$('body').prepend('<div class="bs-canvas-overlay bg-dark position-fixed w-100 h-100"></div>');
		if($(this).hasClass('pull-bs-canvas-right'))
			$('.bs-canvas-right').addClass('mr-0');
		else
			$('.bs-canvas-left').addClass('ml-0');
		return false;
	});
	
	$(document).on('click', '.bs-canvas-close, .bs-canvas-overlay', function(){
		var elm = $(this).hasClass('bs-canvas-close') ? $(this).closest('.bs-canvas') : $('.bs-canvas');
		elm.removeClass('mr-0 ml-0');
		$('.bs-canvas-overlay').remove();
		return false;
	});
});
</script>

Included in FastBS.css are centering utilities that allow you to center text and elements vertically and horizontally. Available classes are text-center, center-x, center-y, and center-xy.

		
		<div class="center-xy p-4 bg-danger" style="height:200px;">Your text here</div>

FastBS.css also includes an entry of the extra-small (xs) media query from Bootstrap 5 which allows for accurate show/hide switching. Using the following class chains will allow you to show specific content on medium, large, and extra-large screens and then show different content on small and extra-small screens. NOTE: Trying this without the included xs media query will result in showing both DIV tags on screens smaller than the small breakpoint in Bootstrap 4 - which is as small as 4 goes.



<div class="d-xl-none d-lg-none d-md-none d-xs-block d-sm-block bg-success">Show on small</div>

<div class="d-xs-none d-sm-none d-xl-block d-lg-block d-md-block bg-primary">Show on Large</div>

jpPulse custom tag

You can apply a pulse animation effect to any block level element with ease using one custom tag.

The pulse tag is very simple to use. Just include the tag in the same area as your CSS links - just make sure it is after your call to Bootstrap. Then, just tell the tag what color you want the pulse to be, apply the class to your block-level element(s) and that's it. Here are three examples. Note the pulse and pulse-box classes


	<cf_jpPulse color="danger">
	
	
<button type="button" class="btn btn-secondary">Profile <span class="badge badge-warning pulse">9</span><span class="sr-only">unread messages</span></button>
		
		
		
<button type="button" class="btn btn-secondary pulse-box">test</button>
		
		
		
		<!--- start card --->
<div class="card my-5 pulse-box" style="width:300px;">
	<img src="https://picsum.photos/600/400?random" class="card-img-top" alt="...">
    <h4 class="card-header">Card header here (optional)</h4>
	<div class="card-body">
		<h5 class="card-title">Card title</h5>
		<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
	</div>
    <div class="card-footer">
    	<a href="" type="button" class="btn btn-primary btn-block">Go Somewhere</a>
    </div>
</div>