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 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 5.15.3

FontAwesome minified 5.15.3

<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>