• AndrewAndTerry
• LCCC
• Wat Market Street
• LAC
• Bootstrap 5.3 Reference
• Tables

List Groups bg-danger

• This is a basic BS 5 unordered list
• A second item bolded and red
• Background success
• A fourth item
• You can add video to this unordered list group using the iframe tag the same way you would in an accordion or jumbotron..

Accordion Flush

Accordion FLUSH Testing No default open item - square corners and pastel

Place color attributes on the button tag. Subtle=pastel. Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Here's Barbra the img-fluid image

Terry the Movie circa 1962

Bootstrap5 documentation poorly written for this. Got the video to properly take up the container space and allow full screen but can't find a way to set a poster. Using the embed tag doesn't work. You get a tiny video with no control for full screen. NICE FEATURE is the picture in picture control which allows you to move the video around the screen and size it as you like. You must control the video from its origial place.

Rounded Pill Badges - Use them as links or just to create interest. Use them as back buttons.

Primary Secondary Success Danger Warning Info Light Dark

Button Groups

THis button group uising class=outline reeks with luxury

Left Middle Right

Left Middle Right

Left Middle Right

What the Heck Are Alerts? They are objects to bring attention to something.

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

Warning - What Does it Do? Not a Thing.. It Just Looks Pretty

A simple dark alert—check it out!

Optional Alerts

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

Barbra 2022

As Epiphyllum Hybrids go - Barbra is exquisite with her fluffy pink inner petals and orange creamsicle outer petals. The bees love her blooms and they last at lest three to five days.

This is text in addition to an image. It is different in that it dows not appear on the image as <class="carousel-caption">

Previous Next

Carousel

This is the updated carousel in BS 5.
It can be styled to auto start using
<data-bs-ride="carousel">
It can be styled to fade between images, default is slide
<class="carousel slide carousel-fade">
You can opt to not auto start until a first user interaction
<data-bs-ride="true">
Carousel can be images and/or text

Custom Popover Basics

Buttons and Badges

This text should wrap because of the text-wrap class.

Text-wrap class allows text to wrap in things like buttons and alerts. Without the text-wrap class you would need to resize the width style.

This text should overflow the parent and I can't find a way to use this.

Bootstrap5 iframe works in containers like this jumbotron - but can't find a way to display a poster.

Jumbotron

bootstrap 5.3 depricated jumbotron

---

With Bootstrap 5.0+ Jumbotron is largely repaced by any text box with shading can now do the same thing. However with this version of Bootstrap 5.3.2- the jumbotron class still works.

Learn More

This is the dismissible alert class. It can be colored by any of the bootstrap colors and you can include images...

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.

Testing the Collapse Feature

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Here's Barbra

Accordion Item #3

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.

This tooltip button

Barbra 2024

Card with Text and Images and a Link

Cards can be styled like most bootstrap objects

Go somewhere

The End