AANDTbanner
2025 Website logos
Column Holder Column Header

ATImages/Environment/aandtVHSFlicker.gif - needs dark background

Column Header

ATImages/Environment/2025AANDThyperkineticBLACK.gif

ATImages/Environment/aandtGlitchyIntro.gif

color

ATImages/Environment/aandtColorShadows.png



Column Holder
2025 Color Palette

Blue = #3129ef

Graphical Image Green = #15EF10

Butch Marine Green = #3f4408

The color palette will evolve during the year... or it won't. Trump may quickly pass laws governing "woke" use of colors on websites.

Column Header

ATImages/Environment/aandt3rowsGreen.gif.gif

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
2025 Bootstrap v5.3 Resources this is h1
Bootstrap v5.3 Resources
this is h1 with class="display-1"

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


hello world

bootstrap 5.3 supports a fixed nav bar (above)

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> or you can use fixed-bottom.
this will not work for andrewandterry.net because the fixed-top class would put the nav bar at the top and the animated header would fall below it and be scrolled up with the page. When they say fixed top they mean it!
But it seems to have spacing issues with images put immediately below it.

Learn More

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



We Don't Need No Stinkin' Badges New


Buttons and Badges


Primary with Link to Web Page
Secondary Success Danger Warning Info Light Dark


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.

barbra

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 content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

barbra

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.


barbra Here's Barbra
Grover Cleveland is Dead
# First Last Handle
1 Mark Otto @mdo
2 Barbra barbra images can be added to cells and will scale with the other 'columns' in a row
842911 Larry the Bird
Tables, rows and cells can have a table class applied to effect color		 @twitter

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.


Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

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

Cards

barbracard
Barbra 2024

Card with Text and Images and a Link

barbra

Cards can be styled like most bootstrap objects

Go somewhere