This is the output of the code on page 81 with a screen width of 1280 pixels.

• As in the Tabs example, many of the Bootstrap 4 attribute and class names used in the textbook have to be updated to their corresponding Bootstrap 5 equivalents to make this example work in Bootstrap 5.  For the attribute names, this simply involved adding bs- after data-.    For the class names, there were more substantive changes.  Here are the changes:

Bootstrap 4 Attribute Name	Bootstrap 5 Attribute Name
data-interval	data-bs-interval
data-ride	data-bs-ride
data-slide	data-bs-slide
data-slide-to	data-bs-slide-to
data-target	data-bs-target
Bootstrap 4 Class Name	Bootstrap 5 Class Name
carousel-control	carousel-control-prev    or carousel-control-next
icon-prev	carousel-control-prev-icon
icon-next	carousel-control-next-icon

• Note that <h3>Gallery</h3> must be enclosed in <div class="row">...</div> to make the Gallery heading align with the Services heading above it. The enclosing <div> is missing from the code on page 81.
• Note that the Bootstrap 5 container class adds an indent that is not present in the Bootstrap 4 version of this class.  This is why no indent is rendered in Figure 3.10 the textbook but an indent is rendered on this page.
• Note that in Bootstrap 5, using an <ol> ordered list for the carousel-indicators section causes numbers to appear below the indicators.  If we use a <div> here instead, those numbers do not appear.  But since the authors used an <ol> tag, I needed to include:

  style="list-style: none"

  in the linked myphoto-page081.css stylesheet file to get rid of them.

Type:		CtrlU		to view the source code for this page
		CtrlW		to close this window