CloseTag | الشروحات | Bootstrap | النظام الشبكي في BootStrap | Bootstrap Grids

<!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">
  </head>
  <body>

<!-- the row will only contain 3 elements and the fourth will go down -->

<div class="container-fluid">
  <div class="row row-cols-3 text-white">
    <div class="bg-primary border p-3">First</div>
    <div class="bg-primary border p-3">Second</div>
    <div class="bg-primary border p-3">Third</div>
    <div class="bg-primary border p-3">Foruth</div>
  </div>
<br>
</div>

<!--Each element will take as width as it needs only -->
<div class="container-fluid">
  <div class="row row-cols-auto text-white">
    <div class="bg-primary border p-3">This will take as width as it needs to contain the text</div>
    <div class="bg-primary border p-3">and this will do too.</div>
    <div class="bg-primary border p-3">and this</div>
    <div class="bg-primary border p-3">and this</div>
  </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>
</html>

PCFkb2N0eXBlIGh0bWw+DQo8aHRtbCBsYW5nPSJlbiI+DQogIDxoZWFkPg0KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4NCiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEiPg0KICAgIDx0aXRsZT5Cb290c3RyYXAgZGVtbzwvdGl0bGU+DQogICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9jc3MvYm9vdHN0cmFwLm1pbi5jc3MiIHJlbD0ic3R5bGVzaGVldCIgaW50ZWdyaXR5PSJzaGEzODQtZ0gyeUlKcUtkTkhQRXEwbjRNcWEvSEdLSWhTa0lIZUw1QXloa1lWOGk1OVU1QVI2Y3NCdkFwSEhObC92STFCeCIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+DQogIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+IDo6LXdlYmtpdC1zY3JvbGxiYXJ7d2lkdGg6N3B4O2hlaWdodDo3cHg7fTo6LXdlYmtpdC1zY3JvbGxiYXItdHJhY2t7YmFja2dyb3VuZDojZmZmO306Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1ie2JvcmRlci1yYWRpdXM6NXB4O2JhY2tncm91bmQ6IzJmNDVmZjt9PC9zdHlsZT48L2hlYWQ+DQogIDxib2R5Pg0KDQo8IS0tIHRoZSByb3cgd2lsbCBvbmx5IGNvbnRhaW4gMyBlbGVtZW50cyBhbmQgdGhlIGZvdXJ0aCB3aWxsIGdvIGRvd24gLS0+DQoNCjxkaXYgY2xhc3M9ImNvbnRhaW5lci1mbHVpZCI+DQogIDxkaXYgY2xhc3M9InJvdyByb3ctY29scy0zIHRleHQtd2hpdGUiPg0KICAgIDxkaXYgY2xhc3M9ImJnLXByaW1hcnkgYm9yZGVyIHAtMyI+Rmlyc3Q8L2Rpdj4NCiAgICA8ZGl2IGNsYXNzPSJiZy1wcmltYXJ5IGJvcmRlciBwLTMiPlNlY29uZDwvZGl2Pg0KICAgIDxkaXYgY2xhc3M9ImJnLXByaW1hcnkgYm9yZGVyIHAtMyI+VGhpcmQ8L2Rpdj4NCiAgICA8ZGl2IGNsYXNzPSJiZy1wcmltYXJ5IGJvcmRlciBwLTMiPkZvcnV0aDwvZGl2Pg0KICA8L2Rpdj4NCjxicj4NCjwvZGl2Pg0KDQo8IS0tRWFjaCBlbGVtZW50IHdpbGwgdGFrZSBhcyB3aWR0aCBhcyBpdCBuZWVkcyBvbmx5IC0tPg0KPGRpdiBjbGFzcz0iY29udGFpbmVyLWZsdWlkIj4NCiAgPGRpdiBjbGFzcz0icm93IHJvdy1jb2xzLWF1dG8gdGV4dC13aGl0ZSI+DQogICAgPGRpdiBjbGFzcz0iYmctcHJpbWFyeSBib3JkZXIgcC0zIj5UaGlzIHdpbGwgdGFrZSBhcyB3aWR0aCBhcyBpdCBuZWVkcyB0byBjb250YWluIHRoZSB0ZXh0PC9kaXY+DQogICAgPGRpdiBjbGFzcz0iYmctcHJpbWFyeSBib3JkZXIgcC0zIj5hbmQgdGhpcyB3aWxsIGRvIHRvby48L2Rpdj4NCiAgICA8ZGl2IGNsYXNzPSJiZy1wcmltYXJ5IGJvcmRlciBwLTMiPmFuZCB0aGlzPC9kaXY+DQogICAgPGRpdiBjbGFzcz0iYmctcHJpbWFyeSBib3JkZXIgcC0zIj5hbmQgdGhpczwvZGl2Pg0KICA8L2Rpdj4NCjwvZGl2Pg0KDQo8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9qcy9ib290c3RyYXAuYnVuZGxlLm1pbi5qcyIgaW50ZWdyaXR5PSJzaGEzODQtQTNySkQ4NTZLb3dTYjdkd2xaZFlFa08zOUdhZ2k3dklzRjBqclJBb1FtREtLdFFCSFV1TFo5QXNTdjRqRDRYYSIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+PC9zY3JpcHQ+DQogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vQHBvcHBlcmpzL2NvcmVAMi4xMS41L2Rpc3QvdW1kL3BvcHBlci5taW4uanMiIGludGVncml0eT0ic2hhMzg0LVhlKzhjTDlvSmE2dE4vdmVDaFNQN3ErbW5TUGFqNUJjdTltUFg1RjV4SUdFMERWaXR0YXFUNWxvcmYwRUk3VmsiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0Pg0KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjIuMC9kaXN0L2pzL2Jvb3RzdHJhcC5taW4uanMiIGludGVncml0eT0ic2hhMzg0LU9EbURJVnpOK3BGZGV4eEhFSEZCUUgzLzkvdlE5dW9yaTQ1ejRKam5Gc1J5ZGJtUWJtTDV0MXRRMGN1bFV6eUsiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0Pg0KDQogIDwvYm9keT4NCjwvaHRtbD4NCjwvaHRtbD4=