Bootstrap 5 Album RTL Layout – Create Right-to-Left Portfolios & Galleries
Introduction – What Is an RTL Album in Bootstrap 5?
The Album RTL layout in Bootstrap 5 is a portfolio-style grid built with right-to-left (RTL) language support. It adapts Bootstrap’s popular Album layout—used for photo galleries, blog previews, or cards—with proper alignment and flow for languages like Arabic, Hebrew, Persian, or Urdu.
In this guide, you’ll learn:
- How to implement RTL mode for album-style layouts
- Use
.dir="rtl",.text-end, and RTL-friendly spacing - Structure responsive card grids that flip direction
- Customize text, buttons, and alignment for RTL experience
Example – Bootstrap RTL Album Layout
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Album RTL</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<section class="py-5">
<div class="container">
<h2 class="text-end mb-4">معرض الصور</h2>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
<div class="col">
<div class="card shadow-sm">
<img src="https://via.placeholder.com/400x250" class="card-img-top" alt="صورة">
<div class="card-body text-end">
<p class="card-text">هذا وصف لصورة داخل ألبوم.</p>
<div class="d-flex justify-content-between align-items-center">
<button class="btn btn-sm btn-outline-secondary">عرض</button>
<small class="text-muted">3 دقائق</small>
</div>
</div>
</div>
</div>
<!-- Repeat for more cards -->
</div>
</div>
</section>
</body>
</html>
| Feature/Class | Purpose |
|---|---|
dir="rtl" | Enables RTL reading and layout direction |
.text-end | Aligns text and content to the right |
.row-cols-* | Responsive column grid for card layout |
.card, .shadow-sm | Bootstrap card component with subtle shadow |
bootstrap.rtl.min.css | RTL-compatible Bootstrap stylesheet |
Ideal for RTL websites showing images, blog previews, or product listings.
Bootstrap Album RTL Utility Reference
| Feature | Class or Attribute | Description |
|---|---|---|
| RTL Mode | dir="rtl" | Sets document direction to right-to-left |
| Text Alignment | .text-end | Aligns paragraph and heading text to right |
| Responsive Grid | .row-cols-* | Controls columns per row based on breakpoints |
| Button Styling | .btn, .btn-outline-* | RTL-friendly Bootstrap buttons |
| Shadow & Padding | .shadow-sm, .p-*, .mb-* | Enhances spacing and card visibility |
Best Practices for RTL Album Layouts
| Tip | Why It Matters |
|---|---|
| Always use Bootstrap RTL CSS build | Ensures spacing, floats, and flex are flipped |
Add dir="rtl" to <html> or <body> | Forces direction context across layout |
Use .text-end instead of .text-right | Modern and responsive alignment in Bootstrap 5 |
| Test on multiple devices and browsers | RTL behavior can vary; ensure consistency |
Summary – Recap & Next Steps
Bootstrap 5’s RTL support lets you build right-to-left responsive layouts using familiar classes. The Album RTL layout is perfect for image galleries, portfolio grids, or blog cards in Arabic and similar languages.
Key Takeaways:
- Use
bootstrap.rtl.min.cssfor full RTL support - Structure albums with
.row-cols-*and.card - Add
.text-end,.justify-content-betweenfor RTL spacing - Ideal for multilingual and Middle Eastern web design
Great for RTL portfolios, photography galleries, and eCommerce frontends.
FAQs – Bootstrap 5 Album RTL Layout
Is there a separate Bootstrap 5 RTL version?
Yes. Use the bootstrap.rtl.min.css file instead of the default LTR version.
Can I convert an LTR layout to RTL easily?
In most cases, yes. Add dir="rtl" and swap to RTL classes like .text-end.
Will Flexbox and Grid work in RTL mode?
Yes. Bootstrap’s RTL version includes mirrored flex and grid alignment.
Do I need to reverse all margin and padding?
No. Bootstrap RTL handles directional spacing automatically.
Share Now :
