CloseTag | الشروحات | Bootstrap | الالوان في BootStrap | Bootstrap Colors

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>

<div class="container">
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
  <p class="text-secondary">Secondary text.</p>
  <p class="text-dark">This text is dark grey.</p>
  <p class="text-body">Default body color (often black).</p>
  <p class="text-light bg-primary">This text is light grey (on primary background).</p>
  <p class="text-white bg-danger">This text is white (on danger background).</p>
</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>

PCFET0NUWVBFIGh0bWw+DQo8aHRtbCBsYW5nPSJlbiI+DQo8aGVhZD4NCiAgPHRpdGxlPkJvb3RzdHJhcCBFeGFtcGxlPC90aXRsZT4NCiAgPG1ldGEgY2hhcnNldD0idXRmLTgiPg0KICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEiPg0KICA8bGluayBocmVmPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjIuMC9kaXN0L2Nzcy9ib290c3RyYXAubWluLmNzcyIgcmVsPSJzdHlsZXNoZWV0IiBpbnRlZ3JpdHk9InNoYTM4NC1nSDJ5SUpxS2ROSFBFcTBuNE1xYS9IR0tJaFNrSUhlTDVBeWhrWVY4aTU5VTVBUjZjc0J2QXBISE5sL3ZJMUJ4IiBjcm9zc29yaWdpbj0iYW5vbnltb3VzIj4NCiANCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+IDo6LXdlYmtpdC1zY3JvbGxiYXJ7d2lkdGg6N3B4O2hlaWdodDo3cHg7fTo6LXdlYmtpdC1zY3JvbGxiYXItdHJhY2t7YmFja2dyb3VuZDojZmZmO306Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1ie2JvcmRlci1yYWRpdXM6NXB4O2JhY2tncm91bmQ6IzJmNDVmZjt9PC9zdHlsZT48L2hlYWQ+DQo8Ym9keT4NCg0KPGRpdiBjbGFzcz0iY29udGFpbmVyIj4NCiAgPHA+VXNlIHRoZSBjb250ZXh0dWFsIGNsYXNzZXMgdG8gcHJvdmlkZSAibWVhbmluZyB0aHJvdWdoIGNvbG9ycyI6PC9wPg0KICA8cCBjbGFzcz0idGV4dC1tdXRlZCI+VGhpcyB0ZXh0IGlzIG11dGVkLjwvcD4NCiAgPHAgY2xhc3M9InRleHQtcHJpbWFyeSI+VGhpcyB0ZXh0IGlzIGltcG9ydGFudC48L3A+DQogIDxwIGNsYXNzPSJ0ZXh0LXN1Y2Nlc3MiPlRoaXMgdGV4dCBpbmRpY2F0ZXMgc3VjY2Vzcy48L3A+DQogIDxwIGNsYXNzPSJ0ZXh0LWluZm8iPlRoaXMgdGV4dCByZXByZXNlbnRzIHNvbWUgaW5mb3JtYXRpb24uPC9wPg0KICA8cCBjbGFzcz0idGV4dC13YXJuaW5nIj5UaGlzIHRleHQgcmVwcmVzZW50cyBhIHdhcm5pbmcuPC9wPg0KICA8cCBjbGFzcz0idGV4dC1kYW5nZXIiPlRoaXMgdGV4dCByZXByZXNlbnRzIGRhbmdlci48L3A+DQogIDxwIGNsYXNzPSJ0ZXh0LXNlY29uZGFyeSI+U2Vjb25kYXJ5IHRleHQuPC9wPg0KICA8cCBjbGFzcz0idGV4dC1kYXJrIj5UaGlzIHRleHQgaXMgZGFyayBncmV5LjwvcD4NCiAgPHAgY2xhc3M9InRleHQtYm9keSI+RGVmYXVsdCBib2R5IGNvbG9yIChvZnRlbiBibGFjaykuPC9wPg0KICA8cCBjbGFzcz0idGV4dC1saWdodCBiZy1wcmltYXJ5Ij5UaGlzIHRleHQgaXMgbGlnaHQgZ3JleSAob24gcHJpbWFyeSBiYWNrZ3JvdW5kKS48L3A+DQogIDxwIGNsYXNzPSJ0ZXh0LXdoaXRlIGJnLWRhbmdlciI+VGhpcyB0ZXh0IGlzIHdoaXRlIChvbiBkYW5nZXIgYmFja2dyb3VuZCkuPC9wPg0KPC9kaXY+DQoNCjxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjIuMC9kaXN0L2pzL2Jvb3RzdHJhcC5idW5kbGUubWluLmpzIiBpbnRlZ3JpdHk9InNoYTM4NC1BM3JKRDg1Nktvd1NiN2R3bFpkWUVrTzM5R2FnaTd2SXNGMGpyUkFvUW1ES0t0UUJIVXVMWjlBc1N2NGpENFhhIiBjcm9zc29yaWdpbj0iYW5vbnltb3VzIj48L3NjcmlwdD4NCiAgICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL0Bwb3BwZXJqcy9jb3JlQDIuMTEuNS9kaXN0L3VtZC9wb3BwZXIubWluLmpzIiBpbnRlZ3JpdHk9InNoYTM4NC1YZSs4Y0w5b0phNnROL3ZlQ2hTUDdxK21uU1BhajVCY3U5bVBYNUY1eElHRTBEVml0dGFxVDVsb3JmMEVJN1ZrIiBjcm9zc29yaWdpbj0iYW5vbnltb3VzIj48L3NjcmlwdD4NCiAgICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjIuMC9kaXN0L2pzL2Jvb3RzdHJhcC5taW4uanMiIGludGVncml0eT0ic2hhMzg0LU9EbURJVnpOK3BGZGV4eEhFSEZCUUgzLzkvdlE5dW9yaTQ1ejRKam5Gc1J5ZGJtUWJtTDV0MXRRMGN1bFV6eUsiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0Pg0KICAgICAgDQo8L2JvZHk+DQo8L2h0bWw+