<!DOCTYPE html><htmllang="ar"dir="rtl"data-bs-theme="auto"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="description"content=""><metaname="author"content="Mark Otto, Jacob Thornton, and Bootstrap contributors"><metaname="generator"content="Astro v5.6.1"><title>مثال الألبوم · Bootstrap v5.3</title><linkrel="canonical"href="https://getbootstrap.com/docs/5.3/examples/album-rtl/"><scriptsrc="/docs/5.3/assets/js/color-modes.js"></script><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"><linkhref="/docs/5.3/dist/css/bootstrap.rtl.min.css"rel="stylesheet"integrity="sha384-q8+l9TmX3RaSz3HKGBmqP2u5MkgeN7HrfOJBLcTgZsQsbrx8WqqxdA5PuwUV9WIx"><linkrel="apple-touch-icon"href="/docs/5.3/assets/img/favicons/apple-touch-icon.png"sizes="180x180"><linkrel="icon"href="/docs/5.3/assets/img/favicons/favicon-32x32.png"sizes="32x32"type="image/png"><linkrel="icon"href="/docs/5.3/assets/img/favicons/favicon-16x16.png"sizes="16x16"type="image/png"><linkrel="manifest"href="/docs/5.3/assets/img/favicons/manifest.json"><linkrel="mask-icon"href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg"color="#712cf9"><linkrel="icon"href="/docs/5.3/assets/img/favicons/favicon.ico"><metaname="theme-color"content="#712cf9"><style>.bd-placeholder-img{font-size:1.125rem;text-anchor:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media(min-width:768px){.bd-placeholder-img-lg{font-size:3.5rem}}.b-example-divider{width:100%;height:3rem;background-color:#0000001a;border:solidrgba(0,0,0,.15);border-width:1px0;box-shadow:inset0.5em1.5em#0000001a,inset0.125em.5em#00000026}.b-example-vr{flex-shrink:0;width:1.5rem;height:100vh}.bi{vertical-align:-.125em;fill:currentColor}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller.nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.btn-bd-primary{--bd-violet-bg:#712cf9;--bd-violet-rgb:112.520718,44.062154,249.437846;--bs-btn-font-weight:600;--bs-btn-color:var(--bs-white);--bs-btn-bg:var(--bd-violet-bg);--bs-btn-border-color:var(--bd-violet-bg);--bs-btn-hover-color:var(--bs-white);--bs-btn-hover-bg:#6528e0;--bs-btn-hover-border-color:#6528e0;--bs-btn-focus-shadow-rgb:var(--bd-violet-rgb);--bs-btn-active-color:var(--bs-btn-hover-color);--bs-btn-active-bg:#5a23c8;--bs-btn-active-border-color:#5a23c8}.bd-mode-toggle{z-index:1500}.bd-mode-toggle.bi{width:1em;height:1em}.bd-mode-toggle.dropdown-menu.active.bi{display:block!important}
<svgclass="bi ms-auto d-none"aria-hidden="true"><usehref="#check2"></use></svg></button></li></ul></div><headerdata-bs-theme="dark"><divclass="collapse text-bg-dark"id="navbarHeader"><divclass="container"><divclass="row"><divclass="col-sm-8 col-md-7 py-4"><h4>حول</h4><pclass="text-body-secondary">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p></div><divclass="col-sm-4 offset-md-1 py-4"><h4>تواصل معي</h4><ulclass="list-unstyled"><li><ahref="#"class="text-white">تابعني على تويتر</a></li><li><ahref="#"class="text-white">شاركني الإعجاب في فيسبوك</a></li><li><ahref="#"class="text-white">راسلني على البريد الإلكتروني</a></li></ul></div></div></div></div><divclass="navbar navbar-dark bg-dark shadow-sm"><divclass="container"><ahref="#"class="navbar-brand d-flex align-items-center"><svgxmlns="http://www.w3.org/2000/svg"width="20"height="20"fill="none"stroke="currentColor"stroke-linecap="round"stroke-linejoin="round"stroke-width="2"aria-hidden="true"class="me-2"viewBox="0 0 24 24"><pathd="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circlecx="12"cy="13"r="4"></circle></svg><strong>الألبوم</strong></a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarHeader"aria-controls="navbarHeader"aria-expanded="false"aria-label="تبديل التنقل"><spanclass="navbar-toggler-icon"></span></button></div></div></header><main><sectionclass="py-5 text-center container"><divclass="row py-lg-5"><divclass="col-lg-6 col-md-8 mx-auto"><h1class="fw-light">مثال الألبوم</h1><pclass="lead text-body-secondary">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p><p><ahref="#"class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a><ahref="#"class="btn btn-secondary my-2">عمل ثانوي</a></p></div></div></section><divclass="album py-5 bg-body-tertiary"><divclass="container"><divclass="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"><divclass="col"><divclass="card shadow-sm"><svgaria-label="Placeholder: صورة مصغرة"class="bd-placeholder-img card-img-top"height="225"preserveAspectRatio="xMidYMid slice"role="img"width="100%"xmlns="http://www.w3.org/2000/svg"><title>Placeholder</title><rectwidth="100%"height="100%"fill="#55595c"></rect><textx="50%"y="50%"fill="#eceeef"dy=".3em">صورة مصغرة</text></svg><divclass="card-body"><pclass="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p><divclass="d-flex justify-content-between align-items-center"><divclass="btn-group"><buttontype="button"class="btn btn-sm btn-outline-secondary">عرض</button><buttontype="button"class="btn btn-sm btn-outline-secondary">تعديل</button></div><smallclass="text-body-secondary">9 دقائق</small></div></div></div></div><divclass="col"><divclass="card shadow-sm"><svgaria-label="Placeholder: صورة مصغرة"class="bd-placeholder-img card-img-top"height="225"preserveAspectRatio="xMidYMid slice"role="img"width="100%"xmlns="http://www.w3.org/2000/svg"><title>Placeholder</title><rectwidth="100%"height="100%"fill="#55595c"></rect><textx="50%"y="50%"fill="#eceeef"dy=".3em">صورة مصغرة</text></svg><divclass="card-body"><pclass="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقد
