Bootstrap 5 Media Component

Responsive bootstrap card with a strictly left-aligned image, title, description and optional aside flavor text. With Rust maud example code.

I seem to need this all the time, at some point this was a core component of bootstrap (version 2 maybe?), but now it needs to be built manually every single time. The classical component for listing media items!

This is an example of a Rust function using the maud templating engine:

pub fn media(
    title: &str,
    description: &str,
    image_url: &str,
    link: &str,
    aside: Option<&str>,
) -> Markup {
    html! {
        div class="card my-3" {
            div class="card-body" {
                div class="d-flex" {
                    a href=(link) {
                        @let alt = format!("picture of {}", title);
                        img src=(image_url) alt=(alt) class="me-3 rounded-1" style="width: 100px; height: 100px;" {}
                    div class="w-100" {
                        @if let Some(aside) = aside {
                            div class="d-flex justify-content-between" {
                                h5 class="d-inline" {
                                  a href=(link) class="fw-bold" { (title) }
                                small class="text-muted text-end" { (aside) }
                        } @else {
                            h5 class="" {
                              a href=(link) class="fw-bold" { (title) }
                        p class="mb-0" {

... and here is an example output in HTML:

<div class="card my-3">
    <div class="card-body">
        <div class="d-flex">
            <a href="">
                <img src="" alt="pricture of Example Title" class="me-3 rounded-1" style="width: 100px; height: 100px;" />
            <div class="w-100">
                <div class="d-flex justify-content-between">
                    <h5 class="d-inline">
                        <a href="" class="fw-bold">Example Title</a>
                    <small class="text-muted text-end">Example Aside</small>
                <p class="mb-0">
                    Example Description

Linked Technologies

What it's made of

illustration of Bootstrap

One of the best and popular frontend component libraries in existence. While not the "hip" thing anymore, it gets the job done quickly and there are loads of learning resources and plugins.

illustration of HTML

The backbone of the web. Master it to craft structured, accessible content for any online project, from simple sites to complex applications!

illustration of Rust

A language empowering everyone to build reliable and efficient software. Futuristic swiss army knife and probably the most powerful mainstream technology today

Linked Categories

Where it's useful

illustration of Frontend Development
Frontend Development

Explore the latest tools and techniques for crafting responsive designs, enhancing user interfaces, and optimizing web performance.