iPro / Interactive

Alerts

Soft Alerts

Hard Alerts

Inline Alerts

Tooltips

Enter the text for the particular style guide section you are describing.
Things to know when using the tooltip plugin:

Tooltips rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js in order for tooltips to work!
If you’re building our JavaScript from source, it requires util.js.
Tooltips are opt-in for performance reasons, so you must initialize them yourself.
Tooltips with zero-length titles are never displayed.
Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc).
Triggering tooltips on hidden elements will not work.
Tooltips for .disabled or disabled elements must be triggered on a wrapper element.
When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use white-space: nowrap; on your <a>s to avoid this behavior.
Tooltips must be hidden before their corresponding elements have been removed from the DOM.

Dependency: <script src="js/popper.min.js"></script>

Modal/Popup Window

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.
Clicking on the modal “backdrop” will automatically close the modal.
Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.
Once again, due to position: fixed, there are some caveats with using modals on mobile devices. See our browser support docs for details.
Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals.


<div class="modal-dialog" role="document">
	<div class="modal-content">
		<div class="modal-header">
			<h5 class="modal-title">Alert Message</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
				</button>
			</div>
		<div class="modal-body">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
		<hr>
		<div class="row pl-4 pr-4 pb-4 pt-1">
			<div class="col-4"><button type="button" class="btn btn-tertiary btn-block" data-dismiss="modal">Close</button>
			</div>
			<div class="col-4"></div>
			<div class="col-4"><button type="button" class="btn btn-primary btn-block" data-dismiss="modal">OK</button>
			</div>
		</div>
	</div>
</div>

Loading

Loading animations are simple, illustrated by a rotating blue bar or circular rotating.

The transparent image format is [.PNG] and the size is 100 pixel width, the height is set to auto in the style sheet. The animated loading bar is contained within a .col-sm-# div. The container div's class of .col-sm-# is not defined, you will need to define the number value during your page development. Various layouts may dictate a different value due to the complexity of the layout.

Dependency: <script src="js/core.js"></script>

Warning: include(include/interactive-loading-ipro.php): failed to open stream: No such file or directory in /home/robgaona/public_html/img/quotit/style-guide/ipro/interactive.php on line 189

Warning: include(): Failed opening 'include/interactive-loading-ipro.php' for inclusion (include_path='.:/opt/alt/php74/usr/share/pear') in /home/robgaona/public_html/img/quotit/style-guide/ipro/interactive.php on line 189

Progress Bar


<div id="myProgress" class="margin-bottom-15">
  <div id="myBar"></div>
</div>

UI Style Guide