Bootstrap 5 Carousel: position captions outside (i.e. below) the images

(If you want to get right to the point, a full code example is provided at the bottom of this post.)

I’m not a Bootstrap expert. During most of its evolution, I’ve mostly ignored it in favor of rolling my own… everything. I finally really embraced Bootstrap when I had a rush project in October 2022 that was way too precisely designed to work with WordPress, especially Gutenberg. (And the client didn’t need editing capabilities.) So I decided to hand-code it, but to use Bootstrap to… uh… bootstrap my HTML/CSS layouts.

I think Bootstrap 5 is excellent. I wish Gutenberg was built on top of it instead of the idiosyncratic house of cards it’s actually built on, but whatever.

As it happens, I’m actually now using Bootstrap 5 with Gutenberg for some custom blocks, specifically a Carousel block. One of the options I want to provide in my block is the ability to show the carousel’s captions and controls outside of the image, but apparently, at least with Bootstrap 5, that’s not an option.

I decided to Google for a quick solution before creating my own and I came across… this. I’m sure it gets the job done, but it seems severely over-engineered, so here I’m presenting my own comparatively simple, CSS-only solution.

Basically there are two things you need to do: 1) move the absolute-positioned caption text below the image, and 2) add padding to the bottom of the container, so the caption has somewhere to go instead of just overlapping the content below it.

Let’s start with the second item first:

.carousel { padding-bottom: 4rem; }

There may be some trial and error here, as you need to make sure you’re accommodating captions of varying length. I will admit this is not fully thought out here, and unlike the rest of what is about to follow, it may be a deal breaker under certain circumstances. But let’s assume your captions are a fairly consistent length, and you can determine how much padding you need.

Getting the caption pushed below the images is easy…

.carousel-caption { top: 100%; }

…except, oops, vertical overflow is hidden. Let’s fix that:

.carousel-inner { overflow: visible; }

Of course, if you have your transition effect set to slide (which is the default), that now spews stuff all over the page in an ugly way. But we can fix that by hiding overflow on the outer carousel element instead:

.carousel { overflow: hidden; }

You might, at this point, wonder why I didn’t just set overflow-y: visible on .carousel-inner which seems perfectly reasonable, and which, of course, I tried. But for reasons I couldn’t be bothered with investigating, that ended up causing .carousel-inner to just show a vertical scrollbar and not display the caption unless you scrolled it. Ugh. No matter, the above takes care of it.

That’s pretty much it, as far as the captions go. But if you’re using the controls (previous/next arrows) or indicators (dots/lines for the number of slides and current selection), you’ll notice there’s some weirdness to their placement, so let’s fix that too. The indicators just get shoved to the bottom of the container, so your bottom padding can accommodate that. But if you want to move them back up onto the image, you just need to offset that extra padding, like this:

.carousel-indicators { bottom: 4rem; }

Make that value the same as the bottom padding you added to .carousel itself.

As for the controls, since you’ve made the overall container taller, they’re now a bit too low rather than being vertically centered on the image. Guess what… setting their bottom value to match the extra bottom padding fixes their placement too!

.carousel-control-next, .carousel-control-prev { bottom: 4rem; }

So, putting it all together as concisely as possible, here’s what we have:

.carousel { overflow: hidden; padding-bottom: 4rem; }
.carousel-caption { top: 100%; }
.carousel-inner { overflow: visible; }
.carousel-control-next, .carousel-control-prev, .carousel-indicators { bottom: 4rem; }

ST:TNG Treadmill Review #31: Allegiance

Allegiance
Season 3 Episode 18
Original airdate: March 24, 1990

Netflix Synopsis

Capt. Picard is kidnapped and held with three different aliens, while an impostor takes his place aboard the Enterprise.

My Brief Review

At first I was inclined to skip this episode; for some reason the synopsis didn’t appeal to me. But I’m glad I didn’t, because this is another classic episode that I remember well from the original airing.

Picard and three other species are imprisoned in a strange room. They are four archetypes, and their differences create conflict as they try to find an escape. This part of the story has a very strong Twilight Zone vibe for me, specifically the legendary episode “Five Characters in Search of an Exit.” If this were the entire story it would be a great episode, but there’s another half…

The real Picard has been replaced with an exact replica. Well… almost an exact replica. He has Picard’s knowledge, but his behavior is… well, just a bit off. In ways that at first merely confuse but ultimately nearly kill the entire crew.

Will Riker orchestrate a mutiny to save the Enterprise? You’ll have to watch to find out. I’ll just say it was a weird feeling to watch this episode literally at the very hour that the House of Representatives is debating the second impeachment of Donald Trump.

Memorable Moment

There are plenty of memorable moments in this episode, but definitely the most lasting image for me is of Picard first discovering the “food” being offered in the prison… basically a red translucent hockey puck.

Crew Rando

I found myself strangely aware of all of the random people just roaming the halls on the Enterprise in this episode. In particular, I found it odd that so many people would just be passing by the quarters of whichever officer hosts the poker games. But guess what… “backflip master” Crewman Martinez once again makes an appearance, apparently… I still haven’t actually figured out who he is.

Distance Rating: 4K

IMDb score: a shockingly low 7.5/10

Climate as Proxy for Capital Within the Minneapolis Skyway System

Link

Climate as Proxy for Capital Within the Minneapolis Skyway System
I spent the better part of the last decade working in downtown Minneapolis, and as such became intimately familiar with its convenience, its obscure corners, and, as this scholarly longread explores, its complex challenges in managing expectations between public and private spaces, and the class- and race-based divisions it engendered.

When walking through the skyway system, it is very difficult not to keep moving. The difficulty of strolling, sitting, standing, or stopping inherently excludes certain groups, particularly the poor and the elderly. Similarly, the ease of skyway access to certain populations (e.g. suburban commuters, office workers) lies in stark contrast to the hidden access points to the street.

(Via kottke.org.)

Why I care so much about stopping SOPA/PIPA (and why you should care too)

As someone who works with, and is constantly immersed in, the Internet, I’ve been hearing a lot about SOPA (the Stop Online Piracy Act, in the House) and PIPA (the Protect IP Act, in the Senate) over the last couple of months. But I suspect most Americans have heard much less about these bills currently under “debate” in the US House of Representatives and Senate. That’s the way the sponsors of these bills (and their corporate donors) likely want it.

You can read the text of the bills, or the innocuous-sounding summaries the government has published. On the surface, without careful reflection, they seem like good ideas, designed to protect hard-working American creators from having their intellectual property stolen. But the implications of these bills, for freedom of speech, for innovation, even for the very feasibility of their technical implementation, are anything but innocuous, and may irreparably harm, rather than protect, the American economy.

What’s it really all about?

Let us be frank: the true objective of these bills is not to prevent illicit foreign websites from destroying American jobs by stealing our movies and music. It is to prop up a dying dinosaur media industry that would rather kill innovation than have to learn to change. Follow the money. A simple look at the lists of corporate supporters of SOPA/PIPA, along with the corresponding list of companies that oppose these bills, tells the story.

The Motion Picture Association of America (MPAA), the Recording Industry Association of America (RIAA), countless “old media” conglomerates. These are the companies that want these bills to pass, because they are in their death throes after over a decade of spending their dwindling profits on fighting, in any way they can, the changes the Internet has wrought, refusing to admit that the massive profits they achieved from the 1970s through the 1990s were built upon an unsustainable model. These industries refuse to adapt. Adaptation is hard. But the world changes. You have to be prepared to change with it, or die.

So what’s the threat?

The Internet has fundamentally transformed the way people communicate, and as a result it has changed the way they get their entertainment. Sure, piracy is a problem. It needs to be dealt with. But there are also huge opportunities to build profitable businesses legitimately selling entertainment products (intellectual property) online. iTunes, Amazon and Netflix prove that. The problem for old media, though, is that the Internet has obviated their role as a high-markup middleman. Look at Louis CK’s wildly successful experiment in DIY production and promotion. Change or die.

True, as the old entertainment industry contracts, American jobs are being lost. But the entertainment industry is a small piece of America’s GDP. By contrast, the Internet, and more broadly, information technology, is significantly larger. (According to Census Bureau data, in 2008 the film, recording and broadcasting industries employed 643,089 people; information services, software publishers and computer systems employed 3,443,162 people.)

The Internet is possibly the brightest spot in America’s economy right now, and it is profoundly threatened by what SOPA/PIPA could do. So, in effect, Congress is preparing to kill (or at least maim) one of the most thriving parts of our economy to save a sector that is going to die anyway. (I’m trying to think of an analogy to make here but they’re all too gruesome.)

How does it work?

Aside from understanding the true motivations of SOPA/PIPA, it’s just as important to understand the implications these bills have for American Internet companies, our cherished freedom of speech, and the daily use of the Internet, even by Americans who by and large are engaging in purely harmless, infringement-free activities.

I’m about as squeaky-clean as Internet users come when it comes to copyright. Sure, I may have a handful of music files on my hard drive that I got from friends, just like we’d dub cassettes of our favorite CDs back in the late ’80s and early ’90s to share. Ever heard of a mixtape? But the overwhelming majority of my 18,000+ songs were purchased legitimately, either on CD or through download services like iTunes or Amazon. And a lot of the music I own, I purchased because I learned about it through friends. Even if they had already given me copies of the music. Even in the peak of the music industry’s profits from CD sales in the ’90s, that’s how it worked.

(I’m also a content producer myself, as a blog writer and independent musician. I’m skeptical of current copyright law and as such have taken to releasing all of my work under Creative Commons licensing. But that’s a topic for another post.)

The point is, sharing music doesn’t necessarily reduce music sales. I’d argue that, in limited quantities, between friends with similar tastes, it actually encourages music sales. But even if we agree that illicit copying and redistribution of things like movies and music is bad (and, when it’s done at a large scale, I do) piracy is not what’s killing old media — mediocre content and exorbitant pricing are. And SOPA/PIPA can’t help that.

The real danger of these bills is in their implementation. While ostensibly they’re only targeted at foreign websites, their means of recourse against infringers could result in the blocking of entire sites due to the alleged infringing activities of one member. This sledgehammer approach has broad-reaching implications for all Internet users in the United States (to say nothing of what it means for free speech, and the company it places America in amongst governments that censor the Internet).

What’s worse, it won’t even work. Already there is much discussion online of means of circumvention (which I will not link to here), and, worse, it breaks the Internet. I don’t just mean that it is going to destroy the way we use the Internet. I mean it actually runs contrary, on a deep technical level, to how the Internet functions. Even SOPA supporter Comcast (my ISP… for now) admits, albeit inadvertently, that at least on a technical level the requirements of the law are incompatible with how the Internet works.

A threat to America’s small-business owners

I’m one of those fabled “small business owners” politicians so love to talk about. I’ve been freelancing full-time in web development since 2008. Business has been great, even through the worst economic times in America since the Great Depression. All of the work I do is 100% legitimate, for honest, productive American businesses. This is the new economy, and it is America’s best hope for a brighter future. I’m expecting to expand my business this year, becoming an even larger presence in the community and helping to further spur on positive economic activity.

But SOPA/PIPA threaten the way I do business. Republicans in Congress put on some great political theater in 2009-2010 in their fight against “Obamacare,” claiming its provisions represented an undue threat to small businesses. But here we have a real threat to small and growing Internet-related businesses. If passed, these laws will impose odious burdens of monitoring and self-policing upon website owners, and the threat of takedown without due process will have a chilling effect on whether or not new ventures even get started. In short, nothing could more effectively put the brakes on this “engine of growth” for the American economy.

Take action

So what can you do? Old media still has deep pockets, and is well-represented on K Street. It has the ears of Congress. But, last I checked, these elected officials do also still represent us, the individual Americans who will be affected by these bills. So call them. Politely tell them why you believe these bills are bad. Check out other online resources that can help you get involved.

I will admit, however, that personally I have not attempted to contact any of my representatives. I already know that my House representative, Keith Ellison, opposes SOPA. Over in the Senate, unfortunately, Amy Klobuchar is one of the sponsors of PIPA. And, despite his genuine progressive spirit and work on behalf of American individuals, Al Franken is simply too deeply connected to old media not to also back PIPA. I sincerely doubt either of Minnesota’s senators will be convinced to change their position, no matter how many constituents call them.

But your representatives may still be on the fence. Reach out to them. Let them know why you think these bills are not just bad, but downright dangerous for America. The implications for America if they pass are far bleaker than the prognosis for the industries they are intending to protect.

And, this is an election year. Vote. While it will most likely be too late to affect SOPA/PIPA, do your part to make sure none of its supporters get re-elected in November. I have been a strong supporter of Amy Klobuchar in the past, even having donated to her first campaign, but unless she withdraws her sponsorship of PIPA, I will not be voting for her re-election this year.

As someone who works in the Internet, the implications of SOPA/PIPA are huge for me and for my business. But this affects us all.

Tell me more!

As with a lot of hot-button issues, when I get my dander up it’s sometimes hard for me to calmly and clearly explain the rationale for my argument. I’ve linked throughout this post to some great resources for learning more about what SOPA/PIPA is and why it’s bad, but as I come across other sites that do a more effective job of explaining it than I have, I’ll add them here.

Other sites discussing problems with SOPA/PIPA

Updates on the fight against SOPA/PIPA

room34.com redesigned

Aside

I just finished (seriously… like, 5 minutes ago) rolling out a new redesign of my business website, room34.com. I think it’s pretty neat, so… check it out!