Advanced Bootstrap

Collapse

Collapse (Accordion) - 3.0

We are moving onward and upward, or is downward depending on how you 'visualize' learning code... Here we move down, moving ever so deeper into the trench, nearing the 5000m marker as we make our decent down to this 'virtual' Mariana Trench. Thus far we have cleared the surface, the light of the sea, past the point of no light and sinking down into the abyssal plain. At some 5000m below the surface, we start with the advanced set of Bootstrap 4 classes and attributes to kick up your website experience, driving to solidify your user experience. Our goal is The Mariana Trench of Website design and experience, so off we go.

Collapse, collapse is a great feature for limited space and content driven experiences. The user will interact with different panels to read and experience through the idea of 'page' turning or collapsing pages or more importantly a 'show'/'hide' or an 'accordion' feature for containers.

• .collapse data-toggle="collapse" target="#demo" - Toggle or Collapse (Show/Hide)
• #demo .collapse - Include div container which will ultimately 'show or hide' based on the user interaction.
• .collapse show - add this show class to the open or show div when implementing an accordion class or styled collapsible content feature.

Collapse: We show multiple examples here, a few collapse buttons/divs in singluar form and a multi-collapse or accordion style treatment. Collapse is another way to show a collapsible element(s). First showing a primary option and subsequence options. Again, you can see where this might come in handy when space is premium or you have a number of assets to show in a space space. Such as those videos, images you might find in an ecommerce site, or music band highlighting various shots on stage.

Media Objects

Media Objects - 3.1

What's this, a way to align content types without floats and absolute positioned containers? Yes, yes there is! Try Media Objects, a flexible way to align assets such as images and videos with content contained in a wrapper. The most basic media objects can be found on social media, such as profile images and summary, posts including avatar and comment. Ditto for reposts, comments and subcomments. More to come.

• .media media-body - Calling the media class along with it's subclass counter part will provide the needed containers to split the content left and right, top and bottom. Alignment example included as well
• .media align-self-center" - Although we don't provide all examples, this class aligns the icon element to the center of the media body element.

Media Objects: Media objects are a bit of a new 'beast' per say, something on the advanced side of Bootstrap... as for its 'usage', Media Objects may require front/back end portal implementations and a database to drive dynamic content. You can always handcode these sections as we have here within the tutorial. Ideally, 'dynamic content' is the gold standard, driving media objects and content in a symbiotic relationship as it is used today. More to come..

Carousels

Carousels - 3.2

Like Collapse (Show/Hide) and Accordions, Carousels allow the user to read various elements, content, images and or video without moving or scrolling down the page. The carousel and it's content will revolve or cycle through content contained within its container. Ideally, videos and image together with text to create a collection of 'mini' slideshows for your users to quickly consume and readthrough content.

• .carousel slide data-ride="carousel -
• .carousel-indicators -
• .carousel-inner -
• .carousel-item -
• .carousel-control-prev -
• .carousel-control-next -

Defaults: When space is limited what do you do? Collapse/Accordion - While Space might be limited, and you've got dozens of images or video clips to share with your customers, friends and family... The carousel option provides a tight, clean and scalable container in order to present and highlight those items. Give the carousel a try, our recommendation would be to keep this simple and straight forward. Drive out additional features once the experience for your customers has been defined. An example might be start with static text or images, while adding dynamic video at a later date. If it's a must from your product manager, hack away!.

Image Assets (1)

Have a look at image asset 1

Image Assets (2)

Have a look at this second image asset, asset 2

Image Assets (3)

Last and Final Image Asset (3)

Modals

Modals - 3.3

Modals are the new dialog box of recent past. Dialog boxes are used to alert the user or prompt the user to take some action. Or Overlays requesting users to join list upon list.... Similarily, modals can show additional content, in a tasteful manner. The user selects some action to see more, additional hightlighted feature/featured images, videos above the main content. Modals allow the developer to focus content for the user, while providing the necessary button or click events to return to the main experience or content.

• .card -

Modals: We used the same content presented in the collapse section above, however the experience can be seen as 'intrusive'. However, far less intrusive thatn say 'window pop, overlays or interstitals. Again, modals skip both old precendent and new 'window' pops or tabs. Seen today, when clicking on content which pops up a new window and takes the user to that page. Coincidentally, another behavior that has been overplayed these days. Now you see coupon codes, newletter and email signup forms gallore. The point here, we try to be as unintrusive as possible, with the UI or UX tools available today. So, the takeaway, modals can be used in a nonintrusive fashion and presented in a nice, consumable/chewable bite..

Toast

Toast - 3.4

Someone get me some toast! Not that kind of toast, Bootstrap'n toast. This one includes some JQuery, an alert text box that opens for a few seconds depending on toast timing. Toast is a great alternative for form messages, submission, error and success. Let's have a closer look and where you might use a toast component.

Toast Code

• .toast - Toast alert, popup ~3-5 seconds

JQuery Code Snippet - Toast Method

        <script>
        $(document).ready(function(){
          $('.toast').toast('show');
        });
        </script>
      

Toast: Toast. Toast. Toast. Name that movie quote, it's not an impossible movie to remember. But it might be your life's mission to figure that one out. In the meantime, the toast alert box can be used for messages, alert messages and more. Check it out!.

Progress Bar

Progress Bar - 3.5

• .progress -
• .progress-bar -
• .progress-bar-striped -
• .progress-bar progress-bar-striped progress-bar-animated -

Progress Bar: A quick and dirty progression bar showing background, bar and percentage complete or fulfilled. Colors can also be used here, calling the color classes discussed over on Bootstrap Basics - Colors. We can animate this bar, add striping and create multi-layered bars for storage or bar graphs.

Badges

Badges - 3.6

Badging is straight forward, need a class for 'extra or additional' details? A badge might just be the thing. Badging can be scaled, 'painted', transformed and modified to include text and other badging for greater detail. Painted just refers to color, following the color patterned developed with Bootstrap or create your own.

• .badge -
• .badge-success -
• .badge-pill -

Badges: Like most elements in Bootstrap 4 (TWBS), color, size and weight are maluable. Transform your badges, status 'i.e. inbox messages, pills and more'.

Spinner

Spinner - 3.7

Spinners or loading class, helps the user pause and understand something is being processed or is currently under process. Spinners come in various shapes, sizes and animation style, again, following the standards set forth in the Bootstrap design guide.

• .spinner-border -
• .spinner-grow -

Spinner: Spinners are a lot like badges, they come in all kinds of shapes, colors, sizes, animation styles and more... some appear to pulsate and beat, while other grow, change colors and signify 'building'. Share a 'status' with your customers quickly, 'the system is doing something' without all the roadblocks. Simple right? We see these kinds of spinner messages daily, if not minute to minute depending on which social media, news or website your reading. Keep it simple, 'work in progress' here! We didn't show all the styles, animation nor size differences or similarities. More will be provided in the reference section under the 'Get Started' main navigation link.

Filters

Filters - 3.8

Last up under the Bootstrap Advanced moniker, we have filtering, which may or may not be 'advanced' per say. The reason it's here for now is the reliance on dyanmic data or at least other data inorder for this to work. If your just starting out, this may or may not be at the top of your active list of 'must-haves'. So, with a searchable container, we use the filter to process data. So, what code do we cover? We'll again, this code relies on JQuery to process i.e. filter data. One final note, be aware of uppercase/lowercase and case specificity.

JQuery Filter Code

        <script>
        $(document).ready(function(){
          $("#aInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#aList li").filter(function() {
              $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
          });
        });
        </script>
        

Filters: Filters work like 'hide and go seek' give the search input a few letters and viola! Filtering content by alphnumerical characters. Sounds so simple, right? In all reality, we've come along way from front/back end dependencies... with a quick JQuery script and an input box, you've got yourself away to filter content, eliminating variables or 'content' not required for the search action.

Template

Template - 3.9

Examples of both Fixed and Full-width, always mobile first

Templates: We've got template(s); more to come of course. Have a look around you! Take a peak at the source code, all of what you see is Bootstrap4 (TWBS), check out the example below and throughout the website.