CloseTag | الشروحات | Bootstrap | نظام flexbox الصندوق المرن في BootStrap | Bootstrap Flex

<!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap demo</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
        <style>
          .d-flex{height:80px;}
        </style>
      </head>
      <body>

        <div class="d-flex align-items-start bg-secondary text-white mb-2">
          <div class="p-2 align-self-start bg-primary">Align Self Start</div>
          <div class="p-2 align-self-center bg-primary">Align Self Center</div>
          <div class="p-2 align-self-end bg-primary">Align Self End</div>
          <div class="p-2 align-self-baseline bg-primary">Align Self Baseline</div>
          <div class="p-2 align-self-stretch bg-primary">Align Self Stretch</div>
        </div>




      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
      </body>
    </html>

PCFkb2N0eXBlIGh0bWw+DQogICAgPGh0bWwgbGFuZz0iZW4iPg0KICAgICAgPGhlYWQ+DQogICAgICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4NCiAgICAgICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xIj4NCiAgICAgICAgPHRpdGxlPkJvb3RzdHJhcCBkZW1vPC90aXRsZT4NCiAgICAgICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9jc3MvYm9vdHN0cmFwLm1pbi5jc3MiIHJlbD0ic3R5bGVzaGVldCIgaW50ZWdyaXR5PSJzaGEzODQtZ0gyeUlKcUtkTkhQRXEwbjRNcWEvSEdLSWhTa0lIZUw1QXloa1lWOGk1OVU1QVI2Y3NCdkFwSEhObC92STFCeCIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+DQogICAgICAgIDxzdHlsZT4NCiAgICAgICAgICAuZC1mbGV4e2hlaWdodDo4MHB4O30NCiAgICAgICAgPC9zdHlsZT4NCiAgICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+IDo6LXdlYmtpdC1zY3JvbGxiYXJ7d2lkdGg6N3B4O2hlaWdodDo3cHg7fTo6LXdlYmtpdC1zY3JvbGxiYXItdHJhY2t7YmFja2dyb3VuZDojZmZmO306Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1ie2JvcmRlci1yYWRpdXM6NXB4O2JhY2tncm91bmQ6IzJmNDVmZjt9PC9zdHlsZT48L2hlYWQ+DQogICAgICA8Ym9keT4NCg0KICAgICAgICA8ZGl2IGNsYXNzPSJkLWZsZXggYWxpZ24taXRlbXMtc3RhcnQgYmctc2Vjb25kYXJ5IHRleHQtd2hpdGUgbWItMiI+DQogICAgICAgICAgPGRpdiBjbGFzcz0icC0yIGFsaWduLXNlbGYtc3RhcnQgYmctcHJpbWFyeSI+QWxpZ24gU2VsZiBTdGFydDwvZGl2Pg0KICAgICAgICAgIDxkaXYgY2xhc3M9InAtMiBhbGlnbi1zZWxmLWNlbnRlciBiZy1wcmltYXJ5Ij5BbGlnbiBTZWxmIENlbnRlcjwvZGl2Pg0KICAgICAgICAgIDxkaXYgY2xhc3M9InAtMiBhbGlnbi1zZWxmLWVuZCBiZy1wcmltYXJ5Ij5BbGlnbiBTZWxmIEVuZDwvZGl2Pg0KICAgICAgICAgIDxkaXYgY2xhc3M9InAtMiBhbGlnbi1zZWxmLWJhc2VsaW5lIGJnLXByaW1hcnkiPkFsaWduIFNlbGYgQmFzZWxpbmU8L2Rpdj4NCiAgICAgICAgICA8ZGl2IGNsYXNzPSJwLTIgYWxpZ24tc2VsZi1zdHJldGNoIGJnLXByaW1hcnkiPkFsaWduIFNlbGYgU3RyZXRjaDwvZGl2Pg0KICAgICAgICA8L2Rpdj4NCg0KDQoNCg0KICAgICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMi4wL2Rpc3QvanMvYm9vdHN0cmFwLmJ1bmRsZS5taW4uanMiIGludGVncml0eT0ic2hhMzg0LUEzckpEODU2S293U2I3ZHdsWmRZRWtPMzlHYWdpN3ZJc0YwanJSQW9RbURLS3RRQkhVdUxaOUFzU3Y0akQ0WGEiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0Pg0KICAgICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vQHBvcHBlcmpzL2NvcmVAMi4xMS41L2Rpc3QvdW1kL3BvcHBlci5taW4uanMiIGludGVncml0eT0ic2hhMzg0LVhlKzhjTDlvSmE2dE4vdmVDaFNQN3ErbW5TUGFqNUJjdTltUFg1RjV4SUdFMERWaXR0YXFUNWxvcmYwRUk3VmsiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0Pg0KICAgICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMi4wL2Rpc3QvanMvYm9vdHN0cmFwLm1pbi5qcyIgaW50ZWdyaXR5PSJzaGEzODQtT0RtRElWek4rcEZkZXh4SEVIRkJRSDMvOS92UTl1b3JpNDV6NEpqbkZzUnlkYm1RYm1MNXQxdFEwY3VsVXp5SyIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+PC9zY3JpcHQ+DQogICAgICA8L2JvZHk+DQogICAgPC9odG1sPg==