Home > User Experience > Bootstrap 4 Visual Learning Guide | Part 2

Bootstrap 4 Visual Learning Guide | Part 2

Bootstrap 4 Visual Learning Guide | Part 2


Back to Part 1

This five-part series fills a gap in the learning and reference works on introductory web design, by covering the Bootstrap 4 framework. Instead of the terse definitions written for experts found in online documentation resources, or long commentaries to ease novices into programming, this series strikes a balance between succinct explanation and complete visualizations of code so that the key concepts are learned through easy-to-follow examples. This series details comprehensively the use of Bootstrap 4 for creating responsive websites that display well across device types. This article series presumes a basic knowledge of HTML, which can be obtained from my HTML 5 Visual Learning Guide, and a basic knowledge of CSS, which can be obtained from my CSS 3 Visual Learning Guide.

‘Jumbotron’ is probably the funnest name in all of web development to say aloud. If you’ve ever been to the Kenyan coast, it will remind you of the Swahili word Jambo, which is one of the world’s greatest words and means ‘Welcome,’ and jumbotrons are usually used as welcoming elements on landing pages (there’s your mnemonic device!). Come to think of it, instead of always using “Hello World” in all of the introductory coding tutorials, we should start using “Jambo World!” The jumbo in Jumbotron basically means ‘super huge,’ and the ‘tron’ part is just a generic electronic-sounding phoneme, as in ‘tronic or Tron. ‘Jumbotron’ is a much more exalted sounding word and concept than “Banner” which is what it essentially is– it’s a great element to use at the top as your web page banner. ‘Jumbotron’ in general, though, just sounds much cooler than ‘banner.’. Often you will use BS4 display classes, display- to make jumbotron-nested text even larger than the standard HTML heading elements.

In this first example, the jumbotron is placed inside of a container <div> just above a pink row.

.row {
height: 300px;
background-color: pink;
margin: .1%;
}
p {
font-family: Inconsolata;
font-size: large;
color: white;
font-size: auto;
text-align: center;
padding-top: 20px;
}
.jumbotron {
text-align: center;
font-family: Anton;
font-size: xx-large;
background-color: darkolivegreen;
color: white;
}
<div class="container"><div class="jumbotron">
<h1 class="display-3">JUMBOTRON hate puny Banner</h1>
<p class="lead">Do you get the Hulk joke?</p>
<hr style="border-top: 1px solid white;">
<br>
<a class="btn btn-danger btn-lg" href="#" role="button">Push Large Button</a><br>
<a class="btn btn-danger btn-sm" href="#" role="button">Push Small Button</a>
</div>
<div class="row"></div>
</div>

Alternately, with the jumbotron jumbotron-fluid class (that is not a typo– these are two classes defined at the same time), the jumbotron can extend all the way to the edges of the browser

<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">JUMBOTRON hate puny Banner</h1>
<p class="lead">Do you get the Hulk joke?</p>
<hr style="border-top: 1px solid white;"><br>
<a class="btn btn-danger btn-lg" href="#" role="button">Push Large
Button</a><br>
<a class="btn btn-danger btn-sm" href="#" role="button">Push Small
Button</a>
</div>
<br>
</div>
<div class="container-fluid">
<div class="row"></div>
</div>.

This example also allows the introduction of some new BS4 concepts: color utilities, button components and typography styling classes.

BS4 has a rich collection of typographic styling classes and text utilities which will be peppered throughout these examples when there is a good opportunity to introduce them– and now is one such opportunity! The display class offers options beyond the usual set of HTML headings, i.e. <h1> to <h6> allowing heading sizes truly worthy of jumbo-sized jumbotrons (and you aren’t limited to using this class only inside of jumbotrons, naturally). The BS4 documentation refers to the display class as allowing for “more opinionated” headings, which will give a sense as to the design opportunity they present. Let’s implement them.

In this example, we find that there are five display classes, e.g. if you try to use a non-existent class of display-6, it will render the same as display-5. The display class peters out after 5, so don’t assume there is any kind of parity with the 6 HTML heading elements. It’s worth mentioning, however, that in BS4 each of the 6 HTML heading types also exist as classes, so you can call the headings as classes on text elements, instead of wrapping text in the heading tags, e.g.

<p class=”h2”>This is the same as placing h2 tags around text.</p>

Inside of a jumbotron, everything becomes generally more jumbo, as shown by the dramatic scaling up of the font-size of a plain ol’ vanilla <p> element.

<h1 class="display-1">JUMBOTRON</h1>
<h1 class="display-2">MEGATRON</h1>
<h1 class="display-3">BIGGYTRON</h1>
<h1 class="display-4">SOSOTRON</h1>
<h1 class="display-5">TINYTRON</h1>

BS4 has a lot of ‘super succinct shorthand’ classes, e.g. m for margin, mb for margin-bottom, p for padding, p-l for padding-left etc. which will be discussed later in reference to spacing classes. In this context, let’s look at a less abbreviated class, text. Whereas in CSS you might write text-align: center; in BS4 you can just write text-center in the list of classes assigned to an element.

<h1 class="display-1 text-center">JUMBOTRON</h1>
<h1 class="display-2 text-left">MEGATRON</h1>
<h1 class="display-3 text-right">BIGGYTRON</h1>
<h1 class="display-4 text-left">SOSOTRON</h1>
<h1 class="display-5 text-right">TINYTRON</h1>

Let’s introduce two other text classes, text-muted and lead. muted is actually a general class category that applies a muted color (somewhat greyed out) to a variety of elements such as text or buttons. A common design pattern for its use is to enclose the muted text inside of <small> tags inside of a parent text element and assign the class of text-muted to the text to be greyed out. The lead class is for the ‘clever by-line’ or lead-in after a main heading. In this example, we see that the behavior of the lead class is somewhat context-dependent, because it works in completely opposite ways inside of a standard column compared to how it renders when nested inside of a jumbotron. In the jumbotron, the lead-classed text size decreases relative to an equivalent non-lead text element, whereas outside the jumbotron, the lead class increases the element’s relative size. Here, two paragraph elements are contrasted, inside a row versus inside of a jumbotron, with and without the lead class added.

<div class="jumbotron">
<h1 class="display-1 text-center">LOUD SOUND<br>
<small class="text-muted">faded echo of the sound</small>
</h1>
<hr style="border-top: 1px solid white;">
<br>
<p>I am just a paragraph.</p>
<p class="lead">I am a clever lead line.</p>
</div>
<div class="row">
<div class="col">
<p>I am just a paragraph.</p>
<p class="lead">I am a clever lead line.</p>
</div>
</div>

Speaking of sounds and their faded echoes, with buttons there is a kind of echo effect that goes like this: BUTTON Button button…. this is the mnemonic device I am offering for getting to know buttons in BS4. The first button is the button HTML tag, <button>. It’s first echo is the BS4 class, .button. The third button concept might be adding a color utility as a second class to the button class inside of the <button> opening tag. A fourth button class might indicate its size, and yet another its role. Thus, a button in BS4 should invoke in your inner mnemonic ear: BUTTON btn btn btn button…..

A button construct thus might look like this:

<button type="button" class="btn btn-danger">Oopsy</button>

Count that– no less than five different mentions of ‘button’ in some way, in a single button! Because buttons are basically interface elements that you click on, and so are links (anchor elements, <a>), often the <button> element is not used at all, and instead a highly stylized <a> element takes over a button function. Here is how an anchor might be written to perform button duties in BS4. They look pretty equivalent, so you’ll have to develop your own rationale as to which to use when (and then add your voice to the Stack Overflow debates on this subject).

Here is a link with four button associations to define it:

<a class="btn btn-danger btn-lg" role="button" href="#">Self Destruct</a><br>

BS4 predefines a lot of style with its classes– which is why it’s so handy! — and one of the things it predefines is a collection of color/function associations, some of which are intuitive because they map to everyday things like color coded street lights, and others which you’ll just have to accept as a part of today’s design conventions. The button utility styles of color/function associations are:

● Success
● Warning
● Danger
● Primary
● Secondary
● Dark
● Light
● Info
● Link

There are three basic sizes of buttons: tall, grande and venti. Oops, I meant that a normal button size is just btn, a large button is btn-lg, and a small button is btn-sm. If you need a super wide button, spanning the full width of the parent, use btn-block. There is also an option to make buttons outlined instead of filled with a solid color. Since these are BS4 button classes, you should expect that these styles are preloaded with CSS pseudo-classes, so hover the mouse over the buttons and click on them to see how they change based on their state in the interaction flow. Practice assigning actual href URLs to these links to experience them more fully.

Let’s assign some color/function associations– more formally known as utilities — to a variety of buttons. One ‘nifty trick’ that is happening in this example is that all the buttons have been placed inside of a <div> element that has the class text-center, so that they align in the middle of the jumbotron.

<div class="text-center">
<a class="btn btn-outline-danger btn-lg" href="#" role="button">Self Destruct</a><br>
<button type="button" class="btn btn-danger">Oopsy</button>
<button type="button" class="btn btn-success">Yay</button>
<button type="button" class="btn btn-info">Informative</button>
<a class="btn btn-dark" href="#" role="button">Dark</a><br>
<a class="btn btn-light btn-sm" href="#" role="button">Light</a>
<a class="btn btn-warning btn-sm" href="#" role="button">Watch
Out</a>
<a class="btn btn-outline-secondary btn-sm" href="#" role="button">Not Primary</a><br>
<button type="button" class="btn btn-link">Linko</button><br>
<a class="btn btn-outline-dark btn-block" href="#" role="button">Low Low Low Rider</a><br>
</div>

container version

container-fluid version

Buttons can be organized into somewhat more coherent groupings than the above example, by making use of Button Group components. A button group is a way of using classes to define group behavior for a set of related buttons. Button groups can take the large and small class modifications via btn-group-lg or btn-group-sm , which have the same effect when applied at the group level as btn-sm or btn-lg would have if applied to each button individually. With a button group, a <div> is first created in which the set of buttons are placed, and the containing <div> has the class of btn-group.

<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-success">Green</button>
<button type="button" class="btn btn-warning">Yellow</button>
<button type="button" class="btn btn-danger">Red</button>
<button type="button" class="btn btn-info">Info</button>
</div>

A dropdown menu can be created with the classes dropdown-menu for the containing <div> and dropdown-item for each link in the menu, both of which are placed inside of an enveloping btn-group <div>.

<div class="btn-group">
<button type="button" data-toggle="dropdown" class="dropdown-toggle btn-lg btn-dark">
THE DROP</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">DJ # 1's Drop</a>
<a href="#" class="dropdown-item">DJ # 2's Drop</a>
<a href="#" class="dropdown-item">DJ # 3's Drop</a>
<a href="#" class="dropdown-item">DJ # 4's Drop</a>
</div>
</div>

This example also uses one of the super-succinct spacing classes in the lowest button group, mb-3 which places a margin-bottom beneath each of the vertically arranged buttons. The ‘3’ in this mb class indicates a BS4 spacing level, not a number of pixels, e.g. it doesn’t mean 3px but instead is a BS4 unit. The higher the number, the greater the spacing will be. The bottom button group arranges the buttons vertically via the btn-group-vertical class assignment.

While the built-in styles of BS4 are obviously very handy, you can modify them if you need to. The easiest way to do this is to create your own CSS targeted at the BS4 classed element you want to restyle. Just create your own new class as an add-on to the BS4 class list and write your custom CSS. Below, the very dangerous-looking btn-danger Self Destruct button has been made to seem less dangerous, by taking on an orange citrus-like border, a white background, rounded corners and blue font color. Note the placement of the new custom class in anchor element’s class list (bolded for easy finding).

.custom {
background-color: white;
border-radius: 50%;
border-color: orange;
height: 5%;
border-width: 4px;
color: blue;
}
<a class="btn btn-outline-danger btn-lg custom" href="#" role="button">Self Destruct</a><br>

Continuing with the theme of clicking on the interface, the navbar class styles a group of links that can be used across a whole site, while with the nav class you can add additional navigation on individual pages. There are a number of associated classes for refining the design of your navigation links, and as above, you can choose to use <button> or <a> elements for user interactions. In this first example, the navbar’s class fixed-top assures that it always remains at the top of the browser as the other <div>s scroll past. The navigation items are id-based for internal navigation on the same page. These nav items are <a> elements with the class nav-link so that appropriate pseudo-class effects are applied during interactions. There’s a place within the navbar for a logo or brand identity placement of some kind, which uses the class navbar-brand and is here called “Non-traditional Rainbow.” Clicking on the brand name returns the user to the top of the page. This navbar also has some color classes, navbar-dark for use on a dark web page– we’ve made the <body> background-color black to give an excuse for using navbar-dark– and the color utility bg-secondary makes the navbar a medium gray. The class navbar-expand-lg prevents the navigation links from being spaced out across the entire width of the fluid container on large screens and is the first use in these examples of breakpoints which specify element behaviors based on screen size, a topic we will return to later in the series.

<div id="fixed" class="container-fluid text-center">
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary
fixed-top">
<a class="navbar-brand" href="#">Nontraditional Rainbow</a>
<a class="nav-link" href="#lime">Lime</a>
<a class="nav-link" href="#fuchsia">Fuchsia</a>
<a class="nav-link" href="#caramel">Caramel</a>
<a class="nav-link" href="#maroon">Maroon</a>
<a class="nav-link" href="#navy">Navy</a>
<a class="nav-link" href="#olive">Army</a>
</nav>
</div>

The next example creates a navbar made entirely of dropdown menu items, complete with another reference to The Drop in EDM music to liven it up. This example also introduces the concept of collapsing <div> elements that are opened and closed via toggle classes. Collapsing behavior is based on toggling the visibility of elements– the element that can collapse or expand is there on the page but is either visible or hidden. Collapsing is based on the concept that there is an element that has its state changed between hidden and visible, and there is another element that is causing the change to that state, which is the toggler. The toggler targets the collapsible element by its id. Let’s break this down. data-toggle is a custom attributed in BS4 that performs a JavaScript-based collapse function.

<nav class="navbar navbar-dark bg-danger">
<a href="#" class="navbar-brand">The Drop</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#theDrop" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="theDrop">
<ul class="navbar-nav"> …
</ul>
</div>

The element that will expand or collapse– that is, become visible or hidden– has an id assigned to it, “theDrop.” Whenever you see navbar-toggler-icon in BS4, think “hamburger.” And the next time you are at a fast food drive-through and you see a hamburger, think navbar-toggler-icon.

Since the dropdown menu items are enclosed within a <div> that has id=”theDrop”, this means that this containing <div> will be the target for collapsing behavior produced by interactions on the toggler element. As you can see, #theDrop is the data-target of the <button> which has the class navbar-toggler and has toggling defined as collapse. This is kind of a hamburger mouthful to say when written out like this! Let’s look at the visual rendering– first, here’s the state of things when the list item of dropdown menus is hidden by default.

Clicking on the hamburger, an action which has fewer calories than eating one, toggles the <div> containing the unordered list <ul> #theDrop of dropdown items to visible because #theDrop is its data-target.

What is now visible is the unordered list <ul>. But the drop doesn’t stop there! This is a collapsible list of dropdown elements about DJ drops, so let’s keep dropping. These are not your grandparents’ list items, or plain vanilla <li>. They are rather involved because each <li> is a dropdown menu containing dropdown-items.

<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">
DJ #1</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Drop the Bass</a>
<a class="dropdown-item" href="#">Drop It</a>
<a class="dropdown-item" href="#">Drip Drop Tick
Tock</a>
<a class="dropdown-item" href="#">Feel the Bass</a>
</div>
</li>

The first nested element inside the <li> is an anchor element <a> because these also have to function as clickable links. The classes nav-link and dropdown-toggle along with the associated attribute=“value” pairs instruct the browser to parse this link as a dropdown menu containing a series of links organized within the parent list element. These links in this example don’t go anywhere but on a website they would, presumably. The point being illustrated is to convey the navbar construct around collapsing dropdowns.

Let’s move on to its no-less-involved cousin component, nav.

Nav can fulfil many of the functions of a navbar– i.e. you can certainly place a nav component at the top of a website– but having both nav and navbar components at your disposal allows for more differentiation of roles for navigation links across a site and on a page. In this example, five nav variations are presented to introduce some of the capabilities of this component.

The first three nav rows vary mainly in their justification. The default is to align the links to the left of the browser window. justify-content-center will align the nav row to the center of the window and justify-content-end will align the row to the right side of the window. The right-aligned row also has all of its links in a disabled state just to illustrate this class. nav-link is the class for all the links in the <ul>s which comprise the nav rows.

The fourth and fifth nav rows use pill links, which show a filled-in area around each link when it is activated, and these links also toggle through a set of tabs which contain the content. Most of the content in the tabs is hidden except for the tab related to the active pill. The classes active and show active have been added to the pill links and the <div> content, respectively, so that by default on page load, the fifth link “Hemingway” is in an active state with its content visible. The tabs have classes of tab-pane and fade, which applies a quick fade-in/fade-out effect as the content panes switch content when the links are clicked. data-toggle is being used here, as in the previous example, to perform the JavaScript-based collapse work.

The default active link in the fourth and fifth nav row:

<li class="nav-item">
<a href="#pills-Hemingway" class="nav-link active" data-toggle="pill">Hemingway</a>
</li>
The default visible content in the active tab connected to the fourth and fifth nav rows:<div id="pills-Hemingway" class="tab-pane fade show active" role="tabpanel">
<p>The best people possess a feeling for beauty, the courage to
take risks,<br>
the discipline to tell the truth, the capacity for
sacrifice.<br>
Ironically, their virtues make them vulnerable; they are often
wounded, sometimes destroyed.
</p>
</div>

The fifth nav-row is vertically organized and uses the flex-column class for this purpose. It’s data-toggles are set to the same ids of the fourth nav row, so that it manipulates the same content, toggling the <div>s between hidden and visible state in relation to the pill-styled links.

This example will hone in a bit more on the collapse classes to make sure the process of targeting collapsing <div>s is as crystal clear as can be. Here accordion-style collapsing content set is introduced, where the content is vertically stacked, in contrast to the horizontally-tabbed collapses in the previous example. The content is organized in <div>s with the class card-body, which pulls from the classes associated with cards, to be discussed shortly. In this context, card-body just gives us a nicer format for presenting text enclosed in simple <p> tags. Let’s break down a typical accordion section thoroughly.

<div class="card-header">
<button class="btn btn-link btn-lg collapsed" data-target="#Shakespeare" data-toggle="collapse">
Shakespeare
</button>
</div>
<div id="Shakespeare" class="collapse">
<div class="card-body">
<p>Full fathom five thy father lies, of his bones are coral
made.<br>
Those are pearls that were his eyes. Nothing of him that
doth fade,<br>
but doth suffer a sea-change into something rich and
strange.
</p>
</div>
</div>

Each accordion section is a <button> enclosed in another card class, card-header. A card-header imparts the accordion look to the stacked buttons, since it provides some horizontal rules which extend across the page. If you delete the card-header class, for example, you will set a plain button without the thin lines extending horizontally across the page, which is what makes for that accordion look and feel.

We’ve seen most of the button classes already, e.g. btn, btn-link, and btn-lg. The class data-toggle set to the value of collapse because this is the custom BS4 attribute=value pair we need to get the browser to parse the JavaScript plug-in this class sets into action on link clicks. The buttons have a data-target value based on the id of the <div> it is targeting, in this case a famous author’s name.

Each content <div> takes the class card-body to present the text more nicely than it would be otherwise, and has an id assigned to it so that it can be precisely targeted by its associated toggling button. The content <div>s also need to be assigned the class collapse so that the browser knows these are collapsible elements.

Now that cards have been informally introduced, let’s present a more formal introduction to them. Cards are modular components for creating a nicely-gridded group of self-contained content that belong together in a layout. Based on the CSS flexbox, cards contain classes for aspects of card design such as footers, positioning, headers, images, background and display. Card margins in a card-group are set to 0 so you will need to apply spacing classes to control how they settle in amongst other elements, such as more cards! When using the card-deck class, though, some spacing between cards is included with the styling default. Cards begin without width and inherit that parameter from the parent element, and also dynamically respond to the size of the content they contain.

The first card example is a card group, which joins a series of cards without any spacing between them. The card group contains three cards organized within an enclosing <div> classed as a card-group, and each card is a <div> with the class card. Typical of general card design considerations, each card has visual media at the top, followed by a primary heading, then supporting textual content, a call to action and a micro script in the footer. The <img> element takes the class card-image-top, and the textual content is set in a <div> with the class card-body. Cards are usually visually defined with shadows or strokes around the edges, and the card class will default to a stroke, though these decorations can always be eliminated with further styling declarations. The primary heading takes the class card-title, and the main text content is classed card-text. The micro-text at the bottom of the card is produced by the text-muted class within <small> tags.

<div class="card-group">
<!-- Start Card Group -->
<!-- 1st Card -->
<div class="card">
<img class="card-img-top" src="http://uxplanet.org/images/cardPerson1.jpg">
<div class="card-body">
<h5 class="card-title">Nicodemus Fridumar</h5>
<p class="card-text">Sold his food truck business and put all the capital gains into a gene hacking business in the hopes of living longer.</p>
<p class="card-text"><small class="text-muted">free to use open source image no attribution required</small></p>
</div>
</div>
</div>

The second card example is mostly the same as the previous one. The <div> containing the three cards has had its class changed from card-group to card-deck. As a deck, these cards will have a default spacing applied separating each card, rather than being run together without a margin between them. Also, some changes to p and mb (padding and margin-bottom) have been introduced just to show how these might work, and a shadow class has been added to create drop shadows around the cards.

Another way to work with cards is to use the grid system introduced earlier, where each card is a column that uses card-related classes to define the content. In this example, a row is defined which has four columns, each with the class col-3. Since the grid system allows for 12 column slots, this will produce 4 column-cards across the row. Instead of call-to-action buttons, this example uses the card-link class which aligns multiple links at the bottom of the card to the context of the content. The text-center class in the column center-aligns all text in the column and pt-3 gives some padding-top above each <h4> element.

<div class="col-3 text-center">
<div class="card">
<div class="card-body">
<img class="card-img-top" src="http://uxplanet.org/images/cardPerson2.jpg">
<h4 class="card-title pt-3">Hama Alexandra</h4>
<p class="card-text">"You can't make any money unless you're willing to lose a lot of it."</p>
<a href="#" class="card-link">Before Investing</a>
<a href="#" class="card-link">After Investing</a>
</div>
</div>
</div>

In the jumbotron, some text utilities have been added, just to introduce some additional classes: font-weight-bold and text-uppercase.

The carousel component provides a handy way of cycling through an image set and can be customized in its appearance ranging from a fairly minimal look to one more richly featured showing controls, indicators and additional content for each image. Generally with any aspect of web design (not just carousels), you should get into the practice of using image editors such as Photoshop or Gimp to normalize the sizes and aspect ratios of images that will be close to each other in the layout. While some classes can resize images in an automated way, it’s a good idea to take some control of image dimensions as some components such as a carousel do not perform automated resizing and conforming for images that have different sizes and aspect ratios.

We’ll create a very simple slide-based carousel of carousel images. Let’s review the key lines of code:

<style>
.carousel-item img {
width: 100%;
height: auto;
}
</style>

This bit of CSS defines the images within the <div>s classed carousel-item as taking up 100% of the width of the parent, which is a container <div>. The height of the images is set to auto so that the image is scaled based on the aspect ratio. Inside the parent container, the carousel is constructed out of five images.

<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block mx-auto" src="http://uxplanet.org/images/carousel1.jpg">
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="http://uxplanet.org/images/carousel2.jpg">
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="http://uxplanet.org/images/carousel3.jpg">
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="http://uxplanet.org/images/carousel4.jpg">
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="http://uxplanet.org/images/carousel5.jpg">
</div>
</div>
</div>

Some spacing has been added in the code lines above so that the image set can be more easily distinguished from the enveloping slide containers. The first container level for the carousel is classed carousel and slide and includes the attribute=value pair data-ride=“carousel” to identify the type of slide presentation to be rendered. Additionally, another attribute=value pair data-interval= “2500” has been included to override the default 5 second slide change, so that it occurs every two and a half seconds instead. Note that usually the first slide transition takes a bit longer, since the browser has to load in all of the JavaScript from the util.js library before it starts working normally. You will probably find the 2500 millisecond timing to be annoying, but at least it quickly shows that the carousel is working!

Inside of this container is a <div> classed carousel-inner, and it is within this level of the construct that the <img> elements are placed. All of the image files have been pre-treated in Photoshop to be 640 x 465px in their dimensions, so they are all the same size and aspect ratio. Each <img> element is classed as a carousel-item, and has its display set to block via the d-block class since the carousel component needs to have the inline display default of <img> elements overridden. One of the carousel images needs to be set to the class active otherwise no image will display on page load. The image that has the active class will be the first one to load and be visible in the carousel.

In the next example, figure captions, indicators and previous/next arrow icon controls are added. The design pattern is very similar to what is shown above, in that the image set is nested inside of a carousel-inner <div> and one of the images, usually the first one, is classed active so as to be visible on page load. Carousels with controls need to have an id that can serve as the data-target for the control elements, which in this example is #slideShow. The image set is an array, and in programming languages such as JavaScript– which is what the carousel component is based on– arrays begin at 0, so a five-image set is numbered 0–4 instead of 1–5, which is what is indicated in the <li> elements’ data-slide-to attribute. Because an array is used by the control elements, the data-target <li> elements are organized in an <ol>, since ordered lists make more sense than unordered lists when using arrays, and this <ol> is classed carousel-indicators. The enveloping container for this carousel is narrower than the previous example, with the <style> area declaring a width of 50%, and so mx-auto is used on the <img> elements, so that the margins in the x (horizontal) axis automatically center the images on the page.

<div id="slideShow" data-interval="2500" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slideShow" data-slide-to="0" class="active"></li>
<li data-target="#slideShow" data-slide-to="1"></li>
<li data-target="#slideShow" data-slide-to="2"></li>
<li data-target="#slideShow" data-slide-to="3"></li>
<li data-target="#slideShow" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block mx-auto" src="http://uxplanet.org/images/carousel1.jpg">
<div class="carousel-caption">
<h4>Heading</h4>
<p>Short Paragraph or Lead Lines</p>
</div>
</div>
</div>
</div>

amazon.com/author/mikeludo

End of Part 2

Part 3



Source link