Horizontal Card with Image

Bootstrap 6 horizontal card with a photo on the left that stacks on mobile, amenity chips, rating, price and a wishlist toggle button.

Also known as: horizontal card layout, card with image on left, listing card horizontal, rental listing card

A Bootstrap 6 horizontal card that puts a photo on the left and the details on the right, then stacks the photo on top on small screens. The demo is a holiday-rental listing with a "Guest favourite" badge, amenity chips, a star rating, a nightly price and a wishlist button, but the same layout works for products, courses, articles or team members.

How it works

The card is a <article class="card card-row hci-card">. .card-row is the Bootstrap 6 class for horizontal cards, and the photo carries .card-img-start. Bootstrap's .card-row is always horizontal, so style.css sets flex-direction: column on .hci-card by default and switches back to row in an @container (min-width: 640px) rule. The root .hci-root is the query container (container-type: inline-size). The card responds to the space it actually gets, so it also stacks inside a narrow sidebar on a desktop page.

The image sits in .hci-media, which keeps a 16:10 ratio when stacked and fills the full card height when horizontal (object-fit: cover). The .badge.theme-inverse flag is positioned over the photo. The .card-body holds the location line, the title, a short text, a list of .chip elements and a footer (.hci-foot) pushed to the bottom with margin-top: auto.

The heart button uses the Bootstrap 6 button data API: data-bs-toggle="button" flips aria-pressed and the .active class with no custom JavaScript. CSS swaps the outline heart for a filled red one when aria-pressed="true". There is no script.js.

Customization

--hci-media-width on .hci-root: sets how much of the card width the photo takes in the horizontal layout (42% by default).
--hci-accent on .hci-root: changes the location line, the focus outlines and the "Check availability" button color.
--hci-bg, --hci-ink and --hci-muted on .hci-root: adjust the page background, heading color and secondary text.
The 640px value in the @container rule: raise it to keep the card stacked longer, lower it to go horizontal sooner.
Replace .card-img-start with .card-img-end and move .hci-media after .card-body to put the photo on the right.
Remove .hci-flag if you do not need a badge on the photo, or change theme-inverse to theme-accent for a colored label.

The photo comes from Unsplash; replace it with your own image and update the alt text.

Use cases

Holiday rentals: photo on the left with a Guest favourite badge, amenity chips, rating and nightly price
Product lists: the same layout presents products or courses in a compact row
Article and team pages: image beside text works for articles or team members
Mobile pages: the photo moves to the top of the card on small screens

Accessibility

The card is an <article> labelled by its heading. The amenity chips are a real list with an aria-label, and every icon is aria-hidden. The wishlist button has an aria-label and exposes its state through aria-pressed. The button and the call to action have a visible focus outline, and the arrow nudge on hover is disabled under prefers-reduced-motion.

Bootstrap 6 notes

Bootstrap 5 horizontal cards needed .row.g-0 with .col-md-4 columns inside the card. Bootstrap 6 replaces that with .card-row plus .card-img-start or .card-img-end. btn-primary becomes btn-solid theme-primary, the colored badge is badge theme-inverse, and the amenity pills use the new .chip component. Built on Bootstrap 6.0.0-alpha.1, so class names may still change. Icons come from Bootstrap Icons.

Questions about this template

Can I use the Horizontal Card with Image code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear and add the CSS to your stylesheet. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. Only Bootstrap 6's own JavaScript is used, and the download already includes it.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.

More Cards