Miscellaneous Widgets

This page started out as a separate page on ScrollSpy. The point of ScrollSpy is to use it on a long page to navigate different sections on the page, so it made sense to me to fill it up talking about some of the other Bootstrap Widgets that didn't warrant their own page. Not to mention, this is a learning exercise for me, so I'm not inclined to make it a rewrite of the W3Schools reference pages on Bootstrap. I'm inclined to move along to other projects.

ScrollSpy

ScrollSpy sounds so mysterious, like yet another nefarious plot to steal your information and sell it. Actually, it’s pure and simply a technique for navigating a long page with one of the navigation menus described on my Navbar page, and as you scroll through the page, it's supposed to update where you are in that navigation set. Before you continue reading, scroll this content towards the bottom, and watch what happens to the menu at the left.

Two things hung me up while coding this page.

The first is that I wanted to maintain the site navbar at the top, and use a separate menu to indicate sections on this page. I've seen an example where the page had 3 or 4 long sections, so they used a horizontal menu near the top and to the right, and styled to not look like a menu. I chose to use a vertical sidebar type menu. The active status on the nav-link, which gives the user an indication of where they are on the page, gave me a lot of heartburn. You have to be careful that you don't confuse the bootstrap code as to which nav-link on your page you're referring to (because you have two menus), and you have to be careful that any css selectors aren't also confusing the issue.

The second issue was that when I clicked on a side menu to navigate the page, the header wound up under the top menu. Apparently this is not what the data-offset parameter is for, although you'd think so from reading the documentation. I tried several kludges; and finally wound up setting a large padding-top to the header for each section. That's what's creating all that blank space between sections which I didn't want to do, but a girl's gotta do what a girl's gotta do.

I've included a lot of "blah blah" on this page because it makes it more clear what the ScrollSpy is actually doing, or in this case, not doing. When it's working, short sections get slightly confusing, although most users will adapt.

The reference page is here.

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

Modal

Modal are those friggin’ pop-up windows that have so seriously overcluttered so many websites these days you can't even read the content. I'm reluctant to provide the link, but if you have a client who really wants them, click here to get to the reference page on it. Do you get that I hate them? ‘Nuff said.

Typography

The typography section is actually pretty cool. They have a bunch of tag classes that can help style your HTML content slightly more easily (assuming you know they're there), and of course you can override it in your own css. Examples include:

Class	Description	Example
<small>	creates a secondary heading within an <hn> heading	An example of a secondary heading
<mark>	will highlight text	with a light yellow background
<abbr>	will add a dotted underscore so you can spell out the abbreviation ...	for the ui. It works exactly like a tooltip that you can insert with HTML, although Bootstrap does add the little question mark to your cursor which is sort of cute.
<blockquote>	will set up content that you’re quoting from another source so that it stands out as a blockquote	Consistency A foolish consistency is the hobgoblin of little minds.... Ralph Waldo Emerson
<dl>	is a subset of an unordered list, like the <ul> construct, only it’s a simple description list.	My favorite Starbucks order for a day when I can afford the calories: drink - cascara cold foam cold brew meal - chicken caprese panini dessert - blueberry scone
<kbd>	will make it clear to the user it’s a keyboard input, for example, this HTML <p style="color:red"> press <kbd>F1</kbd> for help.</p> will display as	press `F1` for help.
<pre>	will display in a fixed font and preserve spaces and line breaks.	<script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="popover"]').popover(); }); </script>

There are lots more, you can see the full list here.

There are a whole list of .text-* and bg-* colors you can read about here. I’m somewhat disdainful of these, because many of them are rather unhelpful color names like “success”, “info”, and “secondary”. You could just as easily set up your own in your own css, and gear them to your site’s color scheme.

Tables

This works similar to setting up table styling in Excel: by choosing the right class name, your table can have alternating colors on the rows, dark backgrounds, highlighting on the hovered row, and so forth. If you have to do a table, read about it here. Be sure to read down to Responsive Tables.

As you may have guessed, I used a table for the typography excerpts I listed in the above section. That table is 'straight out of the box', with just a little bit of inline styling.

<div class="container" style="background-color:var(--mrAltLiteColor);color:var(--mrAltDarkColor)">
	<table class="table-responsive-sm table-striped table-bordered table-hover"<
		<thead>
			<tr>	
				...

Progress Bar

If you’ve done a web survey or some other lengthy web process, you’ll recall that they’ll tell you how far along you are in the process using a progress bar. Read about it here.

Spinner

Use this when starting on what could potentially be a lengthy process, such as searching a database, so the user doesn’t start to wonder if they’ve clicked a broken link. They come in a variety of colors and styles.

Pagination & Breadcrumbs

The above is an illustration of a typical pagination, read about it here. You'll see it on sites like Amazon when you search on something that has a lot of hits, for example, lamps.

The above is an illustration of what breadcrumbs might look like. Read about it on the same page. It’s not working here, but where it’s used, for example a shopping site, you can backup a few levels in one click.

Forms

Forms are a big deal on the web to collect information, and my days of doing that kind of information-gathering are thankfully past. You can start reading about it here, but be warned there are several aspects you’ll want to dive into further such as inputs and custom forms.

Toast

The difference between toast and popovers ( I demonstrate popovers on this page) is that toast disappears on it’s own in a few moments, which annoys me when I get a toast just as the phone rings, so of course I miss whatever somebody wanted to communicate to me. Probably an ad for a new cellphone. If you must, you can read about it here.