مرجع W3.css

دوال W3 الشاملة مع أمثلة تطبيقية — 1421 دالة

Color

34 عنصر
الاسم الوصف مثال
w3-red يضيف لون خلفية أحمر مع نص أبيض. 
<div class="w3-red w3-padding">نص بخلفية حمراء</div>
w3-pink يضيف لون خلفية وردي مع نص أبيض. 
<div class="w3-pink w3-padding">نص بخلفية وردية</div>
w3-purple يضيف لون خلفية بنفسجي مع نص أبيض. 
<div class="w3-purple w3-padding">نص بخلفية بنفسجية</div>
w3-deep-purple يضيف لون خلفية بنفسجي غامق مع نص أبيض. 
<div class="w3-deep-purple w3-padding">نص بخلفية بنفسجية غامقة</div>
w3-indigo يضيف لون خلفية نيلي (إنديجو) مع نص أبيض. 
<div class="w3-indigo w3-padding">نص بخلفية نيلي</div>
w3-blue يضيف لون خلفية أزرق مع نص أبيض. 
<div class="w3-blue w3-padding">نص بخلفية زرقاء</div>
w3-light-blue يضيف لون خلفية أزرق فاتح مع نص داكن. 
<div class="w3-light-blue w3-padding">نص بخلفية زرقاء فاتحة</div>
w3-cyan يضيف لون خلفية سيان (أزرق مخضر) مع نص داكن. 
<div class="w3-cyan w3-padding">نص بخلفية سيان</div>
w3-aqua يضيف لون خلفية aqua مع نص داكن. 
<div class="w3-aqua w3-padding">نص بخلفية aqua</div>
w3-teal يضيف لون خلفية teal (أزرق-أخضر) مع نص أبيض. 
<div class="w3-teal w3-padding">نص بخلفية teal</div>
w3-green يضيف لون خلفية أخضر مع نص أبيض. 
<div class="w3-green w3-padding">نص بخلفية خضراء</div>
w3-light-green يضيف لون خلفية أخضر فاتح مع نص داكن. 
<div class="w3-light-green w3-padding">نص بخلفية خضراء فاتحة</div>
w3-lime يضيف لون خلفية lime (أخضر مصفر) مع نص داكن. 
<div class="w3-lime w3-padding">نص بخلفية lime</div>
w3-khaki يضيف لون خلفية كاكي مع نص داكن. 
<div class="w3-khaki w3-padding">نص بخلفية كاكي</div>
w3-yellow يضيف لون خلفية أصفر مع نص داكن. 
<div class="w3-yellow w3-padding">نص بخلفية صفراء</div>
w3-amber يضيف لون خلفية كهرماني مع نص داكن. 
<div class="w3-amber w3-padding">نص بخلفية كهرمانية</div>
w3-orange يضيف لون خلفية برتقالي مع نص داكن. 
<div class="w3-orange w3-padding">نص بخلفية برتقالية</div>
w3-deep-orange يضيف لون خلفية برتقالي غامق مع نص أبيض. 
<div class="w3-deep-orange w3-padding">نص بخلفية برتقالية غامقة</div>
w3-blue-gray يضيف لون خلفية أزرق-رمادي مع نص أبيض. 
<div class="w3-blue-gray w3-padding">نص بخلفية زرقاء رمادية</div>
w3-brown يضيف لون خلفية بني مع نص أبيض. 
<div class="w3-brown w3-padding">نص بخلفية بنية</div>
w3-light-gray يضيف لون خلفية رمادي فاتح مع نص داكن. 
<div class="w3-light-gray w3-padding">نص بخلفية رمادية فاتحة</div>
w3-gray يضيف لون خلفية رمادي مع نص أبيض. 
<div class="w3-gray w3-padding">نص بخلفية رمادية</div>
w3-dark-gray يضيف لون خلفية رمادي غامق مع نص أبيض. 
<div class="w3-dark-gray w3-padding">نص بخلفية رمادية غامقة</div>
w3-black يضيف لون خلفية أسود مع نص أبيض. 
<div class="w3-black w3-padding">نص بخلفية سوداء</div>
w3-white يضيف لون خلفية أبيض مع نص داكن. 
<div class="w3-white w3-padding">نص بخلفية بيضاء</div>
w3-text-red يغير لون النص إلى أحمر. 
<div class="w3-text-red">نص أحمر اللون</div>
w3-text-blue يغير لون النص إلى أزرق. 
<div class="w3-text-blue">نص أزرق اللون</div>
w3-text-green يغير لون النص إلى أخضر. 
<div class="w3-text-green">نص أخضر اللون</div>
w3-border-red يضيف حدود أحمر للعنصر. 
<div class="w3-border w3-border-red w3-padding">صندوق بحدود حمراء</div>
w3-border-blue يضيف حدود أزرق للعنصر. 
<div class="w3-border w3-border-blue w3-padding">صندوق بحدود زرقاء</div>
w3-hover-red يغير لون الخلفية إلى أحمر عند تمرير الفأرة. 
<button class="w3-button w3-hover-red">مرر فوقي</button>
w3-hover-blue يغير لون الخلفية إلى أزرق عند تمرير الفأرة. 
<button class="w3-button w3-hover-blue">مرر فوقي</button>
w3-red-gradient يضيف تدرج لوني أحمر للخلفية. 
<div class="w3-red-gradient w3-padding">تدرج أحمر</div>
w3-blue-gradient يضيف تدرج لوني أزرق للخلفية. 
<div class="w3-blue-gradient w3-padding">تدرج أزرق</div>

Containers

23 عنصر
الاسم الوصف مثال
w3-container أهم فئة في W3.CSS. تستخدم كحاوية للمحتوى تضيف هوامش وحواف داخلية (padding) وتصلح مشاكل الطفو (clearfix). 
<div class="w3-container">
  <p>محتوى عادي داخل حاوية.</p>
</div>
w3-panel تشبه w3-container ولكنها تضيف ظلًّا وهامشًا أكبر، مما يجعلها مناسبة لعناصر مثل التنبيهات أو الإعلانات. 
<div class="w3-panel w3-blue">
  <p>هذا لوحة تنبيه زرقاء.</p>
</div>
w3-card تحول العنصر إلى بطاقة (card) بإضافة ظل وحدود ناعمة، مما يعطي إحساسًا بالعمق. 
<div class="w3-card w3-padding">
  <p>هذه بطاقة بسيطة.</p>
</div>
w3-card-4 تحول العنصر إلى بطاقة بظل أكثر وضوحًا (ظل بـ 4px) من w3-card العادية. 
<div class="w3-card-4 w3-padding">
  <p>هذه بطاقة بظل أعمق.</p>
</div>
w3-row تنشئ صفًّا (row) جديدًا. يجب وضع أعمدة (w3-col) بداخله. 
<div class="w3-row">
  <div class="w3-col m6">عمود</div>
  <div class="w3-col m6">عمود</div>
</div>
w3-col فئة أساسية للأعمدة. يجب دائمًا استخدامها مع فئة تحدد الحجم (مثل s12, m6, l4). 
<div class="w3-col m6">هذا عمود بعرض 6 وحدات من 12 على الشاشات متوسطة الحجم (medium) فما فوق.</div>
w3-half تنشئ عمودًا بعرض النصف (50%). بديل سريع لـ w3-col s6 m6. 
<div class="w3-half">نصف</div>
<div class="w3-half">نصف</div>
w3-third تنشئ عمودًا بعرض الثلث (33.33%). بديل سريع لـ w3-col s4 m4. 
<div class="w3-third">ثلث</div>
<div class="w3-third">ثلث</div>
<div class="w3-third">ثلث</div>
w3-twothird تنشئ عمودًا بعرض الثلثين (66.66%). بديل سريع لـ w3-col s8 m8. 
<div class="w3-twothird">ثلثين</div>
<div class="w3-third">ثلث</div>
w3-quarter تنشئ عمودًا بعرض الربع (25%). بديل سريع لـ w3-col s3 m3. 
<div class="w3-quarter">ربع</div>
<div class="w3-quarter">ربع</div>
<div class="w3-quarter">ربع</div>
<div class="w3-quarter">ربع</div>
w3-threequarter تنشئ عمودًا بعرض ثلاثة أرباع (75%). بديل سريع لـ w3-col s9 m9. 
<div class="w3-threequarter">ثلاثة أرباع</div>
<div class="w3-quarter">ربع</div>
w3-rest يأخذ العمود العرض المتبقي من المساحة بعد الأعمدة الأخرى المحددة في الصف. 
<div class="w3-col m2">عمود بعرض 2</div>
<div class="w3-rest">هذا العمود يأخذ باقي العرض (10 وحدات).</div>
w3-content تنشئ حاوية ذات عرض ثابت (980px by default) وتوسّط المحتوى على الصفحة. مثالية للهيكلة الأساسية للصفحة. 
<div class="w3-content" style="max-width:1200px">
  <p>محتوى الصفحة كله هنا وسيكون بأقصى عرض 1200px.</p>
</div>
w3-cell-row تنشئ صفًّا يستخدم تخطيط الخلية (CSS table-cell) لجعل جميع العناصر بداخله بنفس الارتفاع. 
<div class="w3-cell-row">
  <div class="w3-cell">خلايا بنفس الارتفاع</div>
  <div class="w3-cell">خلايا بنفس الارتفاع</div>
</div>
w3-cell يستخدم داخل w3-cell-row لجعل العنصر يتصرف كخلية في جدول. 
<div class="w3-cell">محتوى الخلية</div>
w3-cell-bottom محاذاة محتوى الخلية إلى الأسفل (داخل w3-cell-row). 
<div class="w3-cell w3-cell-bottom">محتوى بمحاذاة سفلية</div>
w3-cell-middle محاذاة محتوى الخلية إلى المنتصف (داخل w3-cell-row). 
<div class="w3-cell w3-cell-middle">محتوى بمحاذاة وسطية</div>
w3-cell-top محاذاة محتوى الخلية إلى الأعلى (داخل w3-cell-row). 
<div class="w3-cell w3-cell-top">محتوى بمحاذاة علوية</div>
w3-hide يخفي العنصر على جميع أحجام الشاشات. 
<div class="w3-hide">هذا العنصر مخفي</div>
w3-show يظهر العنصر على جميع أحجام الشاشات (يُلغي تأثير w3-hide). 
<div class="w3-show">هذا العنصر ظاهر</div>
w3-hide-small يخفي العنصر على الشاشات الصغيرة فقط (هواتف). 
<div class="w3-hide-small">هذا العنصر مخفي على الهواتف</div>
w3-hide-medium يخفي العنصر على الشاشات متوسطة الحجم فقط (ألواح/تابلت). 
<div class="w3-hide-medium">هذا العنصر مخفي على التابلت</div>
w3-hide-large يخفي العنصر على الشاشات الكبيرة فقط (أجهزة كمبيوتر). 
<div class="w3-hide-large">هذا العنصر مخفي على أجهزة الكمبيوتر</div>

Defaults

42 عنصر
الاسم الوصف مثال
w3-default تعيد تعيين العنصر إلى الإعدادات الافتراضية لـ W3.CSS (إذا تم التعديل عليه بأنماط أخرى). 
<div class="w3-default w3-padding">عنصر بالإعدادات الافتراضية</div>
w3-serif يغير خط العنصر إلى خط من نوع Serif (مثل Times New Roman). 
<p class="w3-serif">نص بخط Serif</p>
w3-sans-serif يغير خط العنصر إلى خط من نوع Sans-Serif (مثل Arial). 
<p class="w3-sans-serif">نص بخط Sans-Serif</p>
w3-monospace يغير خط العنصر إلى خط من نوع Monospace (مثل Courier New). 
<p class="w3-monospace">نص بخط Monospace</p>
w3-cursive يغير خط العنصر إلى خط من نوع Cursive. 
<p class="w3-cursive">نص بخط Cursive</p>
w3-fantasy يغير خط العنصر إلى خط من نوع Fantasy. 
<p class="w3-fantasy">نص بخط Fantasy</p>
w3-tiny يجعل حجم النص صغير جداً (10px). 
<p class="w3-tiny">نص صغير جداً</p>
w3-small يجعل حجم النص صغير (12px). 
<p class="w3-small">نص صغير</p>
w3-medium يجعل حجم النص متوسط (15px). 
<p class="w3-medium">نص متوسط</p>
w3-large يجعل حجم النص كبير (18px). 
<p class="w3-large">نص كبير</p>
w3-xlarge يجعل حجم النص كبير جداً (22px). 
<p class="w3-xlarge">نص كبير جداً</p>
w3-xxlarge يجعل حجم النص ضخم (36px). 
<p class="w3-xxlarge">نص ضخم</p>
w3-xxxlarge يجعل حجم النص ضخم جداً (48px). 
<p class="w3-xxxlarge">نص ضخم جداً</p>
w3-jumbo يجعل حجم النص جumbo (64px). 
<p class="w3-jumbo">نص بحجم jumbo</p>
w3-normal يجعل وزن النص عادي (400). 
<p class="w3-normal">نص بوزن عادي</p>
w3-bold يجعل النص عريض (700). 
<p class="w3-bold">نص عريض</p>
w3-bolder يجعل النص أكثر عرضة من العريض. 
<p class="w3-bolder">نص أكثر عرضة</p>
w3-light يجعل النص خفيف الوزن (300). 
<p class="w3-light">نص خفيف الوزن</p>
w3-lighter يجعل النص أخف وزناً من الخفيف. 
<p class="w3-lighter">نص أخف وزناً</p>
w3-left-align يحاذي النص إلى اليسار. 
<p class="w3-left-align">نص بمحاذاة لليسار</p>
w3-right-align يحاذي النص إلى اليمين. 
<p class="w3-right-align">نص بمحاذاة لليمين</p>
w3-center يحاذي النص إلى المنتصف. 
<p class="w3-center">نص في المنتصف</p>
w3-justify يحاذي النص بشكل كامل (justify). 
<p class="w3-justify">نص بمحاذاة كاملة على الجانبين</p>
w3-uppercase يحول النص إلى أحرف كبيرة (uppercase). 
<p class="w3-uppercase">نص بأحرف كبيرة</p>
w3-lowercase يحول النص إلى أحرف صغيرة (lowercase). 
<p class="w3-lowercase">نص بأحرف صغيرة</p>
w3-capitalize يحول أول حرف من كل كلمة إلى كبير (capitalize). 
<p class="w3-capitalize">نص بأول حرف كبير من كل كلمة</p>
w3-text-shadow يضيف ظل للنص. 
<p class="w3-text-shadow">نص بظل</p>
w3-no-text-shadow يزيل ظل النص. 
<p class="w3-no-text-shadow">نص بدون ظل</p>
w3-opacity يجعل العنصر شفافاً بنسبة 60%. 
<p class="w3-opacity">نص شفاف</p>
w3-opacity-off يجعل العنصر غير شفاف (100%). 
<p class="w3-opacity-off">نص غير شفاف</p>
w3-opacity-min يجعل العنصر شفافاً بنسبة قليلة (0.75). 
<p class="w3-opacity-min">نص شفاف قليلاً</p>
w3-opacity-max يجعل العنصر شفافاً بنسبة كبيرة (0.25). 
<p class="w3-opacity-max">نص شفاف كثيراً</p>
w3-margin يضيف هامشاً حول العنصر (16px). 
<div class="w3-margin w3-padding">عنصر بهامش</div>
w3-margin-0 يزيل جميع الهوامش من العنصر. 
<div class="w3-margin-0 w3-padding">عنصر بدون هوامش</div>
w3-padding يضيف حشواً داخلياً للعنصر (16px). 
<div class="w3-padding">عنصر بحشو داخلي</div>
w3-padding-0 يزيل جميع الحشو الداخلي من العنصر. 
<div class="w3-padding-0">عنصر بدون حشو داخلي</div>
w3-auto يوسط العنصر أفقياً تلقائياً. 
<div class="w3-auto w3-padding">عنصر متمركز</div>
w3-block يجعل العنصر كتلة (block) ويأخذ العرض الكامل. 
<div class="w3-block w3-padding">عنصر كتلة</div>
w3-inline يجعل العنصر ضمني (inline). 
<span class="w3-inline w3-padding">عنصر ضمني</span>
w3-inline-block يجعل العنصر كتلة ضمنية (inline-block). 
<div class="w3-inline-block w3-padding">عنصر كتلة ضمنية</div>
w3-responsive يجعل الجداول تستجيب للشاشات الصغيرة. 
<table class="w3-responsive">...</table>
w3-container إعدادات الحاوية الافتراضية (إضافة padding وتصحيح float). 
<div class="w3-container">حاوية افتراضية</div>

Darkmode

26 عنصر
الاسم الوصف مثال
w3-dark-grey لون خلفية رمادي داكن للوضع الداكن. 
<div class="w3-dark-grey w3-padding">خلفية رمادية داكنة</div>
w3-black لون خلفية أسود للوضع الداكن. 
<div class="w3-black w3-padding">خلفية سوداء</div>
w3-text-white لون نص أبيض للوضع الداكن. 
<p class="w3-text-white w3-dark-grey">نص أبيض على خلفية داكنة</p>
w3-hover-dark-grey يغير لون الخلفية إلى رمادي داكن عند التمرير. 
<div class="w3-hover-dark-grey w3-padding">مرر للتحول إلى رمادي داكن</div>
w3-hover-black يغير لون الخلفية إلى أسود عند التمرير. 
<div class="w3-hover-black w3-padding">مرر للتحول إلى أسود</div>
w3-hover-text-white يغير لون النص إلى أبيض عند التمرير. 
<p class="w3-hover-text-white w3-dark-grey w3-padding">مرر لرؤية النص الأبيض</p>
w3-border-dark-grey يضيف حدودًا رمادية داكنة. 
<div class="w3-border w3-border-dark-grey w3-padding">حدود رمادية داكنة</div>
w3-border-black يضيف حدودًا سوداء. 
<div class="w3-border w3-border-black w3-padding">حدود سوداء</div>
w3-card-dark بطاقة بتصميم مظلم. 
<div class="w3-card-dark w3-padding">بطاقة مظلمة</div>
w3-panel-dark لوحة بتصميم مظلم. 
<div class="w3-panel-dark w3-padding">لوحة مظلمة</div>
w3-button-dark زر بتصميم مظلم. 
<button class="w3-button-dark">زر مظلم</button>
w3-table-dark جدول بتصميم مظلم. 
<table class="w3-table-dark">
  <tr><th>رأس</th><th>رأس</th></tr>
  <tr><td>خلية</td><td>خلية</td></tr>
</table>
w3-input-dark حقل إدخال بتصميم مظلم. 
<input class="w3-input-dark" type="text" placeholder="حقل إدخال مظلم">
w3-modal-dark نافذة مشروطة بتصميم مظلم. 
<div class="w3-modal-dark">
  <div class="w3-modal-content-dark">
    <p>نافذة مشروطة مظلمة</p>
  </div>
</div>
w3-dropdown-dark قائمة منسدلة بتصميم مظلم. 
<div class="w3-dropdown-dark">
  <button class="w3-button-dark">قائمة مظلمة</button>
  <div class="w3-dropdown-content-dark">
    <a href="#">خيار 1</a>
    <a href="#">خيار 2</a>
  </div>
</div>
w3-navbar-dark شريط تنقل بتصميم مظلم. 
<div class="w3-navbar-dark">
  <a href="#" class="w3-navbar-item">رابط 1</a>
  <a href="#" class="w3-navbar-item">رابط 2</a>
</div>
w3-sidebar-dark شريط جانبي بتصميم مظلم. 
<div class="w3-sidebar-dark w3-bar-block">
  <a href="#" class="w3-bar-item">رابط 1</a>
  <a href="#" class="w3-bar-item">رابط 2</a>
</div>
w3-bar-dark شريط أفقي بتصميم مظلم. 
<div class="w3-bar-dark">
  <a href="#" class="w3-bar-item">عنصر 1</a>
  <a href="#" class="w3-bar-item">عنصر 2</a>
</div>
w3-hoverable-dark يجعل العنصر متفاعلاً مع التمرير في الوضع الداكن. 
<div class="w3-hoverable-dark w3-padding">عنصر متفاعل مظلم</div>
w3-container-dark حاوية بتصميم مظلم. 
<div class="w3-container-dark">حاوية مظلمة</div>
w3-section-dark قسم بتصميم مظلم مع مسافات. 
<div class="w3-section-dark">قسم مظلم</div>
w3-margin-dark يضيف هوامش بتصميم مظلم. 
<div class="w3-margin-dark w3-padding">عنصر بهامش مظلم</div>
w3-padding-dark يضيف حشواً داخلياً بتصميم مظلم. 
<div class="w3-padding-dark">عنصر بحشو مظلم</div>
w3-round-dark زوايا مستديرة بتصميم مظلم. 
<div class="w3-round-dark w3-padding">عنصر مستدير مظلم</div>
w3-display-container-dark حاوية عرض بتصميم مظلم. 
<div class="w3-display-container-dark" style="height:200px;">
  <div class="w3-display-middle">نص في منتصف الحاوية المظلمة</div>
</div>
w3-responsive-dark يجعل الجداول متجاوبة مع التصميم المظلم. 
<table class="w3-responsive-dark">
  <tr><th>رأس</th><th>رأس</th></tr>
  <tr><td>خلية</td><td>خلية</td></tr>
</table>

Display

24 عنصر
الاسم الوصف مثال
w3-display-container تنشئ حاوية لعناصر العرض الخاصة. تسمح بوضع عناصر داخلية في مواقع محددة. 
<div class="w3-display-container" style="height:200px;">
  <div class="w3-display-middle">هذا النص في المنتصف</div>
</div>
w3-display-topleft يضع العنصر في الزاوية العلوية اليسرى داخل w3-display-container. 
<div class="w3-display-topleft">أعلى اليسار</div>
w3-display-topright يضع العنصر في الزاوية العلوية اليمنى داخل w3-display-container. 
<div class="w3-display-topright">أعلى اليمين</div>
w3-display-bottomleft يضع العنصر في الزاوية السفلية اليسرى داخل w3-display-container. 
<div class="w3-display-bottomleft">أسفل اليسار</div>
w3-display-bottomright يضع العنصر في الزاوية السفلية اليمنى داخل w3-display-container. 
<div class="w3-display-bottomright">أسفل اليمين</div>
w3-display-left يضع العنصر في المنتصف على اليسار داخل w3-display-container. 
<div class="w3-display-left">الوسط يسار</div>
w3-display-right يضع العنصر في المنتصف على اليمين داخل w3-display-container. 
<div class="w3-display-right">الوسط يمين</div>
w3-display-middle يضع العنصر في المنتصف تماماً داخل w3-display-container. 
<div class="w3-display-middle">منتصف</div>
w3-display-topmiddle يضع العنصر في المنتصف العلوي داخل w3-display-container. 
<div class="w3-display-topmiddle">أعلى المنتصف</div>
w3-display-bottommiddle يضع العنصر في المنتصف السفلي داخل w3-display-container. 
<div class="w3-display-bottommiddle">أسفل المنتصف</div>
w3-display-hover يظهر العنصر فقط عند التمرير فوق w3-display-container. 
<div class="w3-display-hover">يظهر عند التمرير</div>
w3-display-position يحدد موضع العنصر داخل w3-display-container باستخدام الإحداثيات. 
<div class="w3-display-position" style="top:50px;left:20px;">موضع مخصص</div>
w3-block يجعل العنصر كتلة (block) ويأخذ العرض الكامل. 
<div class="w3-block w3-padding">عنصر كتلة</div>
w3-inline يجعل العنصر ضمني (inline). 
<span class="w3-inline w3-padding">عنصر ضمني</span>
w3-inline-block يجعل العنصر كتلة ضمنية (inline-block). 
<div class="w3-inline-block w3-padding">عنصر كتلة ضمنية</div>
w3-hide يخفي العنصر على جميع أحجام الشاشات. 
<div class="w3-hide">هذا العنصر مخفي</div>
w3-show يظهر العنصر على جميع أحجام الشاشات (يُلغي تأثير w3-hide). 
<div class="w3-show">هذا العنصر ظاهر</div>
w3-hide-small يخفي العنصر على الشاشات الصغيرة فقط (هواتف). 
<div class="w3-hide-small">هذا العنصر مخفي على الهواتف</div>
w3-hide-medium يخفي العنصر على الشاشات متوسطة الحجم فقط (ألواح/تابلت). 
<div class="w3-hide-medium">هذا العنصر مخفي على التابلت</div>
w3-hide-large يخفي العنصر على الشاشات الكبيرة فقط (أجهزة كمبيوتر). 
<div class="w3-hide-large">هذا العنصر مخفي على أجهزة الكمبيوتر</div>
w3-responsive يجعل الجداول تستجيب للشاشات الصغيرة. 
<table class="w3-responsive">
  <tr><th>رأس 1</th><th>رأس 2</th></tr>
  <tr><td>خلية 1</td><td>خلية 2</td></tr>
</table>
w3-modal ينشئ نافذة مشروطة (modal). 
<div class="w3-modal">
  <div class="w3-modal-content">
    <p>محتوى النافذة المشروطة</p>
  </div>
</div>
w3-container إعدادات الحاوية الافتراضية (إضافة padding وتصحيح float). 
<div class="w3-container">حاوية افتراضية</div>
w3-panel تشبه w3-container ولكنها تضيف ظلًّا وهامشًا أكبر. 
<div class="w3-panel w3-blue">
  <p>هذا لوحة تنبيه زرقاء.</p>
</div>

Dropdowns

21 عنصر
الاسم الوصف مثال
w3-dropdown-hover ينشئ قائمة منسدلة تظهر عند التمرير فوق العنصر. 
<div class="w3-dropdown-hover">
  <button class="w3-button">تمرر فوقي</button>
  <div class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">خيار 1</a>
    <a href="#" class="w3-bar-item w3-button">خيار 2</a>
  </div>
</div>
w3-dropdown-click ينشئ قائمة منسدلة تظهر عند النقر على العنصر. 
<div class="w3-dropdown-click">
  <button class="w3-button" onclick="myFunction()">انقر علي</button>
  <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">خيار 1</a>
    <a href="#" class="w3-bar-item w3-button">خيار 2</a>
  </div>
</div>
w3-dropdown-content يحوي محتوى القائمة المنسدلة. 
<div class="w3-dropdown-content w3-bar-block w3-border">
  <a href="#" class="w3-bar-item w3-button">خيار 1</a>
  <a href="#" class="w3-bar-item w3-button">خيار 2</a>
</div>
w3-dropdown-content w3-bar-block محتوى القائمة المنسدلة على شكل كتل. 
<div class="w3-dropdown-content w3-bar-block w3-border">
  <a href="#" class="w3-bar-item w3-button">خيار 1</a>
  <a href="#" class="w3-bar-item w3-button">خيار 2</a>
</div>
w3-dropdown-content w3-card محتوى القائمة المنسدلة بتصميم بطاقة. 
<div class="w3-dropdown-content w3-card w3-bar-block">
  <a href="#" class="w3-bar-item w3-button">خيار 1</a>
  <a href="#" class="w3-bar-item w3-button">خيار 2</a>
</div>
w3-dropdown-content w3-round محتوى القائمة المنسدلة بزوايا مستديرة. 
<div class="w3-dropdown-content w3-round w3-bar-block w3-border">
  <a href="#" class="w3-bar-item w3-button">خيار 1</a>
  <a href="#" class="w3-bar-item w3-button">خيار 2</a>
</div>
w3-dropdown-content w3-blue محتوى القائمة المنسدلة باللون الأزرق. 
<div class="w3-dropdown-content w3-blue w3-bar-block">
  <a href="#" class="w3-bar-item w3-button">خيار 1</a>
  <a href="#" class="w3-bar-item w3-button">خيار 2</a>
</div>
w3-dropdown-content w3-red محتوى القائمة المنسدلة باللون الأحمر. 
<div class="w3-dropdown-content w3-red w3-bar-block">
  <a href="#" class="w3-bar-item w3-button">خيار 1</a>
  <a href="#" class="w3-bar-item w3-button">خيار 2</a>
</div>
w3-dropdown-content w3-green محتوى القائمة المنسدلة باللون الأخضر. 
<div class="w3-dropdown-content w3-green w3-bar-block">
  <a href="#" class="w3-bar-item w3-button">خيار 1</a>
  <a href="#" class="w3-bar-item w3-button">خيار 2</a>
</div>
w3-dropdown-content w3-yellow محتوى القائمة المنسدلة باللون الأصفر. 
<div class="w3-dropdown-content w3-yellow w3-bar-block">
  <a href="#" class="w3-bar-item w3-button">خيار 1</a>
  <a href="#" class="w3-bar-item w3-button">خيار 2</a>
</div>
w3-dropdown-content w3-black محتوى القائمة المنسدلة باللون الأسود. 
<div class="w3-dropdown-content w3-black w3-bar-block">
  <a href="#" class="w3-bar-item w3-button">خيار 1</a>
  <a href="#" class="w3-bar-item w3-button">خيار 2</a>
</div>
w3-dropdown-content w3-white محتوى القائمة المنسدلة باللون الأبيض. 
<div class="w3-dropdown-content w3-white w3-bar-block w3-border">
  <a href="#" class="w3-bar-item w3-button">خيار 1</a>
  <a href="#" class="w3-bar-item w3-button">خيار 2</a>
</div>
w3-dropdown-content w3-pale-blue محتوى القائمة المنسدلة بخلفية زرقاء باهتة. 
<div class="w3-dropdown-content w3-pale-blue w3-bar-block w3-border">
  <a href="#" class="w3-bar-item w3-button">خيار 1</a>
  <a href="#" class="w3-bar-item w3-button">خيار 2</a>
</div>
w3-dropdown-content w3-pale-red محتوى القائمة المنسدلة بخلفية حمراء باهتة. 
<div class="w3-dropdown-content w3-pale-red w3-bar-block w3-border">
  <a href="#" class="w3-bar-item w3-button">خيار 1</a>
  <a href="#" class="w3-bar-item w3-button">خيار 2</a>
</div>
w3-dropdown-content w3-pale-green محتوى القائمة المنسدلة بخلفية خضراء باهتة. 
<div class="w3-dropdown-content w3-pale-green w3-bar-block w3-border">
  <a href="#" class="w3-bar-item w3-button">خيار 1</a>
  <a href="#" class="w3-bar-item w3-button">خيار 2</a>
</div>
w3-dropdown-content w3-pale-yellow محتوى القائمة المنسدلة بخلفية صفراء باهتة. 
<div class="w3-dropdown-content w3-pale-yellow w3-bar-block w3-border">
  <a href="#" class="w3-bar-item w3-button">خيار 1</a>
  <a href="#" class="w3-bar-item w3-button">خيار 2</a>
</div>
w3-dropdown-hover w3-right قائمة منسدلة تظهر على الجانب الأيمن. 
<div class="w3-dropdown-hover w3-right">
  <button class="w3-button">يمين</button>
  <div class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">خيار 1</a>
    <a href="#" class="w3-bar-item w3-button">خيار 2</a>
  </div>
</div>
w3-dropdown-hover w3-left قائمة منسدلة تظهر على الجانب الأيسر. 
<div class="w3-dropdown-hover w3-left">
  <button class="w3-button">يسار</button>
  <div class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">خيار 1</a>
    <a href="#" class="w3-bar-item w3-button">خيار 2</a>
  </div>
</div>
w3-dropdown-hover w3-mobile قائمة منسدلة متجاوبة للجوال. 
<div class="w3-dropdown-hover w3-mobile">
  <button class="w3-button">جوال</button>
  <div class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">خيار 1</a>
    <a href="#" class="w3-bar-item w3-button">خيار 2</a>
  </div>
</div>
w3-dropdown-hover w3-round قائمة منسدلة بزوايا مستديرة. 
<div class="w3-dropdown-hover w3-round">
  <button class="w3-button">مستدير</button>
  <div class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">خيار 1</a>
    <a href="#" class="w3-bar-item w3-button">خيار 2</a>
  </div>
</div>
w3-caret يضيف رمز السهم للدلالة على وجود قائمة منسدلة. 
<button class="w3-button">القائمة <span class="w3-caret">▼</span></button>

Effects

41 عنصر
الاسم الوصف مثال
w3-opacity يجعل العنصر شفافاً بنسبة 60%. 
<div class="w3-opacity w3-padding">عنصر شفاف</div>
w3-opacity-min يجعل العنصر شفافاً بنسبة 75%. 
<div class="w3-opacity-min w3-padding">عنصر شفاف قليلاً</div>
w3-opacity-max يجعل العنصر شفافاً بنسبة 25%. 
<div class="w3-opacity-max w3-padding">عنصر شفاف جداً</div>
w3-opacity-off يزيل الشفافية عن العنصر. 
<div class="w3-opacity-off w3-padding">عنصر غير شفاف</div>
w3-hover-opacity يجعل العنصر شفافاً عند التمرير فوقه. 
<div class="w3-hover-opacity w3-padding">مرر فوقي للشفافية</div>
w3-hover-opacity-off يزيل الشفافية عند التمرير فوقه. 
<div class="w3-hover-opacity-off w3-padding">مرر فوقي لإزالة الشفافية</div>
w3-grayscale يحول العنصر إلى تدرج الرمادي. 
<img class="w3-grayscale" src="image.jpg" alt="صورة رمادية">
w3-grayscale-min يحول العنصر إلى تدرج الرمادي بنسبة 75%. 
<img class="w3-grayscale-min" src="image.jpg" alt="صورة رمادية قليلاً">
w3-grayscale-max يحول العنصر إلى تدرج الرمادي بنسبة 25%. 
<img class="w3-grayscale-max" src="image.jpg" alt="صورة رمادية جداً">
w3-grayscale-off يزيل تأثير تدرج الرمادي عن العنصر. 
<img class="w3-grayscale-off" src="image.jpg" alt="صورة ملونة">
w3-hover-grayscale يحول العنصر إلى تدرج الرمادي عند التمرير. 
<img class="w3-hover-grayscale" src="image.jpg" alt="صورة تتحول إلى رمادي">
w3-sepia يحول العنصر إلى لون سيبيا (بني داكن). 
<img class="w3-sepia" src="image.jpg" alt="صورة سيبيا">
w3-sepia-min يحول العنصر إلى لون سيبيا بنسبة 75%. 
<img class="w3-sepia-min" src="image.jpg" alt="صورة سيبيا قليلاً">
w3-sepia-max يحول العنصر إلى لون سيبيا بنسبة 25%. 
<img class="w3-sepia-max" src="image.jpg" alt="صورة سيبيا جداً">
w3-sepia-off يزيل تأثير السيبيا عن العنصر. 
<img class="w3-sepia-off" src="image.jpg" alt="صورة ملونة">
w3-hover-sepia يحول العنصر إلى لون سيبيا عند التمرير. 
<img class="w3-hover-sepia" src="image.jpg" alt="صورة تتحول إلى سيبيا">
w3-shadow يضيف ظلاً خفيفاً للعنصر. 
<div class="w3-shadow w3-padding">عنصر بظل</div>
w3-hover-shadow يضيف ظلاً للعنصر عند التمرير. 
<div class="w3-hover-shadow w3-padding">مرر فوقي لإظهار الظل</div>
w3-card يضيف تأثير البطاقة (ظل وحدود ناعمة). 
<div class="w3-card w3-padding">بطاقة</div>
w3-card-2 يضيف تأثير البطاقة بظل متوسط. 
<div class="w3-card-2 w3-padding">بطاقة بظل متوسط</div>
w3-card-4 يضيف تأثير البطاقة بظل كبير. 
<div class="w3-card-4 w3-padding">بطاقة بظل كبير</div>
w3-card-8 يضيف تأثير البطاقة بظل كبير جداً. 
<div class="w3-card-8 w3-padding">بطاقة بظل كبير جداً</div>
w3-card-12 يضيف تأثير البطاقة بظل ضخم. 
<div class="w3-card-12 w3-padding">بطاقة بظل ضخم</div>
w3-card-16 يضيف تأثير البطاقة بظل ضخم جداً. 
<div class="w3-card-16 w3-padding">بطاقة بظل ضخم جداً</div>
w3-hover-card يضيف تأثير البطاقة عند التمرير. 
<div class="w3-hover-card w3-padding">مرر فوقي لرؤية البطاقة</div>
w3-round يجعل زوايا العنصر مستديرة. 
<div class="w3-round w3-padding">عنصر مستدير</div>
w3-round-small يجعل زوايا العنصر مستديرة بشكل صغير. 
<div class="w3-round-small w3-padding">عنصر مستدير صغير</div>
w3-round-medium يجعل زوايا العنصر مستديرة بشكل متوسط. 
<div class="w3-round-medium w3-padding">عنصر مستدير متوسط</div>
w3-round-large يجعل زوايا العنصر مستديرة بشكل كبير. 
<div class="w3-round-large w3-padding">عنصر مستدير كبير</div>
w3-round-xlarge يجعل زوايا العن� مستديرة بشكل كبير جداً. 
<div class="w3-round-xlarge w3-padding">عنصر مستدير كبير جداً</div>
w3-round-xxlarge يجعل زوايا العنصر مستديرة بشكل دائري كامل. 
<div class="w3-round-xxlarge w3-padding">عنصر دائري</div>
w3-circle يحول العنصر إلى شكل دائري كامل. 
<div class="w3-circle w3-padding" style="width:100px;height:100px;">دائري</div>
w3-hover-round يجعل زوايا العنصر مستديرة عند التمرير. 
<div class="w3-hover-round w3-padding">مرر فوقي للاستدارة</div>
w3-hover-circle يحول العنصر إلى شكل دائري عند التمرير. 
<div class="w3-hover-circle w3-padding" style="width:100px;height:100px;">مرر فوقي للتحول إلى دائري</div>
w3-border يضيف حدوداً حول العنصر. 
<div class="w3-border w3-padding">عنصر بحدود</div>
w3-border-0 يزيل جميع الحدود من العنصر. 
<div class="w3-border-0 w3-padding">عنصر بدون حدود</div>
w3-topbar يضيف شريطاً علوياً فقط. 
<div class="w3-topbar w3-padding">شريط علوي</div>
w3-bottombar يضيف شريطاً سفلياً فقط. 
<div class="w3-bottombar w3-padding">شريط سفلي</div>
w3-leftbar يضيف شريطاً يسارياً فقط. 
<div class="w3-leftbar w3-padding">شريط يساري</div>
w3-rightbar يضيف شريطاً يمينياً فقط. 
<div class="w3-rightbar w3-padding">شريط يميني</div>
w3-hover-border يضيف حدوداً حول العنصر عند التمرير. 
<div class="w3-hover-border w3-padding">مرر فوقي لإظهار الحدود</div>

Filters

20 عنصر
الاسم الوصف مثال
w3-filter تطبيق تأثير التعتيق (opacity) 
<img src="image.jpg" class="w3-filter w3-opacity" style="width:100%">
w3-filter تأثير التعتيق بنسبة محددة 
<img src="image.jpg" class="w3-filter w3-opacity-min" style="width:100%">
w3-filter إزالة التعتيق عند التحويم 
<img src="image.jpg" class="w3-filter w3-opacity w3-hover-opacity-off" style="width:100%">
w3-filter تأثير التعتيم الداكن 
<img src="image.jpg" class="w3-filter w3-grayscale-min" style="width:100%">
w3-filter تحويل الصورة إلى تدرج رمادي كامل 
<img src="image.jpg" class="w3-filter w3-grayscale" style="width:100%">
w3-filter إزالة التدرج الرمادي عند التحويم 
<img src="image.jpg" class="w3-filter w3-grayscale w3-hover-grayscale-off" style="width:100%">
w3-filter تأثير السنفي (sepia) 
<img src="image.jpg" class="w3-filter w3-sepia" style="width:100%">
w3-filter إزالة تأثير السنفي عند التحويم 
<img src="image.jpg" class="w3-filter w3-sepia w3-hover-sepia-off" style="width:100%">
w3-filter تأثير التعتيق مع التدرج الرمادي 
<img src="image.jpg" class="w3-filter w3-grayscale w3-opacity-min" style="width:100%">
w3-filter تأثير التعتيق مع السنفي 
<img src="image.jpg" class="w3-filter w3-sepia w3-opacity" style="width:100%">
w3-filter تأثير السنفي مع التدرج الرمادي 
<img src="image.jpg" class="w3-filter w3-sepia w3-grayscale" style="width:100%">
w3-filter تأثير ثلاثي الأبعاد (shadow) 
<div class="w3-filter w3-shadow"><p>محتوى مع تأثير ظل</p></div>
w3-filter تأثير الظل الكبير 
<div class="w3-filter w3-shadow-large"><p>محتوى مع ظل كبير</p></div>
w3-filter تأثير الظل عند التحويم 
<div class="w3-filter w3-hover-shadow"><p>مرر فوقي لرؤية الظل</p></div>
w3-filter تأثير عدم الوضوح (blur) 
<img src="image.jpg" class="w3-filter" style="width:100%;filter:blur(2px)">
w3-filter تأثير السطوع (brightness) 
<img src="image.jpg" class="w3-filter" style="width:100%;filter:brightness(150%)">
w3-filter تأثير التباين (contrast) 
<img src="image.jpg" class="w3-filter" style="width:100%;filter:contrast(200%)">
w3-filter تأثير الإشباع (saturate) 
<img src="image.jpg" class="w3-filter" style="width:100%;filter:saturate(300%)">
w3-filter تأثير Hue-rotate 
<img src="image.jpg" class="w3-filter" style="width:100%;filter:hue-rotate(90deg)">
w3-filter تأثير Invert 
<img src="image.jpg" class="w3-filter" style="width:100%;filter:invert(100%)">

Flexbox

60 عنصر
الاسم الوصف مثال
w3-flex ينشئ حاوية مرنة (flex container) تتيح توزيع العناصر داخلها بمرونة. 
<div class="w3-flex">
  <div>عنصر مرن 1</div>
  <div>عنصر مرن 2</div>
</div>
w3-flex-wrap يسمح للعناصر المرنة بالتفاف إلى السطر التالي إذا لم يكن هناك مساحة كافية. 
<div class="w3-flex w3-flex-wrap">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>
w3-flex-nowrap يمنع تفاف العناصر المرنة إلى السطر التالي (الافتراضي). 
<div class="w3-flex w3-flex-nowrap">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>
w3-flex-wrap-reverse يسمح للعناصر المرنة بالتفاف إلى السطر التالي ولكن بترتيب عكسي. 
<div class="w3-flex w3-flex-wrap-reverse">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>
w3-flex-justify-start يحاذي العناصر المرنة إلى بداية المحور الرئيسي. 
<div class="w3-flex w3-flex-justify-start">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-justify-end يحاذي العناصر المرنة إلى نهاية المحور الرئيسي. 
<div class="w3-flex w3-flex-justify-end">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-justify-center يحاذي العناصر المرنة إلى مركز المحور الرئيسي. 
<div class="w3-flex w3-flex-justify-center">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-justify-between يوزع العناصر المرنة بالتساوي على المحور الرئيسي مع مسافة بينها. 
<div class="w3-flex w3-flex-justify-between">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>
w3-flex-justify-around يوزع العناصر المرنة بالتساوي على المحور الرئيسي مع مسافة حولها. 
<div class="w3-flex w3-flex-justify-around">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>
w3-flex-align-start يحاذي العناصر المرنة إلى بداية المحور المتقاطع. 
<div class="w3-flex w3-flex-align-start" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-align-end يحاذي العناصر المرنة إلى نهاية المحور المتقاطع. 
<div class="w3-flex w3-flex-align-end" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-align-center يحاذي العناصر المرنة إلى مركز المحور المتقاطع. 
<div class="w3-flex w3-flex-align-center" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-align-stretch يمدد العناصر المرنة لتملأ المحور المتقاطع (الافتراضي). 
<div class="w3-flex w3-flex-align-stretch" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-align-baseline يحاذي العناصر المرنة على خط الأساس الخاص بها. 
<div class="w3-flex w3-flex-align-baseline" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-content-start يحاذي محتوى العناصر المرنة إلى بداية المحور المتقاطع. 
<div class="w3-flex w3-flex-content-start" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-content-end يحاذي محتوى العناصر المرنة إلى نهاية المحور المتقاطع. 
<div class="w3-flex w3-flex-content-end" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-content-center يحاذي محتوى العناصر المرنة إلى مركز المحور المتقاطع. 
<div class="w3-flex w3-flex-content-center" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-content-between يوزع محتوى العناصر المرنة بالتساوي على المحور المتقاطع مع مسافة بينها. 
<div class="w3-flex w3-flex-content-between" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>
w3-flex-content-around يوزع محتوى العناصر المرنة بالتساوي على المحور المتقاطع مع مسافة حولها. 
<div class="w3-flex w3-flex-content-around" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>
w3-flex-content-stretch يمدد محتوى العناصر المرنة لتملأ المحور المتقاطع. 
<div class="w3-flex w3-flex-content-stretch" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-row ينظم العناصر المرنة في صف (من اليسار إلى اليمين). 
<div class="w3-flex w3-flex-row">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-row-reverse ينظم العناصر المرنة في صف ولكن بترتيب عكسي (من اليمين إلى اليسار). 
<div class="w3-flex w3-flex-row-reverse">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-column ينظم العناصر المرنة في عمود (من الأعلى إلى الأسفل). 
<div class="w3-flex w3-flex-column">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-column-reverse ينظم العناصر المرنة في عمود ولكن بترتيب عكسي (من الأسفل إلى الأعلى). 
<div class="w3-flex w3-flex-column-reverse">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-grow يسمح للعنصر المرن بالنمو لملء المساحة المتاحة. 
<div class="w3-flex">
  <div class="w3-flex-grow">عنصر قابل للنمو</div>
  <div>عنصر ثابت</div>
</div>
w3-flex-shrink يسمح للعنصر المرن بالانكماش إذا لزم الأمر. 
<div class="w3-flex">
  <div class="w3-flex-shrink">عنصر قابل للانكماش</div>
  <div>عنصر ثابت</div>
</div>
w3-flex-no-grow يمنع العنصر المرن من النمو. 
<div class="w3-flex">
  <div class="w3-flex-no-grow">عنصر غير قابل للنمو</div>
  <div class="w3-flex-grow">عنصر قابل للنمو</div>
</div>
w3-flex-no-shrink يمنع العنصر المرن من الانكماش. 
<div class="w3-flex">
  <div class="w3-flex-no-shrink">عنصر غير قابل للانكماش</div>
  <div>عنصر ثابت</div>
</div>
w3-flex-basis-auto يضبط الحجم الأساسي للعنصر المرن تلقائيًا. 
<div class="w3-flex">
  <div class="w3-flex-basis-auto">عنصر بحجم تلقائي</div>
  <div>عنصر ثابت</div>
</div>
w3-flex-basis-0 يضبط الحجم الأساسي للعنصر المرن إلى الصفر. 
<div class="w3-flex">
  <div class="w3-flex-basis-0">عنصر بحجم أساسي صفر</div>
  <div>عنصر ثابت</div>
</div>
w3-flex ينشئ حاوية مرنة (flex container) تتيح توزيع العناصر داخلها بمرونة. 
<div class="w3-flex">
  <div>عنصر مرن 1</div>
  <div>عنصر مرن 2</div>
</div>
w3-flex-wrap يسمح للعناصر المرنة بالتفاف إلى السطر التالي إذا لم يكن هناك مساحة كافية. 
<div class="w3-flex w3-flex-wrap">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>
w3-flex-nowrap يمنع تفاف العناصر المرنة إلى السطر التالي (الافتراضي). 
<div class="w3-flex w3-flex-nowrap">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>
w3-flex-wrap-reverse يسمح للعناصر المرنة بالتفاف إلى السطر التالي ولكن بترتيب عكسي. 
<div class="w3-flex w3-flex-wrap-reverse">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>
w3-flex-justify-start يحاذي العناصر المرنة إلى بداية المحور الرئيسي. 
<div class="w3-flex w3-flex-justify-start">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-justify-end يحاذي العناصر المرنة إلى نهاية المحور الرئيسي. 
<div class="w3-flex w3-flex-justify-end">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-justify-center يحاذي العناصر المرنة إلى مركز المحور الرئيسي. 
<div class="w3-flex w3-flex-justify-center">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-justify-between يوزع العناصر المرنة بالتساوي على المحور الرئيسي مع مسافة بينها. 
<div class="w3-flex w3-flex-justify-between">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>
w3-flex-justify-around يوزع العناصر المرنة بالتساوي على المحور الرئيسي مع مسافة حولها. 
<div class="w3-flex w3-flex-justify-around">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>
w3-flex-align-start يحاذي العناصر المرنة إلى بداية المحور المتقاطع. 
<div class="w3-flex w3-flex-align-start" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-align-end يحاذي العناصر المرنة إلى نهاية المحور المتقاطع. 
<div class="w3-flex w3-flex-align-end" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-align-center يحاذي العناصر المرنة إلى مركز المحور المتقاطع. 
<div class="w3-flex w3-flex-align-center" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-align-stretch يمدد العناصر المرنة لتملأ المحور المتقاطع (الافتراضي). 
<div class="w3-flex w3-flex-align-stretch" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-align-baseline يحاذي العناصر المرنة على خط الأساس الخاص بها. 
<div class="w3-flex w3-flex-align-baseline" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-content-start يحاذي محتوى العناصر المرنة إلى بداية المحور المتقاطع. 
<div class="w3-flex w3-flex-content-start" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-content-end يحاذي محتوى العناصر المرنة إلى نهاية المحور المتقاطع. 
<div class="w3-flex w3-flex-content-end" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-content-center يحاذي محتوى العناصر المرنة إلى مركز المحور المتقاطع. 
<div class="w3-flex w3-flex-content-center" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-content-between يوزع محتوى العناصر المرنة بالتساوي على المحور المتقاطع مع مسافة بينها. 
<div class="w3-flex w3-flex-content-between" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>
w3-flex-content-around يوزع محتوى العناصر المرنة بالتساوي على المحور المتقاطع مع مسافة حولها. 
<div class="w3-flex w3-flex-content-around" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>
w3-flex-content-stretch يمدد محتوى العناصر المرنة لتملأ المحور المتقاطع. 
<div class="w3-flex w3-flex-content-stretch" style="height: 100px;">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-row ينظم العناصر المرنة في صف (من اليسار إلى اليمين). 
<div class="w3-flex w3-flex-row">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-row-reverse ينظم العناصر المرنة في صف ولكن بترتيب عكسي (من اليمين إلى اليسار). 
<div class="w3-flex w3-flex-row-reverse">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-column ينظم العناصر المرنة في عمود (من الأعلى إلى الأسفل). 
<div class="w3-flex w3-flex-column">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-column-reverse ينظم العناصر المرنة في عمود ولكن بترتيب عكسي (من الأسفل إلى الأعلى). 
<div class="w3-flex w3-flex-column-reverse">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>
w3-flex-grow يسمح للعنصر المرن بالنمو لملء المساحة المتاحة. 
<div class="w3-flex">
  <div class="w3-flex-grow">عنصر قابل للنمو</div>
  <div>عنصر ثابت</div>
</div>
w3-flex-shrink يسمح للعنصر المرن بالانكماش إذا لزم الأمر. 
<div class="w3-flex">
  <div class="w3-flex-shrink">عنصر قابل للانكماش</div>
  <div>عنصر ثابت</div>
</div>
w3-flex-no-grow يمنع العنصر المرن من النمو. 
<div class="w3-flex">
  <div class="w3-flex-no-grow">عنصر غير قابل للنمو</div>
  <div class="w3-flex-grow">عنصر قابل للنمو</div>
</div>
w3-flex-no-shrink يمنع العنصر المرن من الانكماش. 
<div class="w3-flex">
  <div class="w3-flex-no-shrink">عنصر غير قابل للانكماش</div>
  <div>عنصر ثابت</div>
</div>
w3-flex-basis-auto يضبط الحجم الأساسي للعنصر المرن تلقائيًا. 
<div class="w3-flex">
  <div class="w3-flex-basis-auto">عنصر بحجم تلقائي</div>
  <div>عنصر ثابت</div>
</div>
w3-flex-basis-0 يضبط الحجم الأساسي للعنصر المرن إلى الصفر. 
<div class="w3-flex">
  <div class="w3-flex-basis-0">عنصر بحجم أساسي صفر</div>
  <div>عنصر ثابت</div>
</div>

Flexitems

17 عنصر
الاسم الوصف مثال
w3-flex-item فئة أساسية للعناصر المرنة داخل الحاوية المرنة. 
<div class="w3-flex">
  <div class="w3-flex-item">عنصر مرن 1</div>
  <div class="w3-flex-item">عنصر مرن 2</div>
</div>
w3-flex-grow يسمح للعنصر المرن بالنمو لملء المساحة المتاحة. 
<div class="w3-flex">
  <div class="w3-flex-grow">عنصر قابل للنمو</div>
  <div>عنصر ثابت</div>
</div>
w3-flex-shrink يسمح للعنصر المرن بالانكماش إذا لزم الأمر. 
<div class="w3-flex">
  <div class="w3-flex-shrink">عنصر قابل للانكماش</div>
  <div>عنصر ثابت</div>
</div>
w3-flex-no-grow يمنع العنصر المرن من النمو. 
<div class="w3-flex">
  <div class="w3-flex-no-grow">عنصر غير قابل للنمو</div>
  <div class="w3-flex-grow">عنصر قابل للنمو</div>
</div>
w3-flex-no-shrink يمنع العنصر المرن من الانكماش. 
<div class="w3-flex">
  <div class="w3-flex-no-shrink">عنصر غير قابل للانكماش</div>
  <div>عنصر ثابت</div>
</div>
w3-flex-basis-auto يضبط الحجم الأساسي للعنصر المرن تلقائيًا. 
<div class="w3-flex">
  <div class="w3-flex-basis-auto">عنصر بحجم تلقائي</div>
  <div>عنصر ثابت</div>
</div>
w3-flex-basis-0 يضبط الحجم الأساسي للعنصر المرن إلى الصفر. 
<div class="w3-flex">
  <div class="w3-flex-basis-0">عنصر بحجم أساسي صفر</div>
  <div>عنصر ثابت</div>
</div>
w3-flex-order-first يضع العنصر المرن في البداية بغض النظر عن ترتيبه في HTML. 
<div class="w3-flex">
  <div class="w3-flex-order-first">عنصر في البداية</div>
  <div>عنصر عادي</div>
  <div>عنصر عادي</div>
</div>
w3-flex-order-last يضع العنصر المرن في النهاية بغض النظر عن ترتيبه في HTML. 
<div class="w3-flex">
  <div>عنصر عادي</div>
  <div>عنصر عادي</div>
  <div class="w3-flex-order-last">عنصر في النهاية</div>
</div>
w3-flex-order-1 يحدد ترتيب العنصر المرن بقيمة محددة (1). 
<div class="w3-flex">
  <div class="w3-flex-order-1">عنصر بترتيب 1</div>
  <div>عنصر عادي</div>
</div>
w3-flex-order-2 يحدد ترتيب العنصر المرن بقيمة محددة (2). 
<div class="w3-flex">
  <div class="w3-flex-order-2">عنصر بترتيب 2</div>
  <div>عنصر عادي</div>
</div>
w3-flex-order-3 يحدد ترتيب العنصر المرن بقيمة محددة (3). 
<div class="w3-flex">
  <div class="w3-flex-order-3">عنصر بترتيب 3</div>
  <div>عنصر عادي</div>
</div>
w3-flex-align-self-start يحاذي العنصر المرن إلى بداية المحور المتقاطع. 
<div class="w3-flex" style="height: 100px;">
  <div class="w3-flex-align-self-start">عنصر في البداية</div>
  <div>عنصر عادي</div>
</div>
w3-flex-align-self-end يحاذي العنصر المرن إلى نهاية المحور المتقاطع. 
<div class="w3-flex" style="height: 100px;">
  <div class="w3-flex-align-self-end">عنصر في النهاية</div>
  <div>عنصر عادي</div>
</div>
w3-flex-align-self-center يحاذي العنصر المرن إلى مركز المحور المتقاطع. 
<div class="w3-flex" style="height: 100px;">
  <div class="w3-flex-align-self-center">عنصر في المركز</div>
  <div>عنصر عادي</div>
</div>
w3-flex-align-self-stretch يمدد العنصر المرن ليملأ المحور المتقاطع. 
<div class="w3-flex" style="height: 100px;">
  <div class="w3-flex-align-self-stretch">عنصر ممدود</div>
  <div>عنصر عادي</div>
</div>
w3-flex-align-self-baseline يحاذي العنصر المرن على خط الأساس الخاص به. 
<div class="w3-flex" style="height: 100px;">
  <div class="w3-flex-align-self-baseline">عنصر على خط الأساس</div>
  <div>عنصر عادي</div>
</div>

Fonts

39 عنصر
الاسم الوصف مثال
w3-serif يغير خط العنصر إلى خط من نوع Serif (مثل Times New Roman). 
<p class="w3-serif">نص بخط Serif</p>
w3-sans-serif يغير خط العنصر إلى خط من نوع Sans-Serif (مثل Arial) - الخط الافتراضي في W3.CSS. 
<p class="w3-sans-serif">نص بخط Sans-Serif</p>
w3-monospace يغير خط العنصر إلى خط من نوع Monospace (مثل Courier New). 
<p class="w3-monospace">نص بخط Monospace</p>
w3-cursive يغير خط العنصر إلى خط من نوع Cursive. 
<p class="w3-cursive">نص بخط Cursive</p>
w3-fantasy يغير خط العنصر إلى خط من نوع Fantasy. 
<p class="w3-fantasy">نص بخط Fantasy</p>
w3-tiny يجعل حجم النص صغير جداً (10px). 
<p class="w3-tiny">نص صغير جداً</p>
w3-small يجعل حجم النص صغير (12px). 
<p class="w3-small">نص صغير</p>
w3-medium يجعل حجم النص متوسط (15px) - الحجم الافتراضي. 
<p class="w3-medium">نص متوسط الحجم</p>
w3-large يجعل حجم النص كبير (18px). 
<p class="w3-large">نص كبير</p>
w3-xlarge يجعل حجم النص كبير جداً (22px). 
<p class="w3-xlarge">نص كبير جداً</p>
w3-xxlarge يجعل حجم النص ضخم (36px). 
<p class="w3-xxlarge">نص ضخم</p>
w3-xxxlarge يجعل حجم النص ضخم جداً (48px). 
<p class="w3-xxxlarge">نص ضخم جداً</p>
w3-jumbo يجعل حجم النص jumbo (64px). 
<p class="w3-jumbo">نص بحجم jumbo</p>
w3-normal يجعل وزن النص عادي (400). 
<p class="w3-normal">نص بوزن عادي</p>
w3-bold يجعل النص عريض (700). 
<p class="w3-bold">نص عريض</p>
w3-bolder يجعل النص أكثر عرضة من العريض. 
<p class="w3-bolder">نص أكثر عرضة</p>
w3-light يجعل النص خفيف الوزن (300). 
<p class="w3-light">نص خفيف الوزن</p>
w3-lighter يجعل النص أخف وزناً من الخفيف. 
<p class="w3-lighter">نص أخف وزناً</p>
w3-left-align يحاذي النص إلى اليسار. 
<p class="w3-left-align">نص بمحاذاة لليسار</p>
w3-right-align يحاذي النص إلى اليمين. 
<p class="w3-right-align">نص بمحاذاة لليمين</p>
w3-center يحاذي النص إلى المنتصف. 
<p class="w3-center">نص في المنتصف</p>
w3-justify يحاذي النص بشكل كامل (justify) على الجانبين. 
<p class="w3-justify">نص بمحاذاة كاملة على الجانبين</p>
w3-uppercase يحول النص إلى أحرف كبيرة (uppercase). 
<p class="w3-uppercase">نص بأحرف كبيرة</p>
w3-lowercase يحول النص إلى أحرف صغيرة (lowercase). 
<p class="w3-lowercase">نص بأحرف صغيرة</p>
w3-capitalize يحول أول حرف من كل كلمة إلى كبير (capitalize). 
<p class="w3-capitalize">نص بأول حرف كبير من كل كلمة</p>
w3-wide يزيد من تباعد أحرف النص (letter-spacing). 
<p class="w3-wide">نص بتباعد واسع بين الأحرف</p>
w3-underline يضيف خط تحت النص. 
<p class="w3-underline">نص بخط تحته</p>
w3-overline يضيف خط فوق النص. 
<p class="w3-overline">نص بخط فوقه</p>
w3-line-through يضيف خط في منتصف النص (لشطب النص). 
<p class="w3-line-through">نص مشطوب</p>
w3-no-underline يزيل أي خط تحت النص. 
<p class="w3-no-underline">نص بدون خط تحته</p>
w3-text-shadow يضيف ظل للنص. 
<p class="w3-text-shadow">نص بظل</p>
w3-no-text-shadow يزيل ظل النص. 
<p class="w3-no-text-shadow">نص بدون ظل</p>
w3-line-height-small يضبط تباعد الأسطر إلى قيمة صغيرة. 
<p class="w3-line-height-small">نص بتباعد أسطر صغير<br>سطر ثاني</p>
w3-line-height-medium يضبط تباعد الأسطر إلى قيمة متوسطة. 
<p class="w3-line-height-medium">نص بتباعد أسطر متوسط<br>سطر ثاني</p>
w3-line-height-large يضبط تباعد الأسطر إلى قيمة كبيرة. 
<p class="w3-line-height-large">نص بتباعد أسطر كبير<br>سطر ثاني</p>
w3-large w3-bold w3-uppercase جمع بين حجم كبير، وزن عريض، وأحرف كبيرة. 
<p class="w3-large w3-bold w3-uppercase">نص كبير وعريض وبأحرف كبيرة</p>
w3-xlarge w3-serif w3-text-shadow جمع بين حجم كبير جداً، خط Serif، وظل للنص. 
<p class="w3-xlarge w3-serif w3-text-shadow">نص كبير بخط Serif مع ظل</p>
w3-xxlarge w3-center w3-wide جمع بين حجم ضخم، محاذاة للوسط، وتباعد واسع بين الأحرف. 
<p class="w3-xxlarge w3-center w3-wide">نص ضخم في المنتصف بتباعد واسع</p>
w3-jumbo w3-bold w3-underline جمع بين حجم jumbo، وزن عريض، وخط تحت النص. 
<p class="w3-jumbo w3-bold w3-underline">نص jumbo عريض بخط تحته</p>

Icons

43 عنصر
الاسم الوصف مثال
w3-icon فئة أساسية للأيقونات في W3.CSS. 
<i class="w3-icon">⚫</i>
w3-spin يدور الأيقونة بشكل مستمر. 
<i class="w3-icon w3-spin">⚫</i> أيقونة دوارة
w3-xxsmall يجعل الأيقونة صغيرة جداً في الحجم. 
<i class="w3-icon w3-xxsmall">⚫</i> أيقونة صغيرة جداً
w3-xsmall يجعل الأيقونة صغيرة جداً في الحجم. 
<i class="w3-icon w3-xsmall">⚫</i> أيقونة صغيرة جداً
w3-small يجعل الأيقونة صغيرة في الحجم. 
<i class="w3-icon w3-small">⚫</i> أيقونة صغيرة
w3-medium يجعل الأيقونة متوسطة الحجم. 
<i class="w3-icon w3-medium">⚫</i> أيقونة متوسطة
w3-large يجعل الأيقونة كبيرة في الحجم. 
<i class="w3-icon w3-large">⚫</i> أيقونة كبيرة
w3-xlarge يجعل الأيقونة كبيرة جداً في الحجم. 
<i class="w3-icon w3-xlarge">⚫</i> أيقونة كبيرة جداً
w3-xxlarge يجعل الأيقونة ضخمة الحجم. 
<i class="w3-icon w3-xxlarge">⚫</i> أيقونة ضخمة
w3-jumbo يجعل الأيقونة بحجم jumbo. 
<i class="w3-icon w3-jumbo">⚫</i> أيقونة jumbo
w3-text-red يغير لون الأيقونة إلى أحمر. 
<i class="w3-icon w3-text-red">⚫</i> أيقونة حمراء
w3-text-blue يغير لون الأيقونة إلى أزرق. 
<i class="w3-icon w3-text-blue">⚫</i> أيقونة زرقاء
w3-text-green يغير لون الأيقونة إلى أخضر. 
<i class="w3-icon w3-text-green">⚫</i> أيقونة خضراء
w3-text-yellow يغير لون الأيقونة إلى أصفر. 
<i class="w3-icon w3-text-yellow">⚫</i> أيقونة صفراء
w3-text-black يغير لون الأيقونة إلى أسود. 
<i class="w3-icon w3-text-black">⚫</i> أيقونة سوداء
w3-text-white يغير لون الأيقونة إلى أبيض. 
<i class="w3-icon w3-text-white w3-black">⚫</i> أيقونة بيضاء
w3-text-pink يغير لون الأيقونة إلى وردي. 
<i class="w3-icon w3-text-pink">⚫</i> أيقونة وردية
w3-text-purple يغير لون الأيقونة إلى بنفسجي. 
<i class="w3-icon w3-text-purple">⚫</i> أيقونة بنفسجية
w3-text-orange يغير لون الأيقونة إلى برتقالي. 
<i class="w3-icon w3-text-orange">⚫</i> أيقونة برتقالية
w3-text-teal يغير لون الأيقونة إلى teal. 
<i class="w3-icon w3-text-teal">⚫</i> أيقونة teal
w3-text-khaki يغير لون الأيقونة إلى كاكي. 
<i class="w3-icon w3-text-khaki">⚫</i> أيقونة كاكي
w3-opacity يجعل الأيقونة شفافة. 
<i class="w3-icon w3-opacity">⚫</i> أيقونة شفافة
w3-opacity-min يجعل الأيقونة شفافة بشكل طفيف. 
<i class="w3-icon w3-opacity-min">⚫</i> أيقونة شفافة طفيف
w3-opacity-max يجعل الأيقونة شفافة بشكل كبير. 
<i class="w3-icon w3-opacity-max">⚫</i> أيقونة شفافة بشكل كبير
w3-hover-opacity يجعل الأيقونة شفافة عند التمرير. 
<i class="w3-icon w3-hover-opacity">⚫</i> أيقونة شفافة عند التمرير
w3-hover-text-red يغير لون الأيقونة إلى أحمر عند التمرير. 
<i class="w3-icon w3-hover-text-red">⚫</i> أيقونة حمراء عند التمرير
w3-hover-text-blue يغير لون الأيقونة إلى أزرق عند التمرير. 
<i class="w3-icon w3-hover-text-blue">⚫</i> أيقونة زرقاء عند التمرير
w3-hover-text-green يغير لون الأيقونة إلى أخضر عند التمرير. 
<i class="w3-icon w3-hover-text-green">⚫</i> أيقونة خضراء عند التمرير
w3-hover-text-yellow يغير لون الأيقونة إلى أصفر عند التمرير. 
<i class="w3-icon w3-hover-text-yellow">⚫</i> أيقونة صفراء عند التمرير
w3-hover-spin يدور الأيقونة عند التمرير. 
<i class="w3-icon w3-hover-spin">⚫</i> أيقونة دوارة عند التمرير
w3-circle يحول الأيقونة إلى شكل دائري. 
<i class="w3-icon w3-circle">⚫</i> أيقونة دائرية
w3-round يجعل زوايا الأيقونة مستديرة. 
<i class="w3-icon w3-round">⚫</i> أيقونة مستديرة
w3-round-large يجعل زوايا الأيقونة مستديرة بشكل كبير. 
<i class="w3-icon w3-round-large">⚫</i> أيقونة مستديرة كبيرة
w3-round-xlarge يجعل زوايا الأيقونة مستديرة بشكل كبير جداً. 
<i class="w3-icon w3-round-xlarge">⚫</i> أيقونة مستديرة جداً
w3-round-xxlarge يجعل زوايا الأيقونة مستديرة بشكل دائري كامل. 
<i class="w3-icon w3-round-xxlarge">⚫</i> أيقونة دائرية
w3-border يضيف حدوداً حول الأيقونة. 
<i class="w3-icon w3-border">⚫</i> أيقونة بحدود
w3-margin يضيف هوامش حول الأيقونة. 
<i class="w3-icon w3-margin">⚫</i> أيقونة بهامش
w3-padding يضيف حشواً داخلياً حول الأيقونة. 
<i class="w3-icon w3-padding">⚫</i> أيقونة بحشو
w3-left يحاذي الأيقونة إلى اليسار. 
<i class="w3-icon w3-left">⚫</i> أيقونة على اليسار
w3-right يحاذي الأيقونة إلى اليمين. 
<i class="w3-icon w3-right">⚫</i> أيقونة على اليمين
w3-center يحاذي الأيقونة إلى المنتصف. 
<i class="w3-icon w3-center">⚫</i> أيقونة في المنتصف
w3-display-middle يضع الأيقونة في المنتصف داخل حاوية display. 
<div class="w3-display-container" style="height:100px;">
  <i class="w3-icon w3-display-middle">⚫</i>
</div>
w3-button يحول الأيقونة إلى زر قابل للنقر. 
<button class="w3-button w3-blue"><i class="w3-icon">⚫</i> زر بأيقونة</button>

Images

29 عنصر
الاسم الوصف مثال
w3-image يطبق أنماط W3.CSS الأساسية على الصور. 
<img class="w3-image" src="image.jpg" alt="صورة">
w3-round يجعل زوايا الصورة مستديرة. 
<img class="w3-round" src="image.jpg" alt="صورة مستديرة">
w3-round-small يجعل زوايا الصورة مستديرة بشكل صغير. 
<img class="w3-round-small" src="image.jpg" alt="صورة مستديرة صغيرة">
w3-round-medium يجعل زوايا الصورة مستديرة بشكل متوسط. 
<img class="w3-round-medium" src="image.jpg" alt="صورة مستديرة متوسطة">
w3-round-large يجعل زوايا الصورة مستديرة بشكل كبير. 
<img class="w3-round-large" src="image.jpg" alt="صورة مستديرة كبيرة">
w3-round-xlarge يجعل زوايا الصورة مستديرة بشكل كبير جداً. 
<img class="w3-round-xlarge" src="image.jpg" alt="صورة مستديرة كبيرة جداً">
w3-round-xxlarge يجعل زوايا الصورة مستديرة بشكل دائري كامل. 
<img class="w3-round-xxlarge" src="image.jpg" alt="صورة دائرية">
w3-circle يحول الصورة إلى شكل دائري كامل. 
<img class="w3-circle" src="image.jpg" alt="صورة دائرية" style="width:100px;height:100px;">
w3-border يضيف حدوداً حول الصورة. 
<img class="w3-border" src="image.jpg" alt="صورة بحدود">
w3-card يطبق تأثير البطاقة على الصورة (يضيف ظلاً). 
<img class="w3-card" src="image.jpg" alt="صورة بتأثير البطاقة">
w3-card-4 يطبق تأثير البطاقة بظل أكبر على الصورة. 
<img class="w3-card-4" src="image.jpg" alt="صورة بتأثير البطاقة بظل">
w3-hover-shadow يضيف ظلاً للصورة عند التمرير فوقها. 
<img class="w3-hover-shadow" src="image.jpg" alt="صورة بظل عند التمرير">
w3-hover-opacity يجعل الصورة شفافة عند التمرير فوقها. 
<img class="w3-hover-opacity" src="image.jpg" alt="صورة شفافة عند التمرير">
w3-hover-grayscale يحول الصورة إلى تدرج الرمادي عند التمرير. 
<img class="w3-hover-grayscale" src="image.jpg" alt="صورة رمادية عند التمرير">
w3-hover-sepia يحول الصورة إلى لون سيبيا عند التمرير. 
<img class="w3-hover-sepia" src="image.jpg" alt="صورة سيبيا عند التمرير">
w3-opacity يجعل الصورة شفافة. 
<img class="w3-opacity" src="image.jpg" alt="صورة شفافة">
w3-opacity-min يجعل الصورة شفافة بشكل طفيف. 
<img class="w3-opacity-min" src="image.jpg" alt="صورة شفافة طفيف">
w3-opacity-max يجعل الصورة شفافة بشكل كبير. 
<img class="w3-opacity-max" src="image.jpg" alt="صورة شفافة بشكل كبير">
w3-grayscale يحول الصورة إلى تدرج الرمادي. 
<img class="w3-grayscale" src="image.jpg" alt="صورة رمادية">
w3-sepia يحول الصورة إلى لون سيبيا. 
<img class="w3-sepia" src="image.jpg" alt="صورة سيبيا">
w3-responsive يجعل الصورة متجاوبة مع حجم الشاشة. 
<img class="w3-responsive" src="image.jpg" alt="صورة متجاوبة">
w3-display-container ينشئ حاوية لعرض الصور مع عناصر داخلية. 
<div class="w3-display-container">
  <img src="image.jpg" alt="صورة" style="width:100%">
  <div class="w3-display-middle w3-text-white">نص على الصورة</div>
</div>
w3-display-topleft يضع عنصراً في الزاوية العلوية اليسرى للصورة. 
<div class="w3-display-container">
  <img src="image.jpg" alt="صورة" style="width:100%">
  <div class="w3-display-topleft w3-text-white">أعلى اليسار</div>
</div>
w3-display-topright يضع عنصراً في الزاوية العلوية اليمنى للصورة. 
<div class="w3-display-container">
  <img src="image.jpg" alt="صورة" style="width:100%">
  <div class="w3-display-topright w3-text-white">أعلى اليمين</div>
</div>
w3-display-bottomleft يضع عنصراً في الزاوية السفلية اليسرى للصورة. 
<div class="w3-display-container">
  <img src="image.jpg" alt="صورة" style="width:100%">
  <div class="w3-display-bottomleft w3-text-white">أسفل اليسار</div>
</div>
w3-display-bottomright يضع عنصراً في الزاوية السفلية اليمنى للصورة. 
<div class="w3-display-container">
  <img src="image.jpg" alt="صورة" style="width:100%">
  <div class="w3-display-bottomright w3-text-white">أسفل اليمين</div>
</div>
w3-display-middle يضع عنصراً في منتصف الصورة. 
<div class="w3-display-container">
  <img src="image.jpg" alt="صورة" style="width:100%">
  <div class="w3-display-middle w3-text-white">في المنتصف</div>
</div>
w3-display-left يضع عنصراً في منتصف الجانب الأيسر للصورة. 
<div class="w3-display-container">
  <img src="image.jpg" alt="صورة" style="width:100%">
  <div class="w3-display-left w3-text-white">الوسط يسار</div>
</div>
w3-display-right يضع عنصراً في منتصف الجانب الأيمن للصورة. 
<div class="w3-display-container">
  <img src="image.jpg" alt="صورة" style="width:100%">
  <div class="w3-display-right w3-text-white">الوسط يمين</div>
</div>

Inputs

36 عنصر
الاسم الوصف مثال
w3-input يطبق أنماط W3.CSS الأساسية على حقول الإدخال. 
<input class="w3-input" type="text" placeholder="حقل إدخال">
w3-select يطبق أنماط W3.CSS الأساسية على قوائم التحديد. 
<select class="w3-select">
  <option value="" disabled selected>اختر خياراً</option>
  <option value="1">الخيار 1</option>
  <option value="2">الخيار 2</option>
</select>
w3-check يطبق أنماط W3.CSS الأساسية على صناديق الاختيار. 
<input class="w3-check" type="checkbox"> صندوق اختيار
w3-radio يطبق أنماط W3.CSS الأساسية على أزرار الراديو. 
<input class="w3-radio" type="radio" name="option"> خيار الراديو
w3-border يضيف حدوداً حول حقل الإدخال. 
<input class="w3-input w3-border" type="text" placeholder="حقل بحدود">
w3-round يجعل زوايا حقل الإدخال مستديرة. 
<input class="w3-input w3-round" type="text" placeholder="حقل مستدير">
w3-round-large يجعل زوايا حقل الإدخال مستديرة بشكل كبير. 
<input class="w3-input w3-round-large" type="text" placeholder="حقل مستدير كبير">
w3-round-xlarge يجعل زوايا حقل الإدخال مستديرة بشكل كبير جداً. 
<input class="w3-input w3-round-xlarge" type="text" placeholder="حقل مستدير جداً">
w3-round-xxlarge يجعل زوايا حقل الإدخال مستديرة بشكل دائري كامل. 
<input class="w3-input w3-round-xxlarge" type="text" placeholder="حقل دائري">
w3-hover-shadow يضيف ظلاً لحقل الإدخال عند التمرير فوقه. 
<input class="w3-input w3-hover-shadow" type="text" placeholder="حقل بظل عند التمرير">
w3-hover-border-blue يغير لون الحدود إلى أزرق عند التمرير. 
<input class="w3-input w3-hover-border-blue" type="text" placeholder="حدود زرقاء عند التمرير">
w3-hover-border-green يغير لون الحدود إلى أخضر عند التمرير. 
<input class="w3-input w3-hover-border-green" type="text" placeholder="حدود خضراء عند التمرير">
w3-hover-border-red يغير لون الحدود إلى أحمر عند التمرير. 
<input class="w3-input w3-hover-border-red" type="text" placeholder="حدود حمراء عند التمرير">
w3-hover-border-yellow يغير لون الحدود إلى أصفر عند التمرير. 
<input class="w3-input w3-hover-border-yellow" type="text" placeholder="حدود صفراء عند التمرير">
w3-border-blue يضيف حدوداً زرقاء حول حقل الإدخال. 
<input class="w3-input w3-border-blue" type="text" placeholder="حقل بحدود زرقاء">
w3-border-green يضيف حدوداً خضراء حول حقل الإدخال. 
<input class="w3-input w3-border-green" type="text" placeholder="حقل بحدود خضراء">
w3-border-red يضيف حدوداً حمراء حول حقل الإدخال. 
<input class="w3-input w3-border-red" type="text" placeholder="حقل بحدود حمراء">
w3-border-yellow يضيف حدوداً صفراء حول حقل الإدخال. 
<input class="w3-input w3-border-yellow" type="text" placeholder="حقل بحدود صفراء">
w3-pale-blue يضيف خلفية زرقاء باهتة لحقل الإدخال. 
<input class="w3-input w3-pale-blue" type="text" placeholder="حقل بخلفية زرقاء باهتة">
w3-pale-green يضيف خلفية خضراء باهتة لحقل الإدخال. 
<input class="w3-input w3-pale-green" type="text" placeholder="حقل بخلفية خضراء باهتة">
w3-pale-red يضيف خلفية حمراء باهتة لحقل الإدخال. 
<input class="w3-input w3-pale-red" type="text" placeholder="حقل بخلفية حمراء باهتة">
w3-pale-yellow يضيف خلفية صفراء باهتة لحقل الإدخال. 
<input class="w3-input w3-pale-yellow" type="text" placeholder="حقل بخلفية صفراء باهتة">
w3-disabled يعطل حقل الإدخال ويجعله غير قابل للتعديل. 
<input class="w3-input w3-disabled" type="text" placeholder="حقل معطل" disabled>
w3-readonly يجعل حقل الإدخال للقراءة فقط. 
<input class="w3-input" type="text" value="قيمة للقراءة فقط" readonly>
w3-required يجعل حقل الإدخال مطلوباً. 
<input class="w3-input" type="text" placeholder="حقل مطلوب" required>
w3-large يجعل حقل الإدخال كبير الحجم. 
<input class="w3-input w3-large" type="text" placeholder="حقل كبير">
w3-xlarge يجعل حقل الإدخال كبير جداً في الحجم. 
<input class="w3-input w3-xlarge" type="text" placeholder="حقل كبير جداً">
w3-xxlarge يجعل حقل الإدخال ضخم الحجم. 
<input class="w3-input w3-xxlarge" type="text" placeholder="حقل ضخم">
w3-block يجعل حقل الإدخال يأخذ العرض الكامل. 
<input class="w3-input w3-block" type="text" placeholder="حقل كامل العرض">
w3-section يضيف مسافة أسفل حقل الإدخال. 
<input class="w3-input w3-section" type="text" placeholder="حقل بمساحة أسفله">
w3-margin يضيف هوامش حول حقل الإدخال. 
<input class="w3-input w3-margin" type="text" placeholder="حقل بهامش">
w3-margin-bottom يضيف هامشاً أسفل حقل الإدخال. 
<input class="w3-input w3-margin-bottom" type="text" placeholder="حقل بهامش سفلي">
w3-margin-top يضيف هامشاً فوق حقل الإدخال. 
<input class="w3-input w3-margin-top" type="text" placeholder="حقل بهامش علوي">
w3-btn يحول حقل الإدخال إلى زر. 
<input class="w3-btn w3-blue" type="button" value="زر إدخال">
w3-button يحول حقل الإدخال إلى زر (مرادف لـ w3-btn). 
<input class="w3-button w3-green" type="button" value="زر إدخال">
w3-file يطبق أنماط W3.CSS على حقول رفع الملفات. 
<input class="w3-file" type="file">

Lists

21 عنصر
الاسم الوصف مثال
w3-ul ينشئ قائمة غير مرتبة بأنماط W3.CSS الأساسية. 
<ul class="w3-ul">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ol ينشئ قائمة مرتبة بأنماط W3.CSS الأساسية. 
<ol class="w3-ol">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ol>
w3-ul w3-card ينشئ قائمة غير مرتبة بتأثير البطاقة (بظل). 
<ul class="w3-ul w3-card">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-card-4 ينشئ قائمة غير مرتبة بتأثير البطاقة بظل أكبر. 
<ul class="w3-ul w3-card-4">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-hoverable ينشئ قائمة غير مرتبة تتفاعل عند التمرير. 
<ul class="w3-ul w3-hoverable">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-centered ينشئ قائمة غير مرتبة بمحاذاة النص إلى المنتصف. 
<ul class="w3-ul w3-centered">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-border ينشئ قائمة غير مرتبة بحدود. 
<ul class="w3-ul w3-border">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-round ينشئ قائمة غير مرتبة بزوايا مستديرة. 
<ul class="w3-ul w3-round">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-round-large ينشئ قائمة غير مرتبة بزوايا مستديرة كبيرة. 
<ul class="w3-ul w3-round-large">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-red ينشئ قائمة غير مرتبة بلون خلفية أحمر. 
<ul class="w3-ul w3-red">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-blue ينشئ قائمة غير مرتبة بلون خلفية أزرق. 
<ul class="w3-ul w3-blue">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-green ينشئ قائمة غير مرتبة بلون خلفية أخضر. 
<ul class="w3-ul w3-green">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-yellow ينشئ قائمة غير مرتبة بلون خلفية أصفر. 
<ul class="w3-ul w3-yellow">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-pale-red ينشئ قائمة غير مرتبة بخلفية حمراء باهتة. 
<ul class="w3-ul w3-pale-red">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-pale-blue ينشئ قائمة غير مرتبة بخلفية زرقاء باهتة. 
<ul class="w3-ul w3-pale-blue">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-pale-green ينشئ قائمة غير مرتبة بخلفية خضراء باهتة. 
<ul class="w3-ul w3-pale-green">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-pale-yellow ينشئ قائمة غير مرتبة بخلفية صفراء باهتة. 
<ul class="w3-ul w3-pale-yellow">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-border-top ينشئ قائمة غير مرتبة بحدود علوية فقط. 
<ul class="w3-ul w3-border-top">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-border-bottom ينشئ قائمة غير مرتبة بحدود سفلية فقط. 
<ul class="w3-ul w3-border-bottom">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-border-left ينشئ قائمة غير مرتبة بحدود يسارية فقط. 
<ul class="w3-ul w3-border-left">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>
w3-ul w3-border-right ينشئ قائمة غير مرتبة بحدود يمينية فقط. 
<ul class="w3-ul w3-border-right">
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>

Margins

40 عنصر
الاسم الوصف مثال
w3-margin يضيف هامشاً خارجياً عاماً بمقدار 16px من جميع الجهات. 
<div class="w3-margin w3-border">عنصر بهامش خارجي عام</div>
w3-margin-small يضيف هامشاً خارجياً صغيراً بمقدار 8px من جميع الجهات. 
<div class="w3-margin-small w3-border">عنصر بهامش خارجي صغير</div>
w3-margin-large يضيف هامشاً خارجياً كبيراً بمقدار 24px من جميع الجهات. 
<div class="w3-margin-large w3-border">عنصر بهامش خارجي كبير</div>
w3-margin-16 يضيف هامشاً خارجياً بمقدار 16px من جميع الجهات. 
<div class="w3-margin-16 w3-border">عنصر بهامش 16px</div>
w3-margin-24 يضيف هامشاً خارجياً بمقدار 24px من جميع الجهات. 
<div class="w3-margin-24 w3-border">عنصر بهامش 24px</div>
w3-margin-32 يضيف هامشاً خارجياً بمقدار 32px من جميع الجهات. 
<div class="w3-margin-32 w3-border">عنصر بهامش 32px</div>
w3-margin-48 يضيف هامشاً خارجياً بمقدار 48px من جميع الجهات. 
<div class="w3-margin-48 w3-border">عنصر بهامش 48px</div>
w3-margin-64 يضيف هامشاً خارجياً بمقدار 64px من جميع الجهات. 
<div class="w3-margin-64 w3-border">عنصر بهامش 64px</div>
w3-margin-top يضيف هامشاً خارجياً من الأعلى فقط بمقدار 16px. 
<div class="w3-margin-top w3-border">هامش علوي فقط</div>
w3-margin-right يضيف هامشاً خارجياً من اليمين فقط بمقدار 16px. 
<div class="w3-margin-right w3-border">هامش يميني فقط</div>
w3-margin-bottom يضيف هامشاً خارجياً من الأسفل فقط بمقدار 16px. 
<div class="w3-margin-bottom w3-border">هامش سفلي فقط</div>
w3-margin-left يضيف هامشاً خارجياً من اليسار فقط بمقدار 16px. 
<div class="w3-margin-left w3-border">هامش يساري فقط</div>
w3-margin-top-large يضيف هامشاً خارجياً مزدوجاً من الأعلى بمقدار 32px. 
<div class="w3-margin-top-large w3-border">هامش علوي مزدوج</div>
w3-margin-right-large يضيف هامشاً خارجياً مزدوجاً من اليمين بمقدار 32px. 
<div class="w3-margin-right-large w3-border">هامش يميني مزدوج</div>
w3-margin-bottom-large يضيف هامشاً خارجياً مزدوجاً من الأسفل بمقدار 32px. 
<div class="w3-margin-bottom-large w3-border">هامش سفلي مزدوج</div>
w3-margin-left-large يضيف هامشاً خارجياً مزدوجاً من اليسار بمقدار 32px. 
<div class="w3-margin-left-large w3-border">هامش يساري مزدوج</div>
w3-margin-0 يزيل جميع الهوامش الخارجية من العنصر. 
<div class="w3-margin-0 w3-border">عنصر بدون هوامش خارجية</div>
w3-margin-top-0 يزيل الهامش الخارجي من الأعلى فقط. 
<div class="w3-margin-top-0 w3-border">بدون هامش علوي</div>
w3-margin-right-0 يزيل الهامش الخارجي من اليمين فقط. 
<div class="w3-margin-right-0 w3-border">بدون هامش يميني</div>
w3-margin-bottom-0 يزيل الهامش الخارجي من الأسفل فقط. 
<div class="w3-margin-bottom-0 w3-border">بدون هامش سفلي</div>
w3-margin-left-0 يزيل الهامش الخارجي من اليسار فقط. 
<div class="w3-margin-left-0 w3-border">بدون هامش يساري</div>
w3-margin-hor يضيف هامشاً خارجياً أفقياً (يمين ويسار) بمقدار 16px. 
<div class="w3-margin-hor w3-border">هامش أفقي</div>
w3-margin-ver يضيف هامشاً خارجياً عمودياً (أعلى وأسفل) بمقدار 16px. 
<div class="w3-margin-ver w3-border">هامش عمودي</div>
w3-margin-hor-large يضيف هامشاً خارجياً أفقياً مزدوجاً (يمين ويسار) بمقدار 32px. 
<div class="w3-margin-hor-large w3-border">هامش أفقي مزدوج</div>
w3-margin-ver-large يضيف هامشاً خارجياً عمودياً مزدوجاً (أعلى وأسفل) بمقدار 32px. 
<div class="w3-margin-ver-large w3-border">هامش عمودي مزدوج</div>
w3-auto يوسّط العنصر أفقياً تلقائياً عن طريق هوامش جانبية auto. 
<div class="w3-auto w3-border" style="width:200px;">عنصر متمركز</div>
w3-center يوسّط النص والعناصر داخل العنصر. 
<div class="w3-center w3-border">نص وعناصر متمركزة</div>
w3-margin-hor w3-margin-ver-large جمع بين هامش أفقي عادي وهامش عمودي مزدوج. 
<div class="w3-margin-hor w3-margin-ver-large w3-border">هامش أفقي عادي وعمودي مزدوج</div>
w3-margin-top w3-margin-bottom-0 جمع بين هامش علوي وإزالة الهامش السفلي. 
<div class="w3-margin-top w3-margin-bottom-0 w3-border">هامش علوي فقط بدون سفلي</div>
w3-margin-left-large w3-margin-right-0 جمع بين هامش يساري مزدوج وإزالة الهامش اليميني. 
<div class="w3-margin-left-large w3-margin-right-0 w3-border">هامش يساري مزدوج فقط</div>
w3-margin w3-blue جمع بين الهامش العام ولون خلفية أزرق. 
<div class="w3-margin w3-blue">هامش مع خلفية زرقاء</div>
w3-margin-large w3-round جمع بين الهامش الكبير والزوايا مستديرة. 
<div class="w3-margin-large w3-round w3-border">هامش كبير بزوايا مستديرة</div>
w3-margin w3-card جمع بين الهامش وتأثير البطاقة. 
<div class="w3-margin w3-card">هامش مع تأثير البطاقة</div>
w3-margin-hor w3-border-bottom جمع بين الهامش الأفقي وحدود سفلية فقط. 
<div class="w3-margin-hor w3-border-bottom">هامش أفقي مع حدود سفلية</div>
w3-margin button تطبيق الهامش على الأزرار. 
<button class="w3-margin w3-blue">زر بهامش</button>
w3-margin img تطبيق الهامش على الصور. 
<img class="w3-margin w3-border" src="image.jpg" alt="صورة بهامش" style="width:100px;">
w3-margin table تطبيق الهامش على الجداول. 
<table class="w3-margin w3-border"><tr><td>جدول بهامش</td></tr></table>
w3-margin div تطبيق الهامش على عناصر div. 
<div class="w3-margin w3-border">عنصر div بهامش</div>
w3-margin-bottom لإضافة مسافة بين العناصر المتتالية. 
<div class="w3-margin-bottom w3-border">عنصر بهامش سفلي</div>
<div class="w3-border">العنصر التالي</div>
w3-margin-right لإضافة مسافة بين العناصر الأفقية. 
<span class="w3-margin-right w3-border">عنصر</span>
<span class="w3-border">عنصر بجواره</span>

Notes

17 عنصر
الاسم الوصف مثال
w3-note تنشئ ملاحظة بأنماط W3.CSS الافتراضية. 
<div class="w3-note">هذه ملاحظة عادية</div>
w3-panel w3-note تنشئ ملاحظة داخل لوحة (مزودة بحواف داخلية وهوامش). 
<div class="w3-panel w3-note">ملاحظة داخل لوحة</div>
w3-note w3-pale-blue ملاحظة بخلفية زرقاء باهتة. 
<div class="w3-note w3-pale-blue">ملاحظة زرقاء</div>
w3-note w3-pale-green ملاحظة بخلفية خضراء باهتة. 
<div class="w3-note w3-pale-green">ملاحظة خضراء</div>
w3-note w3-pale-yellow ملاحظة بخلفية صفراء باهتة. 
<div class="w3-note w3-pale-yellow">ملاحظة صفراء</div>
w3-note w3-pale-red ملاحظة بخلفية حمراء باهتة. 
<div class="w3-note w3-pale-red">ملاحظة حمراء</div>
w3-note w3-leftbar ملاحظة بشريط أيسر. 
<div class="w3-note w3-leftbar w3-border-blue">ملاحظة بشريط أزرق</div>
w3-note w3-rightbar ملاحظة بشريط أيمن. 
<div class="w3-note w3-rightbar w3-border-green">ملاحظة بشريط أخضر</div>
w3-note w3-topbar ملاحظة بشريط علوي. 
<div class="w3-note w3-topbar w3-border-red">ملاحظة بشريط أحمر</div>
w3-note w3-bottombar ملاحظة بشريط سفلي. 
<div class="w3-note w3-bottombar w3-border-orange">ملاحظة بشريط برتقالي</div>
w3-note w3-round ملاحظة بزوايا مستديرة. 
<div class="w3-note w3-round">ملاحظة مستديرة</div>
w3-note w3-round-large ملاحظة بزوايا مستديرة كبيرة. 
<div class="w3-note w3-round-large">ملاحظة مستديرة كبيرة</div>
w3-note w3-round-xlarge ملاحظة بزوايا مستديرة كبيرة جداً. 
<div class="w3-note w3-round-xlarge">ملاحظة مستديرة جداً</div>
w3-note w3-round-xxlarge ملاحظة بزوايا مستديرة بشكل دائري. 
<div class="w3-note w3-round-xxlarge">ملاحظة دائرية</div>
w3-note w3-card ملاحظة بتأثير بطاقة (بظل). 
<div class="w3-note w3-card">ملاحظة بطاقة</div>
w3-note w3-card-4 ملاحظة بتأثير بطاقة بظل أكبر. 
<div class="w3-note w3-card-4">ملاحظة بطاقة بظل</div>
w3-note w3-hover-shadow ملاحظة تظهر لها ظل عند التمرير. 
<div class="w3-note w3-hover-shadow">ملاحظة بظل عند التمرير</div>

Padding

36 عنصر
الاسم الوصف مثال
w3-padding يضيف حشواً داخلياً عاماً بمقدار 8px من جميع الجهات. 
<div class="w3-padding w3-border">عنصر بحشو داخلي عام</div>
w3-padding-small يضيف حشواً داخلياً صغيراً بمقدار 4px من جميع الجهات. 
<div class="w3-padding-small w3-border">عنصر بحشو داخلي صغير</div>
w3-padding-large يضيف حشواً داخلياً كبيراً بمقدار 16px من جميع الجهات. 
<div class="w3-padding-large w3-border">عنصر بحشو داخلي كبير</div>
w3-padding-16 يضيف حشواً داخلياً بمقدار 16px من جميع الجهات. 
<div class="w3-padding-16 w3-border">عنصر بحشو 16px</div>
w3-padding-24 يضيف حشواً داخلياً بمقدار 24px من جميع الجهات. 
<div class="w3-padding-24 w3-border">عنصر بحشو 24px</div>
w3-padding-32 يضيف حشواً داخلياً بمقدار 32px من جميع الجهات. 
<div class="w3-padding-32 w3-border">عنصر بحشو 32px</div>
w3-padding-48 يضيف حشواً داخلياً بمقدار 48px من جميع الجهات. 
<div class="w3-padding-48 w3-border">عنصر بحشو 48px</div>
w3-padding-64 يضيف حشواً داخلياً بمقدار 64px من جميع الجهات. 
<div class="w3-padding-64 w3-border">عنصر بحشو 64px</div>
w3-padding-top يضيف حشواً داخلياً من الأعلى فقط بمقدار 8px. 
<div class="w3-padding-top w3-border">حشو علوي فقط</div>
w3-padding-right يضيف حشواً داخلياً من اليمين فقط بمقدار 8px. 
<div class="w3-padding-right w3-border">حشو يميني فقط</div>
w3-padding-bottom يضيف حشواً داخلياً من الأسفل فقط بمقدار 8px. 
<div class="w3-padding-bottom w3-border">حشو سفلي فقط</div>
w3-padding-left يضيف حشواً داخلياً من اليسار فقط بمقدار 8px. 
<div class="w3-padding-left w3-border">حشو يساري فقط</div>
w3-padding-top-large يضيف حشواً داخلياً مزدوجاً من الأعلى بمقدار 16px. 
<div class="w3-padding-top-large w3-border">حشو علوي مزدوج</div>
w3-padding-right-large يضيف حشواً داخلياً مزدوجاً من اليمين بمقدار 16px. 
<div class="w3-padding-right-large w3-border">حشو يميني مزدوج</div>
w3-padding-bottom-large يضيف حشواً داخلياً مزدوجاً من الأسفل بمقدار 16px. 
<div class="w3-padding-bottom-large w3-border">حشو سفلي مزدوج</div>
w3-padding-left-large يضيف حشواً داخلياً مزدوجاً من اليسار بمقدار 16px. 
<div class="w3-padding-left-large w3-border">حشو يساري مزدوج</div>
w3-padding-0 يزيل جميع الحشو الداخلي من العنصر. 
<div class="w3-padding-0 w3-border">عنصر بدون حشو داخلي</div>
w3-padding-top-0 يزيل الحشو الداخلي من الأعلى فقط. 
<div class="w3-padding-top-0 w3-border">بدون حشو علوي</div>
w3-padding-right-0 يزيل الحشو الداخلي من اليمين فقط. 
<div class="w3-padding-right-0 w3-border">بدون حشو يميني</div>
w3-padding-bottom-0 يزيل الحشو الداخلي من الأسفل فقط. 
<div class="w3-padding-bottom-0 w3-border">بدون حشو سفلي</div>
w3-padding-left-0 يزيل الحشو الداخلي من اليسار فقط. 
<div class="w3-padding-left-0 w3-border">بدون حشو يساري</div>
w3-padding-hor يضيف حشواً داخلياً أفقياً (يمين ويسار) بمقدار 8px. 
<div class="w3-padding-hor w3-border">حشو أفقي</div>
w3-padding-ver يضيف حشواً داخلياً عمودياً (أعلى وأسفل) بمقدار 8px. 
<div class="w3-padding-ver w3-border">حشو عمودي</div>
w3-padding-hor-large يضيف حشواً داخلياً أفقياً مزدوجاً (يمين ويسار) بمقدار 16px. 
<div class="w3-padding-hor-large w3-border">حشو أفقي مزدوج</div>
w3-padding-ver-large يضيف حشواً داخلياً عمودياً مزدوجاً (أعلى وأسفل) بمقدار 16px. 
<div class="w3-padding-ver-large w3-border">حشو عمودي مزدوج</div>
w3-padding-hor w3-padding-ver-large جمع بين حشو أفقي عادي وحشو عمودي مزدوج. 
<div class="w3-padding-hor w3-padding-ver-large w3-border">حشو أفقي عادي وعمودي مزدوج</div>
w3-padding-top w3-padding-bottom-0 جمع بين حشو علوي وإزالة الحشو السفلي. 
<div class="w3-padding-top w3-padding-bottom-0 w3-border">حشو علوي فقط بدون سفلي</div>
w3-padding-left-large w3-padding-right-0 جمع بين حشو يساري مزدوج وإزالة الحشو اليميني. 
<div class="w3-padding-left-large w3-padding-right-0 w3-border">حشو يساري مزدوج فقط</div>
w3-padding w3-blue جمع بين الحشو العام ولون خلفية أزرق. 
<div class="w3-padding w3-blue">حشو مع خلفية زرقاء</div>
w3-padding-large w3-round جمع بين الحشو الكبير والزوايا المستديرة. 
<div class="w3-padding-large w3-round w3-border">حشو كبير بزوايا مستديرة</div>
w3-padding w3-card جمع بين الحشو وتأثير البطاقة. 
<div class="w3-padding w3-card">حشو مع تأثير البطاقة</div>
w3-padding-hor w3-border-bottom جمع بين الحشو الأفقي وحدود سفلية فقط. 
<div class="w3-padding-hor w3-border-bottom">حشو أفقي مع حدود سفلية</div>
w3-padding button تطبيق الحشو على الأزرار. 
<button class="w3-padding w3-blue">زر بحشو</button>
w3-padding input تطبيق الحشو على حقول الإدخال. 
<input class="w3-padding w3-border" type="text" placeholder="حقل إدخال بحشو">
w3-padding table تطبيق الحشو على خلايا الجداول. 
<td class="w3-padding">خلية جدول بحشو</td>
w3-padding img تطبيق الحشو على الصور. 
<div class="w3-padding w3-border"><img src="image.jpg" alt="صورة بحشو"></div>

Navigationtabs

25 عنصر
الاسم الوصف مثال
w3-bar ينشئ حاوية لألسنة التنقل (تبويبات). 
<div class="w3-bar w3-border-bottom">
  <button class="w3-bar-item w3-button" onclick="openTab('Tab1')">تبويب 1</button>
  <button class="w3-bar-item w3-button" onclick="openTab('Tab2')">تبويب 2</button>
  <button class="w3-bar-item w3-button" onclick="openTab('Tab3')">تبويب 3</button>
</div>
w3-bar-item w3-button زر تبويب داخل حاوية الألسنة. 
<button class="w3-bar-item w3-button" onclick="openTab('Tab1')">تبويب</button>
w3-bar w3-border-bottom حاوية ألسنة تنقل بحدود سفلية. 
<div class="w3-bar w3-border-bottom">
  <button class="w3-bar-item w3-button">تبويب 1</button>
  <button class="w3-bar-item w3-button">تبويب 2</button>
</div>
w3-bar w3-card حاوية ألسنة تنقل بتصميم البطاقة. 
<div class="w3-bar w3-card">
  <button class="w3-bar-item w3-button">تبويب 1</button>
  <button class="w3-bar-item w3-button">تبويب 极</button>
</div>
w3-bar w3-blue حاوية ألسنة تنقل باللون الأزرق. 
<div class="w3-bar w3-blue">
  <button class="w3-bar-item w3-button">تبويب 1</button>
  <button class="w3-bar-item w3-button">تبويب 2</button>
</div>
w3-bar w3-red حاوية ألسنة تنقل باللون الأحمر. 
<div class="w3-bar w3-red">
  <button class="w3-bar-item w3-button">تبويب 1</button>
  <button class="w3-bar-item w3-button">تبويب 2</button>
</div>
w3-bar w3-green حاوية ألسنة تنقل باللون الأخضر. 
<div class="w3-bar w3-green">
  <button class="w3-bar-item w3-button">تبويب 1</button>
  <button class="w3-bar-item w3-button">تبويب 2</button>
</div>
w3-bar w3-yellow حاوية ألسنة تنقل باللون الأصفر. 
<div class="w3-bar w3-yellow">
  <button class="w3-bar-item w3-button">تبويب 1</button>
  <button class="w3-bar-item w3-button">تبويب 2</button>
</div>
w3-bar w3-black حاوية ألسنة تنقل باللون الأسود. 
<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button">تبويب 1</button>
  <button class="w3-bar-item w3-button">تبويب 2</button>
</div>
w3-bar w3-white حاوية ألسنة تنقل باللون الأبيض. 
<div class="w3-bar w3-white w3-border">
  <button class="w3-bar-item w3-button">تبويب 1</button>
  <button class="w3-bar-item w3-button">تبويب 2</button>
</div>
w3-bar-item w3-button tablink زر تبويب مع كلاس tablink للربط بالمحتوى. 
<button class="w3-bar-item w3-button tablink" onclick="openTab('Tab1')">تبويب</button>
w3-bar-item w3-button w3-border-right زر تبويب بحدود يمينية. 
<button class="w3-bar-item w3-button w3-border-right">تبويب</button>
w3-bar-item w3-button w3-border-bottom زر تبويب بحدود سفلية. 
<button class="w3-bar-item w3-button w3-border-bottom">تبويب</button>
w3-bar-item w3-button w3-round زر تبويب بزوايا مستديرة. 
<button class="w3-bar-item w3-button w3-round">تبويب</button>
w3-bar-item w3-button w3-hover-blue زر تبويب يتحول إلى أزرق عند التمرير. 
<button class="w3-bar-item w3-button w3-hover-blue">تبويب</button>
w3-bar-item w3-button w3-hover-red زر تبويب يتحول إلى أحمر عند التمرير. 
<button class="w3-bar-item w3-button w3-hover-red">تبويب</button>
w3-bar-item w3-button w3-hover-green زر تبويب يتحول إلى أخضر عند التمرير. 
<button class="w3-bar-item w3-button w3-hover-green">تبويب</button>
w3-bar-item w3-button w3-hover-yellow زر تبويب يتحول إلى أصفر عند التمرير. 
<button class="w3-bar-item w3-button w3-hover-yellow">تبويب</button>
w3-bar-item w3-button w3-hover-black زر تبويب يتحول إلى أسود عند التمرير. 
<button class="w3-bar-item w3-button w3-hover-black">تبويب</button>
w3-bar-item w3-button w3-hover-white زر تبويب يتحول إلى أبيض عند التمرير. 
<button class="w3-bar-item w3-button w3-hover-white">تبويب</button>
w3-bar w3-mobile حاوية ألسنة تنقل متجاوبة للجوال. 
<div class="w3-bar w3-mobile">
  <button class="w3-bar-item w3-button">تبويب 1</button>
  <button class="w3-bar-item w3-button">تبويب 2</button>
</div>
w3-bar w3-hide-small إخفاء حاوية الألسنة على الشاشات الصغيرة. 
<div class="w3-bar w3-hide-small">
  <button class="w3-bar-item w3-button">تبويب 1</button>
  <button class="w3-bar-item w3-button">تبويب 2</button>
</div>
w3-bar w3-center محاذاة حاوية الألسنة إلى الوسط. 
<div class="w3-bar w3-center">
  <button class="w3-bar-item w3-button">تبويب 1</button>
  <button class="w3-bar-item w3-button">تبويب 2</button>
</div>
w3-bar w3-right محاذاة حاوية الألسنة إلى اليمين. 
<div class="w3-bar w3-right">
  <button class="w3-bar-item w3-button">تبويب 1</button>
  <button class="w3-bar-item w3-button">تبويب 2</button>
</div>
w3-bar w3-left محاذاة حاوية الألسنة إلى اليسار. 
<div class="w3-bar w3-left">
  <button class="w3-bar-item w3-button">تبويب 1</button>
  <button class="w3-bar-item w3-button">تبويب 2</button>
</div>

Navigation bars

27 عنصر
الاسم الوصف مثال
w3-bar ينشئ شريط تنقل أفقي. 
<div class="w3-bar w3-border">
  <a href="#" class="w3-bar-item w3-button">الرئيسية</a>
  <a href="#" class="w3-bar-item w3-button">منتجات</a>
  <a href="#" class="w3-bar-item w3-button">اتصل بنا</a>
</div>
w3-bar-block ينشئ شريط تنقل عمودي. 
<div class="w3-bar-block w3-border">
  <a href="#" class="w3-bar-item w3-button">الرئيسية</a>
  <a href="#" class="w3-bar-item w3-button">منتجات</a>
  <a href="#" class="w3-bar-item w3-button">اتصل بنا</a>
</div>
w3-bar-item عنصر داخل شريط التنقل. 
<div class="w3-bar">
  <a href="#" class="w3-bar-item w3-button">عنصر تنقل</a>
</div>
w3-navbar شريط تنقل مع تنسيقات مسبقة. 
<div class="w3-navbar w3-blue">
  <a href="#" class="w3-bar-item w3-button">الرئيسية</a>
  <a href="#" class="w3-bar-item w3-button">منتجات</a>
  <a href="#" class="w3-bar-item w3-button">اتصل بنا</a>
</div>
w3-navbar-item عنصر داخل شريط التنقل المنسق. 
<div class="w3-navbar">
  <a href="#" class="w3-navbar-item w3-button">عنصر في navbar</a>
</div>
w3-bar w3-border شريط تنقل بحدود. 
<div class="w3-bar w3-border">
  <a href="#" class="w3-bar-item w3-button">عنصر</a>
</div>
w3-bar w3-round شريط تنقل بزوايا مستديرة. 
<div class="w3-bar w3-round w3-blue">
  <a href="#" class="w3-bar-item w3-button">عنصر</a>
</div>
w3-bar w3-card شريط تنقل بتصميم بطاقة. 
<div class="w3-bar w3-card">
  <a href="#" class="w3-bar-item w3-button">عنصر</a>
</div>
w3-bar w3-blue شريط تنقل أزرق اللون. 
<div class="w3-bar w3-blue">
  <a href="#" class="w3-bar-item w3-button">عنصر</a>
</div>
w3-bar w3-red شريط تنقل أحمر اللون. 
<div class="w3-bar w3-red">
  <a href="#" class="w3-bar-item w3-button">عنصر</a>
</div>
w3-bar w3-green شريط تنقل أخضر اللون. 
<div class="w3-bar w3-green">
  <a href="#" class="w3-bar-item w3-button">عنصر</a>
</div>
w3-bar w3-yellow شريط تنقل أصفر اللون. 
<div class="w3-bar w3-yellow">
  <a href="#" class="w3-bar-item w3-button">عنصر</a>
</div>
w3-bar w3-black شريط تنقل أسود اللون. 
<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button">عنصر</a>
</div>
w3-bar w3-white شريط تنقل أبيض اللون. 
<div class="w3-bar w3-white w3-border">
  <a href="#" class="w3-bar-item w3-button">عنصر</a>
</div>
w3-bar w3-top يثبت الشريط في أعلى الصفحة. 
<div class="w3-bar w3-top w3-blue">
  <a href="#" class="w3-bar-item w3-button">شريط علوي ثابت</a>
</div>
w3-bar w3-bottom يثبت الشريط في أسفل الصفحة. 
<div class="w3-bar w3-bottom w3-blue">
  <a href="#" class="w3-bar-item w3-button">شريط سفلي ثابت</a>
</div>
w3-bar-item w3-button زر داخل شريط التنقل. 
<div class="w3-bar">
  <a href="#" class="w3-bar-item w3-button">زر تنقل</a>
</div>
w3-bar-item w3-right عنصر بمحاذاة اليمين في الشريط. 
<div class="w3-bar">
  <a href="#" class="w3-bar-item w3-button w3-right">عنصر يميني</a>
</div>
w3-bar-item w3-left عنصر بمحاذاة اليسار في الشريط. 
<div class="w3-bar">
  <a href="#" class="w3-bar-item w3-button w3-left">عنصر يساري</a>
</div>
w3-bar-item w3-center عنصر بمحاذاة الوسط في الشريط. 
<div class="w3-bar">
  <a href="#" class="w3-bar-item w3-button w3-center">عنصر وسطي</a>
</div>
w3-bar-item w3-mobile عنصر متجاوب في الشريط. 
<div class="w3-bar">
  <a href="#" class="w3-bar-item w3-button w3-mobile">عنصر متجاوب</a>
</div>
w3-bar-item w3-hide-small إخفاء العنصر على الشاشات الصغيرة. 
<div class="w3-bar">
  <a href="#" class="w3-bar-item w3-button w3-hide-small">مخفي على الجوال</a>
</div>
w3-bar-item w3-dropdown-hover قائمة منسدلة داخل شريط التنقل. 
<div class="w3-bar">
  <div class="w3-bar-item w3-dropdown-hover">
    <button class="w3-button">القائمة</button>
    <div class="w3-dropdown-content w3-bar-block w3-border">
      <a href="#" class="w3-bar-item w3-button">خيار 1</a>
      <a href="#" class="w3-bar-item w3-button">خيار 2</a>
    </div>
  </div>
</div>
w3-bar-item w3-input حقل إدخال داخل شريط التنقل. 
<div class="w3-bar">
  <input class="w3-bar-item w3-input" type="text" placeholder="ابحث...">
</div>
w3-bar-item w3-padding عنصر بحشو داخلي في الشريط. 
<div class="w3-bar">
  <a href="#" class="w3-bar-item w3-button w3-padding">عنصر بحشو</a>
</div>
w3-bar-item w3-margin عنصر بهامش خارجي في الشريط. 
<div class="w3-bar">
  <a href="#" class="w3-bar-item w3-button w3-margin">عنصر بهامش</a>
</div>
w3-sidebar شريط جانبي للتنقل. 
<div class="w3-sidebar w3-bar-block w3-border" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>

Modals

10 عنصر
الاسم الوصف مثال
w3-modal ينشئ نافذة弹出 أساسية 
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button">فتح النافذة</button><div id="id01" class="w3-modal"><div class="w3-modal-content"><div class="w3-container"><span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span><p>محتوى النافذة هنا</p></div></div></div>
w3-modal نافذة كبيرة الحجم 
<div id="id02" class="w3-modal"><div class="w3-modal-content w3-card-4" style="max-width:800px"><header class="w3-container w3-teal"> <span onclick="document.getElementById('id02').style.display='none'" class="w3-button w3-display-topright">&times;</span><h2>عنوان النافذة</h2></header><div class="w3-container"><p>محتوى النافذة هنا</p></div></div></div>
w3-modal نافذة مع تأثيرات متحركة 
<div id="id03" class="w3-modal w3-animate-zoom"><div class="w3-modal-content"><div class="w3-container"><span onclick="document.getElementById('id03').style.display='none'" class="w3-button w3-display-topright">&times;</span><p>نافذة مع تأثير التكبير</p></div></div></div>
w3-modal نافذة مع زر إغلاق في الأسفل 
<div id="id04" class="w3-modal"><div class="w3-modal-content"><div class="w3-container"><p>محتوى النافذة هنا</p><button onclick="document.getElementById('id04').style.display='none'" class="w3-button w3-block w3-red">إغلاق</button></div></div></div>
w3-modal نافذة مع صورة 
<div id="id05" class="w3-modal"><div class="w3-modal-content"><div class="w3-container"><span onclick="document.getElementById('id05').style.display='none'" class="w3-button w3-display-topright">&times;</span><img src="image.jpg" style="width:100%"></div></div></div>
w3-modal نافذة مع نموذج إدخال 
<div id="id06" class="w3-modal"><div class="w3-modal-content" style="max-width:500px"><div class="w3-container"><span onclick="document.getElementById('id06').style.display='none'" class="w3-button w3-display-topright">&times;</span><h2>نموذج التسجيل</h2><input class="w3-input w3-border" placeholder="الإسم"><input class="w3-input w3-border" type="email" placeholder="البريد الإلكتروني"><button class="w3-button w3-green w3-margin-top">إرسال</button></div></div></div>
w3-modal نافذة تحذير حمراء 
<div id="id07" class="w3-modal"><div class="w3-modal-content w3-red w3-card-4"><div class="w3-container w3-white"><span onclick="document.getElementById('id07').style.display='none'" class="w3-button w3-display-topright">&times;</span><h2 class="w3-text-red">تحذير!</h2><p>هل أنت متأكد من هذا الإجراء؟</p><button class="w3-button w3-red">نعم</button><button class="w3-button w3-gray" onclick="document.getElementById('id07').style.display='none'">إلغاء</button></div></div></div>
w3-modal نافذة بحجم الشاشة بالكامل 
<div id="id08" class="w3-modal" style="padding-top:0"><div class="w3-modal-content w3-animate-top"><span onclick="document.getElementById('id08').style.display='none'" class="w3-button w3-display-topright w3-xlarge w3-bold">&times;</span><div class="w3-container w3-padding-64"><h2>نافذة كاملة</h2><p>هذه نافذة بحجم كامل تقريباً</p></div></div></div>
w3-modal نافذة مع تذييل وترويسة 
<div id="id09" class="w3-modal"><div class="w3-modal-content"><header class="w3-container w3-blue"> <h2>ترويسة النافذة</h2></header><div class="w3-container"><p>محتوى رئيسي هنا</p></div><footer class="w3-container w3-blue w3-padding"><button class="w3-button w3-right" onclick="document.getElementById('id09').style.display='none'">موافق</button></footer></div></div>
w3-modal نافذة مع قائمة منسدلة 
<div id="id10" class="w3-modal"><div class="w3-modal-content" style="max-width:400px"><div class="w3-container"><span onclick="document.getElementById('id10').style.display='none'" class="w3-button w3-display-topright">&times;</span><h2>اختر خياراً</h2><select class="w3-select w3-border"><option>الخيار الأول</option><option>الخيار الثاني</option></select><button class="w3-button w3-green w3-margin-top">تأكيد</button></div></div></div>

Responsive grid

94 عنصر
الاسم الوصف مثال
w3-row ينشئ صفًا جديدًا في النظام الشبكي. يجب وضع الأعمدة (w3-col) بداخله. 
<div class="w3-row">
  <div class="w3-col s6">عمود بعرض 6 وحدات</div>
  <div class="w3-col s6">عمود بعرض 6 وحدات</div>
</div>
w3-col فئة أساسية للأعمدة. يجب استخدامها مع فئة تحدد الحجم (s, m, l). 
<div class="w3-col m6">عمود بعرض 6 وحدات على الشاشات المتوسطة فما فوق</div>
w3-half ينشئ عمودًا بعرض النصف (50%). مرادف لـ w3-col s6. 
<div class="w3-half">نصف العرض</div>
w3-third ينشئ عمودًا بعرض الثلث (33.33%). مرادف لـ w3-col s4. 
<div class="w3-third">ثلث العرض</div>
w3-twothird ينشئ عمودًا بعرض الثلثين (66.66%). مرادف لـ w3-col s8. 
<div class="w3-twothird">ثلثي العرض</div>
w3-quarter ينشئ عمودًا بعرض الربع (25%). مرادف لـ w3-col s3. 
<div class="w3-quarter">ربع العرض</div>
w3-threequarter ينشئ عمودًا بعرض ثلاثة أرباع (75%). مرادف لـ w3-col s9. 
<div class="w3-threequarter">ثلاثة أرباع العرض</div>
w3-rest يأخذ العمود العرض المتبقي من المساحة بعد الأعمدة الأخرى المحددة في الصف. 
<div class="w3-col m2">عمود بعرض 2</div>
<div class="w3-rest">هذا العمود يأخذ باقي العرض (10 وحدات)</div>
w3-col s1 عمود بعرض 1/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s1">عرض 1</div>
w3-col s2 عمود بعرض 2/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s2">عرض 2</div>
w3-col s3 عمود بعرض 3/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s3">عرض 3</div>
w3-col s4 عمود بعرض 4/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s4">عرض 4</div>
w3-col s5 عمود بعرض 5/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s5">عرض 5</div>
w3-col s6 عمود بعرض 6/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s6">عرض 6</div>
w3-col s7 عمود بعرض 7/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s7">عرض 7</div>
w3-col s8 عمود بعرض 8/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s8">عرض 8</div>
w3-col s9 عمود بعرض 9/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s9">عرض 9</div>
w3-col s10 عمود بعرض 10/12 на الشاشات الصغيرة (هواتف). 
<div class="w3-col s10">عرض 10</div>
w3-col s11 عمود بعرض 11/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s11">عرض 11</div>
w3-col s12 عمود بعرض 12/12 (كامل العرض) على الشاشات الصغيرة (هواتف). 
<div class="w3-col s12">عرض كامل</div>
w3-col m1 عمود بعرض 1/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m1">عرض 1</div>
w3-col m2 عمود بعرض 2/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m2">عرض 2</div>
w3-col m3 عمود بعرض 3/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m3">عرض 3</div>
w3-col m4 عمود بعرض 4/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m4">عرض 4</div>
w3-col m5 عمود بعرض 5/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m5">عرض 5</div>
w3-col m6 عمود بعرض 6/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m6">عرض 6</div>
w3-col m7 عمود بعرض 7/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m7">عرض 7</div>
w3-col m8 عمود بعرض 8/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m8">عرض 8</div>
w3-col m9 عمود بعرض 9/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m9">عرض 9</div>
w3-col m10 عمود بعرض 10/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m10">عرض 10</div>
w3-col m11 عمود بعرض 11/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m11">عرض 11</div>
w3-col m12 عمود بعرض 12/12 (كامل العرض) على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m12">عرض كامل</div>
w3-col l1 عمود بعرض 1/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l1">عرض 1</div>
w3-col l2 عمود بعرض 2/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l2">عرض 2</div>
w3-col l3 عمود بعرض 3/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l3">عرض 3</div>
w3-col l4 عمود بعرض 4/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l4">عرض 4</div>
w3-col l5 عمود بعرض 5/12 على الشاشات الكبيرة (كمбиوتر) فما فوق. 
<div class="w3-col l5">عرض 5</div>
w3-col l6 عمود بعرض 6/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l6">عرض 6</div>
w3-col l7 عمود بعرض 7/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l7">عرض 7</div>
w3-col l8 عمود بعرض 8/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l8">عرض 8</div>
w3-col l9 عمود بعرض 9/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l9">عرض 9</div>
w3-col l10 عمود بعرض 10/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l10">عرض 10</div>
w3-col l11 عمود بعرض 11/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l11">عرض 11</div>
w3-col l12 عمود بعرض 12/12 (كامل العرض) على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l12">عرض كامل</div>
w3-cell يستخدم داخل w3-cell-row لجعل العنصر يتصرف كخلية في جدول. 
<div class="w3-cell">خلية</div>
w3-cell-row ينشئ صفًا يستخدم تخطيط الخلية (CSS table-cell) لجعل جميع العناصر بداخله بنفس الارتفاع. 
<div class="w3-cell-row">
  <div class="w3-cell">خلية 1</div>
  <div class="w3-cell">خلية 2</div>
</div>
w3-mobile يضيف هوامش صغيرة على الجوانب عند عرضه على الأجهزة المحمولة. 
<div class="w3-mobile">عنصر متجاوب للجوّال</div>
w3-row ينشئ صفًا جديدًا في النظام الشبكي. يجب وضع الأعمدة (w3-col) بداخله. 
<div class="w3-row">
  <div class="w3-col s6">عمود بعرض 6 وحدات</div>
  <div class="w3-col s6">عمود بعرض 6 وحدات</div>
</div>
w3-col فئة أساسية للأعمدة. يجب استخدامها مع فئة تحدد الحجم (s, m, l). 
<div class="w3-col m6">عمود بعرض 6 وحدات على الشاشات المتوسطة فما فوق</div>
w3-half ينشئ عمودًا بعرض النصف (50%). مرادف لـ w3-col s6. 
<div class="w3-half">نصف العرض</div>
w3-third ينشئ عمودًا بعرض الثلث (33.33%). مرادف لـ w3-col s4. 
<div class="w3-third">ثلث العرض</div>
w3-twothird ينشئ عمودًا بعرض الثلثين (66.66%). مرادف لـ w3-col s8. 
<div class="w3-twothird">ثلثي العرض</div>
w3-quarter ينشئ عمودًا بعرض الربع (25%). مرادف لـ w3-col s3. 
<div class="w3-quarter">ربع العرض</div>
w3-threequarter ينشئ عمودًا بعرض ثلاثة أرباع (75%). مرادف لـ w3-col s9. 
<div class="w3-threequarter">ثلاثة أرباع العرض</div>
w3-rest يأخذ العمود العرض المتبقي من المساحة بعد الأعمدة الأخرى المحددة في الصف. 
<div class="w3-col m2">عمود بعرض 2</div>
<div class="w3-rest">هذا العمود يأخذ باقي العرض (10 وحدات)</div>
w3-col s1 عمود بعرض 1/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s1">عرض 1</div>
w3-col s2 عمود بعرض 2/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s2">عرض 2</div>
w3-col s3 عمود بعرض 3/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s3">عرض 3</div>
w3-col s4 عمود بعرض 4/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s4">عرض 4</div>
w3-col s5 عمود بعرض 5/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s5">عرض 5</div>
w3-col s6 عمود بعرض 6/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s6">عرض 6</div>
w3-col s7 عمود بعرض 7/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s7">عرض 7</div>
w3-col s8 عمود بعرض 8/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s8">عرض 8</div>
w3-col s9 عمود بعرض 9/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s9">عرض 9</div>
w3-col s10 عمود بعرض 10/12 на الشاشات الصغيرة (هواتف). 
<div class="w3-col s10">عرض 10</div>
w3-col s11 عمود بعرض 11/12 على الشاشات الصغيرة (هواتف). 
<div class="w3-col s11">عرض 11</div>
w3-col s12 عمود بعرض 12/12 (كامل العرض) على الشاشات الصغيرة (هواتف). 
<div class="w3-col s12">عرض كامل</div>
w3-col m1 عمود بعرض 1/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m1">عرض 1</div>
w3-col m2 عمود بعرض 2/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m2">عرض 2</div>
w3-col m3 عمود بعرض 3/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m3">عرض 3</div>
w3-col m4 عمود بعرض 4/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m4">عرض 4</div>
w3-col m5 عمود بعرض 5/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m5">عرض 5</div>
w3-col m6 عمود بعرض 6/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m6">عرض 6</div>
w3-col m7 عمود بعرض 7/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m7">عرض 7</div>
w3-col m8 عمود بعرض 8/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m8">عرض 8</div>
w3-col m9 عمود بعرض 9/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m9">عرض 9</div>
w3-col m10 عمود بعرض 10/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m10">عرض 10</div>
w3-col m11 عمود بعرض 11/12 على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m11">عرض 11</div>
w3-col m12 عمود بعرض 12/12 (كامل العرض) على الشاشات المتوسطة (ألواح) فما فوق. 
<div class="w3-col m12">عرض كامل</div>
w3-col l1 عمود بعرض 1/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l1">عرض 1</div>
w3-col l2 عمود بعرض 2/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l2">عرض 2</div>
w3-col l3 عمود بعرض 3/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l3">عرض 3</div>
w3-col l4 عمود بعرض 4/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l4">عرض 4</div>
w3-col l5 عمود بعرض 5/12 على الشاشات الكبيرة (كمбиوتر) فما فوق. 
<div class="w3-col l5">عرض 5</div>
w3-col l6 عمود بعرض 6/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l6">عرض 6</div>
w3-col l7 عمود بعرض 7/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l7">عرض 7</div>
w3-col l8 عمود بعرض 8/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l8">عرض 8</div>
w3-col l9 عمود بعرض 9/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l9">عرض 9</div>
w3-col l10 عمود بعرض 10/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l10">عرض 10</div>
w3-col l11 عمود بعرض 11/12 على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l11">عرض 11</div>
w3-col l12 عمود بعرض 12/12 (كامل العرض) على الشاشات الكبيرة (كمبيوتر) فما فوق. 
<div class="w3-col l12">عرض كامل</div>
w3-cell يستخدم داخل w3-cell-row لجعل العنصر يتصرف كخلية في جدول. 
<div class="w3-cell">خلية</div>
w3-cell-row ينشئ صفًا يستخدم تخطيط الخلية (CSS table-cell) لجعل جميع العناصر بداخله بنفس الارتفاع. 
<div class="w3-cell-row">
  <div class="w3-cell">خلية 1</div>
  <div class="w3-cell">خلية 2</div>
</div>
w3-mobile يضيف هوامش صغيرة على الجوانب عند عرضه على الأجهزة المحمولة. 
<div class="w3-mobile">عنصر متجاوب للجوّال</div>

Round

25 عنصر
الاسم الوصف مثال
w3-round يجعل زوايا العنصر مستديرة بشكل أساسي (4px). 
<div class="w3-round w3-padding w3-border">عنصر بزوايا مستديرة</div>
w3-round-small يجعل زوايا العنصر مستديرة بشكل صغير (2px). 
<div class="w3-round-small w3-padding w3-border">عنصر بزوايا مستديرة صغيرة</div>
w3-round-medium يجعل زوايا العنصر مستديرة بشكل متوسط (8px). 
<div class="w3-round-medium w3-padding w3-border">عنصر بزوايا مستديرة متوسطة</div>
w3-round-large يجعل زوايا العنصر مستديرة بشكل كبير (16px). 
<div class="w3-round-large w3-padding w3-border">عنصر بزوايا مستديرة كبيرة</div>
w3-round-xlarge يجعل زوايا العنصر مستديرة بشكل كبير جداً (24px). 
<div class="w3-round-xlarge w3-padding w3-border">عنصر بزوايا مستديرة كبيرة جداً</div>
w3-round-xxlarge يجعل زوايا العنصر مستديرة بشكل دائري كامل (50%). 
<div class="w3-round-xxlarge w3-padding w3-border">عنصر بزوايا مستديرة بشكل دائري</div>
w3-round-top يجعل الزوايا العلوية فقط مستديرة. 
<div class="w3-round-top w3-padding w3-border">زوايا علوية مستديرة</div>
w3-round-bottom يجعل الزوايا السفلية فقط مستديرة. 
<div class="w3-round-bottom w3-padding w3-border">زوايا سفلية مستديرة</div>
w3-round-left يجعل الزوايا اليسرى فقط مستديرة. 
<div class="w3-round-left w3-padding w3-border">زوايا يسارية مستديرة</div>
w3-round-right يجعل الزوايا اليمنى فقط مستديرة. 
<div class="w3-round-right w3-padding w3-border">زوايا يمينية مستديرة</div>
w3-round-top-left يجعل الزاوية العلوية اليسرى فقط مستديرة. 
<div class="w3-round-top-left w3-padding w3-border">زاوية علوية يسارية مستديرة</div>
w3-round-top-right يجعل الزاوية العلوية اليمنى فقط مستديرة. 
<div class="w3-round-top-right w3-padding w3-border">زاوية علوية يمينية مستديرة</div>
w3-round-bottom-left يجعل الزاوية السفلية اليسرى فقط مستديرة. 
<div class="w3-round-bottom-left w3-padding w3-border">زاوية سفلية يسارية مستديرة</div>
w3-round-bottom-right يجعل الزاوية السفلية اليمنى فقط مستديرة. 
<div class="w3-round-bottom-right w3-padding w3-border">زاوية سفلية يمينية مستديرة</div>
w3-circle يحول العنصر إلى شكل دائري كامل (يتطلب عرض وارتفاع متساويين). 
<div class="w3-circle w3-padding w3-border" style="width:100px;height:100px;">دائري</div>
w3-round-circle يحول العنصر إلى شكل دائري كامل (مرادف لـ w3-circle). 
<div class="w3-round-circle w3-padding w3-border" style="width:100px;height:100px;">دائري</div>
w3-round-large w3-border w3-border-blue جمع بين استدارة كبيرة وحدود زرقاء. 
<div class="w3-round-large w3-border w3-border-blue w3-padding">استدارة كبيرة بحدود زرقاء</div>
w3-round-top w3-round-bottom-large جمع بين استدارة علوية واستدارة سفلية كبيرة. 
<div class="w3-round-top w3-round-bottom-large w3-border w3-padding">استدارة علوية وسفلية كبيرة</div>
w3-circle w3-red جمع بين شكل دائري ولون خلفية أحمر. 
<div class="w3-circle w3-red w3-padding" style="width:80px;height:80px;">دائري أحمر</div>
w3-round-xxlarge w3-pale-blue w3-border-blue جمع بين استدارة دائرية كاملة، خلفية زرقاء باهتة، وحدود زرقاء. 
<div class="w3-round-xxlarge w3-pale-blue w3-border-blue w3-padding">استدارة دائرية كاملة بتصميم أزرق</div>
w3-round w3-hover-round-large استدارة أساسية تصبح كبيرة عند التمرير. 
<div class="w3-round w3-hover-round-large w3-border w3-padding">مرر فوقي للتكبير</div>
w3-circle w3-hover-opacity شكل دائري يصبح شفافاً عند التمرير. 
<div class="w3-circle w3-hover-opacity w3-border w3-padding" style="width:80px;height:80px;">مرر فوقي للشفافية</div>
w3-round button تطبيق استدارة على الأزرار. 
<button class="w3-round w3-blue w3-padding">زر مستدير</button>
w3-round input تطبيق استدارة على حقول الإدخال. 
<input class="w3-round w3-border w3-padding" type="text" placeholder="حقل إدخال مستدير">
w3-round img تطبيق استدارة على الصور. 
<img class="w3-round" src="image.jpg" alt="صورة مستديرة" style="width:100px;height:100px;">

Rows

16 عنصر
الاسم الوصف مثال
w3-row ينشئ صفًا جديدًا في النظام الشبكي. يجب وضع الأعمدة (w3-col) بداخله. 
<div class="w3-row">
  <div class="w3-col s6">عمود بعرض 6 وحدات</div>
  <div class="w3-col s6">عمود بعرض 6 وحدات</div>
</div>
w3-row-padding ينشئ صفًا مع حشو داخلي بين الأعمدة. 
<div class="w3-row-padding">
  <div class="w3-col s6">عمود بحشو داخلي</div>
  <div class="w3-col s6">عمود بحشو داخلي</div>
</div>
w3-row-padding w3-padding-16 ينشئ صفًا مع حشو داخلي بمقدار 16px بين الأعمدة. 
<div class="w3-row-padding w3-padding-16">
  <div class="w3-col s6">عمود بحشو 16px</div>
  <div class="w3-col s6">عمود بحشو 16px</div>
</div>
w3-row-padding w3-padding-24 ينشئ صفًا مع حشو داخلي بمقدار 24px بين الأعمدة. 
<div class="w3-row-padding w3-padding-24">
  <div class="w3-col s6">عمود بحشو 24px</div>
  <div class="w3-col s6">عمود بحشو 24px</div>
</div>
w3-row-padding w3-padding-32 ينشئ صفًا مع حشو داخلي بمقدار 32px بين الأعمدة. 
<div class="w3-row-padding w3-padding-32">
  <div class="w3-col s6">عمود بحشو 32px</div>
  <div class="w3-col s6">عمود بحشو 32px</div>
</div>
w3-row-padding w3-margin ينشئ صفًا مع حشو داخلي وهوامش خارجية. 
<div class="w3-row-padding w3-margin">
  <div class="w3-col s6">عمود بحشو وهوامش</div>
  <div class="w3-col s6">عمود بحشو وهوامش</div>
</div>
w3-row-padding w3-border ينشئ صفًا مع حشو داخلي وحدود. 
<div class="w3-row-padding w3-border">
  <div class="w3-col s6">عمود بحشو وحدود</div>
  <div class="w3-col s6">عمود بحشو وحدود</div>
</div>
w3-row-padding w3-round ينشئ صفًا مع حشو داخلي وزوايا مستديرة. 
<div class="w3-row-padding w3-round">
  <div class="w3-col s6">عمود بحشو وزوايا مستديرة</div>
  <div class="w3-col s6">عمود بحشو وزوايا مستديرة</div>
</div>
w3-row-padding w3-card ينشئ صفًا مع حشو داخلي وتأثير البطاقة. 
<div class="w3-row-padding w3-card">
  <div class="w3-col s6">عمود بحشو وتأثير بطاقة</div>
  <div class="w3-col s6">عمود بحشو وتأثير بطاقة</div>
</div>
w3-row-padding w3-hover-shadow ينشئ صفًا مع حشو داخلي وظل عند التمرير. 
<div class="w3-row-padding w3-hover-shadow">
  <div class="w3-col s6">عمود بحشو وظل عند التمرير</div>
  <div class="w3-col s6">عمود بحشو وظل عند التمرير</div>
</div>
w3-row-padding w3-blue ينشئ صفًا مع حشو داخلي ولون خلفية أزرق. 
<div class="w3-row-padding w3-blue">
  <div class="w3-col s6">عمود أزرق بحشو</div>
  <div class="w3-col s6">عمود أزرق بحشو</div>
</div>
w3-row-padding w3-green ينشئ صفًا مع حشو داخلي ولون خلفية أخضر. 
<div class="w3-row-padding w3-green">
  <div class="w3-col s6">عمود أخضر بحشو</div>
  <div class="w3-col s6">عمود أخضر بحشو</div>
</div>
w3-row-padding w3-red ينشئ صفًا مع حشو داخلي ولون خلفية أحمر. 
<div class="w3-row-padding w3-red">
  <div class="w3-col s6">عمود أحمر بحشو</div>
  <div class="w3-col s6">عمود أحمر بحشو</div>
</div>
w3-row-padding w3-yellow ينشئ صفًا مع حشو داخلي ولون خلفية أصفر. 
<div class="w3-row-padding w3-yellow">
  <div class="w3-col s6">عمود أصفر بحشو</div>
  <div class="w3-col s6">عمود أصفر بحشو</div>
</div>
w3-row-padding w3-center ينشئ صفًا مع حشو داخلي ومحاذاة النص إلى المنتصف. 
<div class="w3-row-padding w3-center">
  <div class="w3-col s6">عمود في المنتصف</div>
  <div class="w3-col s6">عمود في المنتصف</div>
</div>
w3-row-padding w3-rtl ينشئ صفًا مع حشو داخلي واتجاه من اليمين إلى اليسار. 
<div class="w3-row-padding w3-rtl">
  <div class="w3-col s6">عمود RTL</div>
  <div class="w3-col s6">عمود RTL</div>
</div>

Rtl

28 عنصر
الاسم الوصف مثال
w3-rtl يغير اتجاه العنصر من اليمين إلى اليسار (Right-to-Left). 
<div class="w3-rtl w3-padding">نص من اليمين إلى اليسار</div>
w3-ltr يغير اتجاه العنصر من اليسار إلى اليمين (Left-to-Right). 
<div class="w3-ltr w3-padding">نص من اليسار إلى اليمين</div>
w3-right-align يحاذي النص إلى اليمين (مفيد للنصوص LTR داخل سياق RTL). 
<div class="w3-rtl"><p class="w3-right-align">نص بمحاذاة لليمين</p></div>
w3-left-align يحاذي النص إلى اليسار (مفيد للنصوص RTL داخل سياق LTR). 
<div class="w3-ltr"><p class="w3-left-align">نص بمحاذاة لليسار</p></div>
w3-center يحاذي النص إلى المنتصف (يعمل بنفس الطريقة في كلا الاتجاهين). 
<div class="w3-rtl"><p class="w3-center">نص في المنتصف</p></div>
w3-margin-right-0 يزيل الهامش الأيمن (مهم في التصميم RTL). 
<div class="w3-rtl w3-margin-right-0 w3-border">عنصر بدون هامش أيمن</div>
w3-margin-left-0 يزيل الهامش الأيسر (مهم في التصميم RTL). 
<div class="w3-rtl w3-margin-left-0 w3-border">عنصر بدون هامش أيسر</div>
w3-padding-right-0 يزيل الحشو الداخلي الأيمن (مهم في التصميم RTL). 
<div class="w3-rtl w3-padding-right-0 w3-border">عنصر بدون حشو أيمن</div>
w3-padding-left-0 يزيل الحشو الداخلي الأيسر (مهم في التصميم RTL). 
<div class="w3-rtl w3-padding-left-0 w3-border">عنصر بدون حشو أيسر</div>
w3-bar w3-rtl ينشئ شريط تنقل باتجاه RTL. 
<div class="w3-bar w3-rtl w3-blue">
  <a class="w3-bar-item w3-button">عنصر 1</a>
  <a class="w3-bar-item w3-button">عنصر 2</a>
</div>
w3-dropdown-hover w3-rtl ينشئ قائمة منسدلة باتجاه RTL. 
<div class="w3-dropdown-hover w3-rtl">
  <button class="w3-button">قائمة RTL</button>
  <div class="w3-dropdown-content w3-bar-block">
    <a href="#" class="w3-bar-item w3-button">خيار 1</a>
    <a href="#" class="w3-bar-item w3-button">خيار 2</a>
  </div>
</div>
w3-row w3-rtl ينشئ صفاً باتجاه RTL (تبدأ الأعمدة من اليمين). 
<div class="w3-row w3-rtl">
  <div class="w3-col m4">عمود 1</div>
  <div class="w3-col m4">عمود 2</div>
  <div class="w3-col m4">عمود 3</div>
</div>
w3-rest w3-rtl يأخذ المساحة المتبقية في التخطيط RTL. 
<div class="w3-row w3-rtl">
  <div class="w3-col m2">عمود ثابت</div>
  <div class="w3-rest">مساحة متبقية تبدأ من اليمين</div>
</div>
w3-input w3-rtl يحول حقول الإدخال إلى اتجاه RTL. 
<input class="w3-input w3-rtl w3-border" type="text" placeholder="نص من اليمين إلى اليسار">
w3-select w3-rtl يحول قوائم التحديد إلى اتجاه RTL. 
<select class="w3-select w3-rtl w3-border">
  <option>خيار 1</option>
  <option>خيار 2</option>
</select>
w3-check w3-rtl يحول صناديق الاختيار إلى اتجاه RTL. 
<label class="w3-rtl"><input class="w3-check" type="checkbox"> خيار RTL</label>
w3-radio w3-rtl يحول أزرار الراديو إلى اتجاه RTL. 
<label class="w3-rtl"><input class="w3-radio" type="radio" name="option"> خيار RTL</label>
w3-table w3-rtl يحول الجداول إلى اتجاه RTL. 
<table class="w3-table w3-rtl w3-border">
  <tr><th>رأس 1</th><th>رأس 2</th></tr>
  <tr><td>خلية 1</td><td>خلية 2</td></tr>
</table>
w3-striped w3-rtl يطبق تخطيط الخطوط على الجداول RTL. 
<table class="w3-table w3-striped w3-rtl">
  <tr><th>رأس</th><th>رأس</th></tr>
  <tr><td>خلية</td><td>خلية</td></tr>
</table>
w3-button w3-rtl أزرار باتجاه RTL. 
<button class="w3-button w3-rtl w3-blue">زر RTL</button>
w3-badge w3-rtl شارات باتجاه RTL. 
<span class="w3-badge w3-rtl w3-red">5</span>
w3-tag w3-rtl علامات باتجاه RTL. 
<span class="w3-tag w3-rtl w3-green">علامة</span>
w3-tooltip w3-rtl تلميحات باتجاه RTL. 
<div class="w3-tooltip w3-rtl">
  <span>نص عادي</span>
  <span class="w3-text">تلميح RTL</span>
</div>
w3-container w3-rtl حاوية كاملة باتجاه RTL. 
<div class="w3-container w3-rtl">
  <h2>عنوان RTL</h2>
  <p>هذا محتوى كامل باتجاه اليمين إلى اليسار</p>
</div>
w3-card w3-rtl بطاقة باتجاه RTL. 
<div class="w3-card w3-rtl w3-padding">
  <h3>بطاقة RTL</h3>
  <p>محتوى البطاقة من اليمين إلى اليسار</p>
</div>
w3-panel w3-rtl لوحة باتجاه RTL. 
<div class="w3-panel w3-rtl w3-blue">
  <p>لوحة تنبيه باتجاه RTL</p>
</div>
w3-rtl with ltr-content محتوى LTR داخل سياق RTL. 
<div class="w3-rtl">
  <p>نص عربي (RTL)</p>
  <p class="w3-ltr">English text (LTR)</p>
</div>
w3-ltr with rtl-content محتوى RTL داخل سياق LTR. 
<div class="w3-ltr">
  <p>English text (LTR)</p>
  <p class="w3-rtl">نص عربي (RTL)</p>
</div>

Sidebar

22 عنصر
الاسم الوصف مثال
w3-sidebar ينشئ شريطًا جانبيًا (sidebar) بعرض 25% من الصفحة. 
<div class="w3-sidebar w3-bar-block w3-border-right" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
  <a href="#" class="w3-bar-item w3-button">رابط 3</a>
</div>
w3-sidebar w3-bar-block شريط جانبي مع عناصر على شكل كتل. 
<div class="w3-sidebar w3-bar-block" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-card شريط جانبي بتصميم البطاقة (بظل). 
<div class="w3-sidebar w3-card" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-round شريط جانبي بزوايا مستديرة. 
<div class="w3-sidebar w3-round" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-border شريط جانبي بحدود. 
<div class="w3-sidebar w3-border" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-border-right شريط جانبي بحدود على الجانب الأيمن فقط. 
<div class="w3-sidebar w3-border-right" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-blue شريط جانبي أزرق اللون. 
<div class="w3-sidebar w3-blue" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-red شريط جانبي أحمر اللون. 
<div class="w3-sidebar w3-red" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-green شريط جانبي أخضر اللون. 
<div class="w3-sidebar w3-green" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-yellow شريط جانبي أصفر اللون. 
<div class="w3-sidebar w3-yellow" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-black شريط جانبي أسود اللون. 
<div class="w3-sidebar w3-black" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-white شريط جانبي أبيض اللون. 
<div class="w3-sidebar w3-white w3-border" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-pale-blue شريط جانبي بخلفية زرقاء باهتة. 
<div class="w3-sidebar w3-pale-blue" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-pale-red شريط جانبي بخلفية حمراء باهتة. 
<div class="w3-sidebar w3-pale-red" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-pale-green شريط جانبي بخلفية خضراء باهتة. 
<div class="w3-sidebar w3-pale-green" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-pale-yellow شريط جانبي بخلفية صفراء باهتة. 
<div class="w3-sidebar w3-pale-yellow" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-hover-shadow شريط جانبي يظهر له ظل عند التمرير. 
<div class="w3-sidebar w3-hover-shadow" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-animate-left شريط جانبي ينزلق من اليسار. 
<div class="w3-sidebar w3-animate-left" style="width:25%;display:none" id="mySidebar">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-animate-right شريط جانبي ينزلق من اليمين. 
<div class="w3-sidebar w3-animate-right" style="width:25%;display:none" id="mySidebar">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-mobile شريط جانبي متجاوب للجوال. 
<div class="w3-sidebar w3-mobile" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar w3-hide-small إخفاء الشريط الجانبي على الشاشات الصغيرة. 
<div class="w3-sidebar w3-hide-small" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-sidebar-content محتوى الصفحة الرئيسي عندما يكون هناك شريط جانبي. 
<div class="w3-sidebar" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
<div class="w3-sidebar-content" style="margin-left:25%">
  <h2>المحتوى الرئيسي</h2>
  <p>هذا هو المحتوى الرئيسي للصفحة</p>
</div>

Slide shows

10 عنصر
الاسم الوصف مثال
w3-slideshow ينشئ عرض شرائح أساسي تلقائي 
<div class="w3-slideshow" style="max-width:500px"><img class="slide" src="img1.jpg" style="width:100%"><img class="slide" src="img2.jpg" style="width:100%"><img class="slide" src="img3.jpg" style="width:100%"></div>
w3-slideshow عرض شرائح مع مؤشرات التنقل 
<div class="w3-slideshow" style="max-width:800px"><img class="slide" src="img1.jpg" style="width:100%"><img class="slide" src="img2.jpg" style="width:100%"><div class="w3-center"><span class="w3-badge demo" onclick="currentSlide(1)"></span><span class="w3-badge demo" onclick="currentSlide(2)"></span></div></div>
w3-slideshow عرض شرائح مع أزرار التنقل 
<div class="w3-slideshow" style="max-width:800px;position:relative"><img class="slide" src="img1.jpg" style="width:100%"><img class="slide" src="img2.jpg" style="width:100%"><button class="w3-button w3-black w3-display-left" onclick="plusSlides(-1)">❮</button><button class="w3-button w3-black w3-display-right" onclick="plusSlides(1)">❯</button></div>
w3-slideshow عرض شرائح مع التسميات التوضيحية 
<div class="w3-slideshow" style="max-width:800px"><div class="slide"><img src="img1.jpg" style="width:100%"><div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">التسمية التوضيحية الأولى</div></div><div class="slide"><img src="img2.jpg" style="width:100%"><div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">التسمية الثانية</div></div></div>
w3-slideshow عرض شرائح بحجم كامل 
<div class="w3-slideshow" style="width:100%;height:100vh"><img class="slide" src="img1.jpg" style="width:100%;height:100%"><img class="slide" src="img2.jpg" style="width:100%;height:100%"></div>
w3-slideshow عرض شرائح مع تأثيرات انتقالية 
<div class="w3-slideshow w3-animate-opacity" style="max-width:800px"><img class="slide" src="img1.jpg" style="width:100%"><img class="slide" src="img2.jpg" style="width:100%"></div>
w3-slideshow عرض شرائح مع توقيت مخصص 
<div class="w3-slideshow" data-interval="3000" style="max-width:800px"><img class="slide" src="img1.jpg" style="width:100%"><img class="slide" src="img2.jpg" style="width:100%"></div>
w3-slideshow عرض شرائح مع خلفية ملونة 
<div class="w3-slideshow w3-blue" style="max-width:800px;height:300px"><div class="slide w3-container w3-center w3-text-white" style="height:100%"><h2>الشريحة الأولى</h2><p>محتوى نصي هنا</p></div><div class="slide w3-container w3-center w3-text-white" style="height:100%"><h2>الشريحة الثانية</h2><p>محتوى آخر هنا</p></div></div>
w3-slideshow عرض شرائح متعدد الأعمدة 
<div class="w3-slideshow" style="max-width:1000px"><div class="slide w3-row"><div class="w3-half"><img src="img1.jpg" style="width:100%"></div><div class="w3-half w3-container"><h3>عنوان المحتوى</h3><p>وصف المحتوى هنا</p></div></div><div class="slide w3-row"><div class="w3-half"><img src="img2.jpg" style="width:100%"></div><div class="w3-half w3-container"><h3>عنوان آخر</h3><p>وصف آخر هنا</p></div></div></div>
w3-slideshow عرض شرائح مع شريط التقدم 
<div class="w3-slideshow" style="max-width:800px"><img class="slide" src="img1.jpg" style="width:100%"><img class="slide" src="img2.jpg" style="width:100%"><div class="w3-progressbar w3-bottom" style="width:0%"></div></div>

Tables

21 عنصر
الاسم الوصف مثال
w3-table ينشئ جدولاً أساسيًا بأنماط W3.CSS الافتراضية. 
<table class="w3-table">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table-all ينشئ جدولاً بحدود حول جميع الخلايا. 
<table class="w3-table-all">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table bordered ينشئ جدولاً بحدود حول جميع الخلايا (مرادف لـ w3-table-all). 
<table class="w3-bordered">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table striped ينشئ جدولاً مخططاً (خطوط متناوبة الألوان). 
<table class="w3-table w3-striped">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table bordered striped ينشئ جدولاً بحدود ومخططاً. 
<table class="w3-table w3-bordered w3-striped">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table hoverable ينشئ جدولاً يتفاعل عند التمرير (يتغير لون الصف عند التمرير). 
<table class="w3-table w3-hoverable">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table centered ينشئ جدولاً بمحاذاة النص إلى المنتصف. 
<table class="w3-table w3-centered">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table responsive يجعل الجدول متجاوباً مع الشاشات الصغيرة (يضيف شريط تمرير أفقي). 
<div class="w3-responsive">
  <table class="w3-table">
    <tr><th>الاسم</th><th>العمر</th><th>العنوان</th><th>الهاتف</th></tr>
    <tr><td>أحمد</td><td>25</td><td>القاهرة</td><td>0123456789</td></tr>
  </table>
</div>
w3-table-all w3-hoverable ينشئ جدولاً بحدود كاملة وتأثير التمرير. 
<table class="w3-table-all w3-hoverable">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table-all w3-striped ينشئ جدولاً بحدود كاملة وخطوط متناوبة. 
<table class="w3-table-all w3-striped">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table-all w3-centered ينشئ جدولاً بحدود كاملة ومحاذاة إلى المنتصف. 
<table class="w3-table-all w3-centered">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table w3-red ينشئ جدولاً بلون خلفية أحمر. 
<table class="w3-table w3-red">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table w3-blue ينشئ جدولاً بلون خلفية أزرق. 
<table class="w3-table w3-blue">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table w3-green ينشئ جدولاً بلون خلفية أخضر. 
<table class="w3-table w3-green">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table w3-yellow ينشئ جدولاً بلون خلفية أصفر. 
<table class="w3-table w3-yellow">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table w3-border-red ينشئ جدولاً بحدود حمراء. 
<table class="w3-table w3-border w3-border-red">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table w3-border-blue ينشئ جدولاً بحدود زرقاء. 
<table class="w3-table w3-border w3-border-blue">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table w3-border-green ينشئ جدولاً بحدود خضراء. 
<table class="w3-table w3-border w3-border-green">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table w3-hover-red ينشئ جدولاً يتغير لون الصف إلى أحمر عند التمرير. 
<table class="w3-table w3-hover-red">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table w3-hover-blue ينشئ جدولاً يتغير لون الصف إلى أزرق عند التمرير. 
<table class="w3-table w3-hover-blue">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>
w3-table w3-hover-green ينشئ جدولاً يتغير لون الصف إلى أخضر عند التمرير. 
<table class="w3-table w3-hover-green">
  <tr><th>الاسم</th><th>العمر</th></tr>
  <tr><td>أحمد</td><td>25</td></tr>
  <tr><td>محمد</td><td>30</td></tr>
</table>

Tags

66 عنصر
الاسم الوصف مثال
w3-tag ينشئ علامة (Tag) أساسية. 
<span class="w3-tag">علامة</span>
w3-tag w3-red ينشئ علامة حمراء. 
<span class="w3-tag w3-red">علامة حمراء</span>
w3-tag w3-blue ينشئ علامة زرقاء. 
<span class="w3-tag w3-blue">علامة زرقاء</span>
w3-tag w3-green ينشئ علامة خضراء. 
<span class="w3-tag w3-green">علامة خضراء</span>
w3-tag w3-yellow ينشئ علامة صفراء. 
<span class="w3-tag w3-yellow">علامة صفراء</span>
w3-tag w3-black ينشئ علامة سوداء. 
<span class="w3-tag w3-black">علامة سوداء</span>
w3-tag w3-white ينشئ علامة بيضاء. 
<span class="w3-tag w3-white w3-border">علامة بيضاء</span>
w3-tag w3-pink ينشئ علامة وردية. 
<span class="w3-tag w3-pink">علامة وردية</span>
w3-tag w3-purple ينشئ علامة بنفسجية. 
<span class="w3-tag w3-purple">علامة بنفسجية</span>
w3-tag w3-orange ينشئ علامة برتقالية. 
<span class="w3-tag w3-orange">علامة برتقالية</span>
w3-tag w3-teal ينشئ علامة بلون teal. 
<span class="w3-tag w3-teal">علامة teal</span>
w3-tag w3-khaki ينشئ علامة بلون كاكي. 
<span class="w3-tag w3-khaki">علامة كاكi</span>
w3-tag w3-round ينشئ علامة بزوايا مستديرة. 
<span class="w3-tag w3-round">علامة مستديرة</span>
w3-tag w3-round-large ينشئ علامة بزوايا مستديرة كبيرة. 
<span class="w3-tag w3-round-large">علامة مستديرة كبيرة</span>
w3-tag w3-round-xlarge ينشئ علامة بزوايا مستديرة كبيرة جداً. 
<span class="w3-tag w3-round-xlarge">علامة مستديرة جداً</span>
w3-tag w3-round-xxlarge ينشئ علامة بزوايا مستديرة بشكل دائري كامل. 
<span class="w3-tag w3-round-xxlarge">علامة دائرية</span>
w3-tag w3-circle ينشئ علامة دائرية. 
<span class="w3-tag w3-circle">علامة دائرية</span>
w3-tag w3-border ينشئ علامة بحدود. 
<span class="w3-tag w3-border">علامة بحدود</span>
w3-tag w3-hover-shadow ينشئ علامة تظهر لها ظل عند التمرير. 
<span class="w3-tag w3-hover-shadow">علامة بظل عند التمرير</span>
w3-tag w3-hover-opacity ينشئ علامة تصبح شفافة عند التمرير. 
<span class="w3-tag w3-hover-opacity">علامة شفافة عند التمرير</span>
w3-tag w3-hover-red ينشئ علامة تتغير إلى اللون الأحمر عند التمرير. 
<span class="w3-tag w3-hover-red">علامة حمراء عند التمرير</span>
w3-tag w3-hover-blue ينشئ علامة تتغير إلى اللون الأزرق عند التمرير. 
<span class="w3-tag w3-hover-blue">علامة زرقاء عند التمرير</span>
w3-tag w3-hover-green ينشئ علامة تتغير إلى اللون الأخضر عند التمرير. 
<span class="w3-tag w3-hover-green">علامة خضراء عند التمرير</span>
w3-tag w3-right ينشئ علامة بمحاذاة إلى اليمين. 
<div class="w3-container">
  <span class="w3-tag w3-right">علامة على اليمين</span>
  <p>نص مع علامة على اليمين</p>
</div>
w3-tag w3-left ينشئ علامة بمحاذاة إلى اليسار. 
<div class="w3-container">
  <span class="w3-tag w3-left">علامة على اليسار</span>
  <p>نص مع علامة على اليسار</p>
</div>
w3-tag w3-top ينشئ علامة بمحاذاة إلى الأعلى. 
<div class="w3-container w3-display-container">
  <span class="w3-tag w3-top">علامة في الأعلى</span>
  <p>نص مع علامة في الأعلى</p>
</div>
w3-tag w3-bottom ينشئ علامة بمحاذاة إلى الأسفل. 
<div class="w3-container w3-display-container">
  <span class="w3-tag w3-bottom">علامة في الأسفل</span>
  <p>نص مع علامة في الأسفل</p>
</div>
w3-tag w3-margin ينشئ علامة بهامش حولها. 
<span class="w3-tag w3-margin">علامة بهامش</span>
w3-tag w3-padding ينشئ علامة بحشو داخلي. 
<span class="w3-tag w3-padding">علامة بحشو</span>
w3-tag w3-small ينشئ علامة صغيرة الحجم. 
<span class="w3-tag w3-small">علامة صغيرة</span>
w3-tag w3-large ينشئ علامة كبيرة الحجم. 
<span class="w3-tag w3-large">علامة كبيرة</span>
w3-tag w3-xlarge ينشئ علامة كبيرة جداً في الحجم. 
<span class="w3-tag w3-xlarge">علامة كبيرة جداً</span>
w3-tag w3-xxlarge ينشئ علامة ضخمة الحجم. 
<span class="w3-tag w3-xxlarge">علامة ضخمة</span>
w3-tag ينشئ علامة (Tag) أساسية. 
<span class="w3-tag">علامة</span>
w3-tag w3-red ينشئ علامة حمراء. 
<span class="w3-tag w3-red">علامة حمراء</span>
w3-tag w3-blue ينشئ علامة زرقاء. 
<span class="w3-tag w3-blue">علامة زرقاء</span>
w3-tag w3-green ينشئ علامة خضراء. 
<span class="w3-tag w3-green">علامة خضراء</span>
w3-tag w3-yellow ينشئ علامة صفراء. 
<span class="w3-tag w3-yellow">علامة صفراء</span>
w3-tag w3-black ينشئ علامة سوداء. 
<span class="w3-tag w3-black">علامة سوداء</span>
w3-tag w3-white ينشئ علامة بيضاء. 
<span class="w3-tag w3-white w3-border">علامة بيضاء</span>
w3-tag w3-pink ينشئ علامة وردية. 
<span class="w3-tag w3-pink">علامة وردية</span>
w3-tag w3-purple ينشئ علامة بنفسجية. 
<span class="w3-tag w3-purple">علامة بنفسجية</span>
w3-tag w3-orange ينشئ علامة برتقالية. 
<span class="w3-tag w3-orange">علامة برتقالية</span>
w3-tag w3-teal ينشئ علامة بلون teal. 
<span class="w3-tag w3-teal">علامة teal</span>
w3-tag w3-khaki ينشئ علامة بلون كاكي. 
<span class="w3-tag w3-khaki">علامة كاكي</span>
w3-tag w3-round ينشئ علامة بزوايا مستديرة. 
<span class="w3-tag w3-round">علامة مستديرة</span>
w3-tag w3-round-large ينشئ علامة بزوايا مستديرة كبيرة. 
<span class="w3-tag w3-round-large">علامة مستديرة كبيرة</span>
w3-tag w3-round-xlarge ينشئ علامة بزوايا مستديرة كبيرة جداً. 
<span class="w3-tag w3-round-xlarge">علامة مستديرة جداً</span>
w3-tag w3-round-xxlarge ينشئ علامة بزوايا مستديرة بشكل دائري كامل. 
<span class="w3-tag w3-round-xxlarge">علامة دائرية</span>
w3-tag w3-circle ينشئ علامة دائرية. 
<span class="w3-tag w3-circle">علامة دائرية</span>
w3-tag w3-border ينشئ علامة بحدود. 
<span class="w3-tag w3-border">علامة بحدود</span>
w3-tag w3-hover-shadow ينشئ علامة تظهر لها ظل عند التمرير. 
<span class="w3-tag w3-hover-shadow">علامة بظل عند التمرير</span>
w3-tag w3-hover-opacity ينشئ علامة تصبح شفافة عند التمرير. 
<span class="w3-tag w3-hover-opacity">علامة شفافة عند التمرير</span>
w3-tag w3-hover-red ينشئ علامة تتغير إلى اللون الأحمر عند التمرير. 
<span class="w3-tag w3-hover-red">علامة حمراء عند التمرير</span>
w3-tag w3-hover-blue ينشئ علامة تتغير إلى اللون الأزرق عند التمرير. 
<span class="w3-tag w3-hover-blue">علامة زرقاء عند التمرير</span>
w3-tag w3-hover-green ينشئ علامة تتغير إلى اللون الأخضر عند التمرير. 
<span class="w3-tag w3-hover-green">علامة خضراء عند التمرير</span>
w3-tag w3-right ينشئ علامة بمحاذاة إلى اليمين. 
<div class="w3-container">
  <span class="w3-tag w3-right">علامة على اليمين</span>
  <p>نص مع علامة على اليمين</p>
</div>
w3-tag w3-left ينشئ علامة بمحاذاة إلى اليسار. 
<div class="w3-container">
  <span class="w3-tag w3-left">علامة على اليسار</span>
  <p>نص مع علامة على اليسار</p>
</div>
w3-tag w3-top ينشئ علامة بمحاذاة إلى الأعلى. 
<div class="w3-container w3-display-container">
  <span class="w3-tag w3-top">علامة في الأعلى</span>
  <p>نص مع علامة في الأعلى</p>
</div>
w3-tag w3-bottom ينشئ علامة بمحاذاة إلى الأسفل. 
<div class="w3-container w3-display-container">
  <span class="w3-tag w3-bottom">علامة في الأسفل</span>
  <p>نص مع علامة في الأسفل</p>
</div>
w3-tag w3-margin ينشئ علامة بهامش حولها. 
<span class="w3-tag w3-margin">علامة بهامش</span>
w3-tag w3-padding ينشئ علامة بحشو داخلي. 
<span class="w3-tag w3-padding">علامة بحشو</span>
w3-tag w3-small ينشئ علامة صغيرة الحجم. 
<span class="w3-tag w3-small">علامة صغيرة</span>
w3-tag w3-large ينشئ علامة كبيرة الحجم. 
<span class="w3-tag w3-large">علامة كبيرة</span>
w3-tag w3-xlarge ينشئ علامة كبيرة جداً في الحجم. 
<span class="w3-tag w3-xlarge">علامة كبيرة جداً</span>
w3-tag w3-xxlarge ينشئ علامة ضخمة الحجم. 
<span class="w3-tag w3-xxlarge">علامة ضخمة</span>

Tooltips

15 عنصر
الاسم الوصف مثال
w3-tooltip ينشئ تلميح أساسي يظهر عند التحويم 
<div class="w3-tooltip">مرر فوقي<span class="w3-text w3-tag">هذا تلميح بسيط</span></div>
w3-tooltip تلميح في الأعلى 
<div class="w3-tooltip">مرر هنا<span class="w3-text w3-tag w3-top">تلميح في الأعلى</span></div>
w3-tooltip تلميح في الأسفل 
<div class="w3-tooltip">مرر هنا<span class="w3-text w3-tag w3-bottom">تلميح في الأسفل</span></div>
w3-tooltip تلميح على اليمين 
<div class="w3-tooltip">مرر هنا<span class="w3-text w3-tag w3-right">تلميح على اليمين</span></div>
w3-tooltip تلميح على اليسار 
<div class="w3-tooltip">مرر هنا<span class="w3-text w3-tag w3-left">تلميح على اليسار</span></div>
w3-tooltip تلميح بلون مختلف 
<div class="w3-tooltip">مرر هنا<span class="w3-text w3-tag w3-red">تلميح أحمر</span></div>
w3-tooltip تلميح مع محتوى HTML 
<div class="w3-tooltip">مرر هنا<span class="w3-text w3-tag"><strong>نص عريض</strong> و <em>مائل</em></span></div>
w3-tooltip تلميح مع رابط 
<div class="w3-tooltip">مرر هنا<span class="w3-text w3-tag"><a href="#" style="color:white">رابط داخل التلميح</a></span></div>
w3-tooltip تلميح مع أيقونة 
<div class="w3-tooltip"><span class="w3-large">ℹ️</span><span class="w3-text w3-tag">معلومات إضافية هنا</span></div>
w3-tooltip تلميح مع حدود مخصصة 
<div class="w3-tooltip">مرر هنا<span class="w3-text w3-tag" style="border:2px dashed white">تلميح بحدود متقطعة</span></div>
w3-tooltip تلميح مع تأثير الظل 
<div class="w3-tooltip">مرر هنا<span class="w3-text w3-tag w3-shadow">تلميح بظل</span></div>
w3-tooltip تلميح مع تأخير في الظهور 
<div class="w3-tooltip" style="transition-delay:0.5s">مرر هنا<span class="w3-text w3-tag">يظهر بعد نصف ثانية</span></div>
w3-tooltip تلميح على زر 
<button class="w3-button w3-blue w3-tooltip">زر مع تلميح<span class="w3-text w3-tag w3-top">تلميح على زر</span></button>
w3-tooltip تلميح على صورة 
<img src="image.jpg" class="w3-tooltip" style="width:100px" alt="صورة"><span class="w3-text w3-tag">وصف الصورة</span>
w3-tooltip تلميح دائم الظهور 
<div class="w3-tooltip" style="position:relative">نص ثابت<span class="w3-text w3-tag" style="position:absolute;display:block">تلميح دائم</span></div>
15 عنصر
الاسم الوصف مثال
w3-trend-card بطاقة عصرية بتصميم مائل 
<div class="w3-card-4 w3-padding w3-tilt" style="max-width:300px"><h3>بطاقة عصرية</h3><p>تصميم مائل مع ظل</p></div>
w3-trend-glass تأثير الزجاج الشفاف (Glass morphism) 
<div class="w3-padding-large w3-round" style="background:rgba(255,255,255,0.2);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3)"><h3>تأثير الزجاج</h3><p>تصميم عصري شفاف</p></div>
w3-trend-gradient خلفية متدرجة أنيقة 
<div class="w3-padding-large w3-text-white" style="background:linear-gradient(135deg, #667eea, #764ba2)"><h3>تدرج ألوان</h3><p>خلفية متدرجة عصرية</p></div>
w3-trend-neomorphism تصميم نيومورفيك (Neomorphism) 
<div class="w3-padding-large w3-round" style="background:#e0e5ec;box-shadow:5px 5px 10px #b8b9be, -5px -5px 10px #ffffff"><h3>نيومورفيك</h3><p>تصميم ثلاثي الأبعاد عصري</p></div>
w3-trend-darkmode تصميم متوافق مع الوضع الداكن 
<div class="w3-padding w3-dark-grey w3-text-white"><h3>الوضع الداكن</h3><p>تصميم مريح للعين ليلاً</p></div>
w3-trend-minimal تصميم بسيط minimal 
<div class="w3-padding" style="background:#fff;border:1px solid #eee"><h3 style="font-weight:300">تصميم بسيط</h3><p style="color:#666">أقل هو أكثر</p></div>
w3-trend-animation حركات وتأثيرات دقيقة 
<div class="w3-padding w3-hover-shadow w3-hover-opacity"><h3>تأثيرات تفاعلية</h3><p>حركات عند التمرير والتحويم</p></div>
w3-trend-grid تصميم شبكي غير متماثل 
<div class="w3-row-padding"><div class="w3-third"><div class="w3-padding w3-blue">عمود 1</div></div><div class="w3-twothird"><div class="w3-padding w3-green">عمود 2</div></div></div>
w3-trend-rounded زوايا دائرية كبيرة 
<div class="w3-padding-large w3-round-xlarge w3-blue"><h3>زوايا دائرية</h3><p>تصميم ناعم ومريح</p></div>
w3-trend-3d تصميم ثلاثي الأبعاد 
<div class="w3-card-4 w3-padding" style="transform: perspective(1000px) rotateY(10deg)"><h3>تأثير 3D</h3><p>عمق ثلاثي الأبعاد</p></div>
w3-trend-fluid تصميم سائل متجاوب 
<div class="w3-padding w3-responsive" style="background:#f8f9fa"><div class="w3-row-padding"><div class="w3-full w3-medium w3-large"><p>يتكيف مع جميع الشاشات</p></div></div></div>
w3-trend-micro تفاعلات دقيقة للزر 
<button class="w3-button w3-blue w3-hover-white w3-hover-text-blue w3-border w3-border-blue">زر تفاعلي</button>
w3-trend-data عرض البيانات بشكل جذاب 
<div class="w3-light-grey w3-round"><div class="w3-container w3-blue w3-round" style="width:75%">75%</div></div>
w3-trend-typo نصوص وعناوين جريئة 
<h1 class="w3-text-black" style="font-weight:800;letter-spacing:-1px">عناوين جريئة</h1>
w3-trend-blend مزج الألوان والطبقات 
<div class="w3-padding-large w3-text-white" style="background-color:#ff6b6b;background-image:linear-gradient(45deg,#ff6b6b 0%,#4ecdc4 100%);mix-blend-mode:multiply"><h3>مزج الألوان</h3><p>تدرجات ومزج مبتكر</p></div>

Text

52 عنصر
الاسم الوصف مثال
w3-text-red يغير لون النص إلى أحمر. 
<p class="w3-text-red">نص أحمر اللون</p>
w3-text-pink يغير لون النص إلى وردي. 
<p class="w3-text-pink">نص وردي اللون</p>
w3-text-purple يغير لون النص إلى بنفسجي. 
<p class="w3-text-purple">نص بنفسجي اللون</p>
w3-text-deep-purple يغير لون النص إلى بنفسجي غامق. 
<p class="w3-text-deep-purple">نص بنفسجي غامق اللون</p>
w3-text-indigo يغير لون النص إلى نيلي (إنديجو). 
<p class="w3-text-indigo">نص نيلي اللون</p>
w3-text-blue يغير لون النص إلى أزرق. 
<p class="w3-text-blue">نص أزرق اللون</p>
w3-text-light-blue يغير لون النص إلى أزرق فاتح. 
<p class="w3-text-light-blue">نص أزرق فاتح اللون</p>
w3-text-cyan يغير لون النص إلى سيان. 
<p class="w3-text-cyan">نص سيان اللون</p>
w3-text-aqua يغير لون النص إلى aqua. 
<p class="w3-text-aqua">نص aqua اللون</p>
w3-text-teal يغير لون النص إلى teal (أزرق-أخضر). 
<p class="w3-text-teal">نص teal اللون</p>
w3-text-green يغير لون النص إلى أخضر. 
<p class="w3-text-green">نص أخضر اللون</p>
w3-text-light-green يغير لون النص إلى أخضر فاتح. 
<p class="w3-text-light-green">نص أخضر فاتح اللون</p>
w3-text-lime يغير لون النص إلى lime (أخضر مصفر). 
<p class="w3-text-lime">نص lime اللون</p>
w3-text-sand يغير لون النص إلى لون الرمل. 
<p class="w3-text-sand">نص بلون الرمل</p>
w3-text-khaki يغير لون النص إلى كاكي. 
<p class="w3-text-khaki">نص كاكي اللون</p>
w3-text-yellow يغير لون النص إلى أصفر. 
<p class="w3-text-yellow">نص أصفر اللون</p>
w3-text-amber يغير لون النص إلى كهرماني. 
<p class="w3-text-amber">نص كهرماني اللون</p>
w3-text-orange يغير لون النص إلى برتقالي. 
<p class="w3-text-orange">نص برتقالي اللون</p>
w3-text-deep-orange يغير لون النص إلى برتقالي غامق. 
<p class="w3-text-deep-orange">نص برتقالي غامق اللون</p>
w3-text-blue-gray يغير لون النص إلى أزرق-رمادي. 
<p class="w3-text-blue-gray">نص أزرق-رمادي اللون</p>
w3-text-brown يغير لون النص إلى بني. 
<p class="w3-text-brown">نص بني اللون</p>
w3-text-light-gray يغير لون النص إلى رمادي فاتح. 
<p class="w3-text-light-gray">نص رمادي فاتح اللون</p>
w3-text-gray يغير لون النص إلى رمادي. 
<p class="w3-text-gray">نص رمادي اللون</p>
w3-text-dark-gray يغير لون النص إلى رمادي غامق. 
<p class="w3-text-dark-gray">نص رمادي غامق اللون</p>
w3-text-black يغير لون النص إلى أسود. 
<p class="w3-text-black">نص أسود اللون</p>
w3-text-white يغير لون النص إلى أبيض. 
<p class="w3-text-white w3-black">نص أبيض على خلفية سوداء</p>
w3-left-align يحاذي النص إلى اليسار. 
<p class="w3-left-align">نص بمحاذاة لليسار</p>
w3-right-align يحاذي النص إلى اليمين. 
<p class="w3-right-align">نص بمحاذاة لليمين</p>
w3-center يحاذي النص إلى المنتصف. 
<p class="w3-center">نص في المنتصف</p>
w3-justify يحاذي النص بشكل كامل (justify) على الجانبين. 
<p class="w3-justify">نص بمحاذاة كاملة على الجانبين</p>
w3-uppercase يحول النص إلى أحرف كبيرة (uppercase). 
<p class="w3-uppercase">نص بأحرف كبيرة</p>
w3-lowercase يحول النص إلى أحرف صغيرة (lowercase). 
<p class="w3-lowercase">نص بأحرف صغيرة</p>
w3-capitalize يحول أول حرف من كل كلمة إلى كبير (capitalize). 
<p class="w3-capitalize">نص بأول حرف كبير من كل كلمة</p>
w3-underline يضيف خط تحت النص. 
<p class="w3-underline">نص بخط تحته</p>
w3-overline يضيف خط فوق النص. 
<p class="w3-overline">نص بخط فوقه</p>
w3-line-through يضيف خط في منتصف النص (لشطب النص). 
<p class="w3-line-through">نص مشطوب</p>
w3-no-underline يزيل أي خط تحت النص. 
<p class="w3-no-underline">نص بدون خط تحته</p>
w3-wide يزيد من تباعد أحرف النص (letter-spacing). 
<p class="w3-wide">نص بتباعد واسع بين الأحرف</p>
w3-opacity يجعل النص شفافاً بنسبة 60%. 
<p class="w3-opacity">نص شفاف</p>
w3-opacity-off يجعل النص غير شفاف (100%). 
<p class="w3-opacity-off">نص غير شفاف</p>
w3-opacity-min يجعل النص شفافاً بنسبة قليلة (0.75). 
<p class="w3-opacity-min">نص شفاف قليلاً</p>
w3-opacity-max يجعل النص شفافاً بنسبة كبيرة (0.25). 
<p class="w3-opacity-max">نص شفاف كثيراً</p>
w3-text-shadow يضيف ظل للنص. 
<p class="w3-text-shadow">نص بظل</p>
w3-no-text-shadow يزيل ظل النص. 
<p class="w3-no-text-shadow">نص بدون ظل</p>
w3-nowrap يمنع تفاف النص إلى السطر التالي. 
<p class="w3-nowrap">نص طويل لا ينتقل إلى السطر التالي حتى لو كان طويلاً جداً</p>
w3-wrap يسمح بتفاف النص إلى السطر التالي (الافتراضي). 
<p class="w3-wrap">نص طويل ينتقل إلى السطر التالي تلقائياً عندما يصل إلى نهاية المساحة المتاحة</p>
w3-ltr يجعل اتجاه النص من اليسار إلى اليمين (left-to-right). 
<p class="w3-ltr">نص من اليسار إلى اليمين</p>
w3-rtl يجعل اتجاه النص من اليمين إلى اليسار (right-to-left). 
<p class="w3-rtl">نص من اليمين إلى اليسار</p>
w3-text-blue w3-large w3-bold جمع بين لون أزرق، حجم كبير، ووزن عريض. 
<p class="w3-text-blue w3-large w3-bold">نص أزرق كبير وعريض</p>
w3-text-red w3-uppercase w3-center جمع بين لون أحمر، أحرف كبيرة، ومحاذاة للوسط. 
<p class="w3-text-red w3-uppercase w3-center">نص أحمر بأحرف كبيرة في المنتصف</p>
w3-text-green w3-underline w3-opacity جمع بين لون أخضر، خط تحت، وشفافية. 
<p class="w3-text-green w3-underline w3-opacity">نص أخضر بخط تحته وشفاف</p>
w3-text-purple w3-wide w3-text-shadow جمع بين لون بنفسجي، تباعد واسع، وظل للنص. 
<p class="w3-text-purple w3-wide w3-text-shadow">نص بنفسجي بتباعد واسع وظل</p>

Responsive fluid grid

27 عنصر
الاسم الوصف مثال
w3-cell خلية مرنة تتكيف تلقائياً مع حجم الشاشة. 
<div class="w3-cell">خلية متجاوبة</div>
w3-cell-row صف من الخلايا المتجاوبة التي تتكيف مع حجم الشاشة. 
<div class="w3-cell-row">
  <div class="w3-cell">خلية 1</div>
  <div class="w3-cell">خلية 2</div>
</div>
w3-quarter خلية بعرض 25% من الحاوية الأم. 
<div class="w3-quarter">ربع العرض</div>
w3-third خلية بعرض 33.33% من الحاوية الأم. 
<div class="w3-third">ثلث العرض</div>
w3-half خلية بعرض 50% من الحاوية الأم. 
<div class="w3-half">نصف العرض</div>
w3-twothird خلية بعرض 66.66% من الحاوية الأم. 
<div class="w3-twothird">ثلثا العرض</div>
w3-threequarter خلية بعرض 75% من الحاوية الأم. 
<div class="w3-threequarter">ثلاثة أرباع العرض</div>
w3-col عمود في الشبكة السائلة (يتطلب تحديد الحجم). 
<div class="w3-col m4">عمود متوسط</div>
w3-rest يأخذ المساحة المتبقية في الصف. 
<div class="w3-quarter">ربع</div>
<div class="w3-rest">الباقي</div>
w3-row صف في الشبكة السائلة. 
<div class="w3-row">
  <div class="w3-half">نصف</div>
  <div class="w3-half">نصف</div>
</div>
w3-row-padding صف مع حشو داخلي بين الخلايا. 
<div class="w3-row-padding">
  <div class="w3-third">ثلث</div>
  <div class="w3-third">ثلث</div>
  <div class="w3-third">ثلث</div>
</div>
w3-content حاوية ذات عرض أقصى وتوسيط تلقائي. 
<div class="w3-content" style="max-width:1200px">
  محتوى متجاوب
</div>
w3-auto يوسّط العنصر أفقياً تلقائياً. 
<div class="w3-auto" style="width:200px">عنصر متمركز</div>
w3-mobile يضيف هوامش صغيرة على الجوانب عند العرض على الجوال. 
<div class="w3-mobile">عنصر متجاوب للجوال</div>
w3-section يضيف مسافة عمودية (هامش) للعنصر. 
<div class="w3-section">قسم بمسافة</div>
w3-responsive يجعل الجداول متجاوبة مع الشاشات الصغيرة. 
<table class="w3-responsive">
  <tr><th>رأس</th><th>رأس</th></tr>
  <tr><td>خلية</td><td>خلية</td></tr>
</table>
w3-container حاوية متجاوبة مع حواف داخلية ثابتة. 
<div class="w3-container">حاوية متجاوبة</div>
w3-panel لوحة متجاوبة مع هوامش وظل خفيف. 
<div class="w3-panel">لوحة متجاوبة</div>
w3-cell-top محاذاة الخلية إلى الأعلى. 
<div class="w3-cell w3-cell-top">خلية علوية</div>
w3-cell-middle محاذاة الخلية إلى المنتصف. 
<div class="w3-cell w3-cell-middle">خلية وسطية</div>
w3-cell-bottom محاذاة الخلية إلى الأسفل. 
<div class="w3-cell w3-cell-bottom">خلية سفلية</div>
w3-hide-small إخفاء العنصر على الشاشات الصغيرة. 
<div class="w3-hide-small">مخفي على الجوال</div>
w3-hide-medium إخفاء العنصر على الشاشات المتوسطة. 
<div class="w3-hide-medium">مخفي على الألواح</div>
w3-hide-large إخفاء العنصر على الشاشات الكبيرة. 
<div class="w3-hide-large">مخفي على سطح المكتب</div>
w3-show-small إظهار العنصر فقط على الشاشات الصغيرة. 
<div class="w3-show-small">ظاهر فقط على الجوال</div>
w3-show-medium إظهار العنصر فقط على الشاشات المتوسطة. 
<div class="w3-show-medium">ظاهر فقط على الألواح</div>
w3-show-large إظهار العنصر فقط على الشاشات الكبيرة. 
<div class="w3-show-large">ظاهر فقط على سطح المكتب</div>

Quotes

20 عنصر
الاسم الوصف مثال
w3-panel w3-leftbar ينشئ لوحة بشريط أيسر، مناسبة للاقتباسات والنصوص المميزة. 
<div class="w3-panel w3-leftbar w3-border-blue">
  <p>هذا اقتباس مهم مع شريط أزرق على اليسار</p>
</div>
w3-panel w3-leftbar w3-light-grey ينشئ لوحة بشريط أيسر وخلفية رمادية فاتحة. 
<div class="w3-panel w3-leftbar w3-light-grey">
  <p>اقتباس بخلفية رمادية فاتحة</p>
</div>
w3-panel w3-leftbar w3-pale-blue ينشئ لوحة بشريط أيسر وخلفية زرقاء باهتة. 
<div class="w3-panel w3-leftbar w3-pale-blue">
  <p>اقتباس بخلفية زرقاء باهتة</p>
</div>
w3-panel w3-leftbar w3-pale-green ينشئ لوحة بشريط أيسر وخلفية خضراء باهتة. 
<div class="w3-panel w3-leftbar w3-pale-green">
  <p>اقتباس بخلفية خضراء باهتة</p>
</div>
w3-panel w3-leftbar w3-pale-yellow ينشئ لوحة بشريط أيسر وخلفية صفراء باهتة. 
<div class="w3-panel w3-leftbar w3-pale-yellow">
  <p>اقتباس بخلفية صفراء باهتة</p>
</div>
w3-panel w3-leftbar w3-pale-red ينشئ لوحة بشريط أيسر وخلفية حمراء باهتة. 
<div class="w3-panel w3-leftbar w3-pale-red">
  <p>اقتباس بخلفية حمراء باهتة</p>
</div>
w3-border-left يضيف حدودًا على الجانب الأيسر فقط، مفيد للاقتباسات. 
<div class="w3-border-left w3-padding">
  <p>نص اقتباس بحدود يسارية</p>
</div>
w3-border-right يضيف حدودًا على الجانب الأيمن فقط، مفيد للاقتباسات في التصميم RTL. 
<div class="w3-border-right w3-padding">
  <p>نص اقتباس بحدود يمينية</p>
</div>
w3-blockquote ينشئ تنسيقًا خاصًا للاقتباسات الطويلة. 
<blockquote class="w3-blockquote">
  <p>هذا اقتباس طويل يمكن أن يمتد لعدة أسطر ويستخدم لعرض المقولات المهمة والمقتطفات النصية الطويلة.</p>
  <footer>اسم المؤلف</footer>
</blockquote>
w3-panel w3-sand ينشئ لوحة بخلفية رملية، مناسبة للاقتباسات القديمة أو الكلاسيكية. 
<div class="w3-panel w3-sand">
  <p>اقتباس كلاسيكي بخلفية رملية</p>
</div>
w3-panel w3-khaki ينشئ لوحة بخلفية كاكي، مناسبة للاقتباسات العسكرية أو الرجولية. 
<div class="w3-panel w3-khaki">
  <p>اقتباس بخلفية كاكي</p>
</div>
w3-panel w3-amber ينشئ لوحة بخلفية كهرمانية، مناسبة للاقتباسات المشرقة والمميزة. 
<div class="w3-panel w3-amber">
  <p>اقتباس مميز بخلفية كهرمانية</p>
</div>
w3-panel w3-border w3-round ينشئ لوحة بحدود مستديرة، مناسبة للاقتباسات الأنيقة. 
<div class="w3-panel w3-border w3-round">
  <p>اقتباس أنيق بحدود مستديرة</p>
</div>
w3-panel w3-border w3-round-large ينشئ لوحة بحدود مستديرة كبيرة. 
<div class="w3-panel w3-border w3-round-large">
  <p>اقتباس بحدود مستديرة كبيرة</p>
</div>
w3-panel w3-card ينشئ اقتباسًا بتأثير البطاقة (بظل). 
<div class="w3-panel w3-card">
  <p>اقتباس بتأثير البطاقة</p>
</div>
w3-panel w3-card-4 ينشئ اقتباسًا بتأثير البطاقة بظل أكبر. 
<div class="w3-panel w3-card-4">
  <p>اقتباس بتأثير البطاقة بظل أكبر</p>
</div>
w3-panel w3-hover-shadow ينشئ اقتباسًا يظهر له ظل عند التمرير. 
<div class="w3-panel w3-hover-shadow">
  <p>اقتباس يظهر له ظل عند التمرير</p>
</div>
w3-panel w3-opacity ينشئ اقتباسًا شفافًا قليلاً. 
<div class="w3-panel w3-opacity">
  <p>اقتباس شفاف</p>
</div>
w3-panel w3-opacity-min ينشئ اقتباسًا شفافًا بشكل طفيف. 
<div class="w3-panel w3-opacity-min">
  <p>اقتباس شفاف طفيف</p>
</div>
w3-panel w3-opacity-max ينشئ اقتباسًا شفافًا بشكل كبير. 
<div class="w3-panel w3-opacity-max">
  <p>اقتباس شفاف بشكل كبير</p>
</div>

Progressbars

39 عنصر
الاسم الوصف مثال
w3-progressbar ينشئ شريط تقدم أساسي. 
<div class="w3-progressbar" style="width:50%">50%</div>
w3-progressbar w3-round شريط تقدم بزوايا مستديرة. 
<div class="w3-progressbar w3-round" style="width:50%">50%</div>
w3-progressbar w3-round-large شريط تقدم بزوايا مستديرة كبيرة. 
<div class="w3-progressbar w3-round-large" style="width:50%">50%</div>
w3-progressbar w3-round-xlarge شريط تقدم بزوايا مستديرة كبيرة جداً. 
<div class="w3-progressbar w3-round-xlarge" style="width:50%">50%</div>
w3-progressbar w3-round-xxlarge شريط تقدم بزوايا مستديرة بشكل دائري كامل. 
<div class="w3-progressbar w3-round-xxlarge" style="width:50%">50%</div>
w3-progressbar w3-border شريط تقدم بحدود. 
<div class="w3-progressbar w3-border" style="width:50%">50%</div>
w3-progressbar w3-blue شريط تقدم أزرق اللون. 
<div class="w3-progressbar w3-blue" style="width:50%">50%</div>
w3-progressbar w3-red شريط تقدم أحمر اللون. 
<div class="w3-progressbar w3-red" style="width:50%">50%</div>
w3-progressbar w3-green شريط تقدم أخضر اللون. 
<div class="w3-progressbar w3-green" style="width:50%">50%</div>
w3-progressbar w3-yellow شريط تقدم أصفر اللون. 
<div class="w3-progressbar w3-yellow" style="width:50%">50%</div>
w3-progressbar w3-black شريط تقدم أسود اللون. 
<div class="w3-progressbar w3-black" style="width:50%">50%</div>
w3-progressbar w3-white شريط تقدم أبيض اللون. 
<div class="w3-progressbar w3-white w3-border" style="width:50%">50%</div>
w3-progressbar w3-pale-blue شريط تقدم بخلفية زرقاء باهتة. 
<div class="w3-progressbar w3-pale-blue" style="width:50%">50%</div>
w3-progressbar w3-pale-red شريط تقدم بخلفية حمراء باهتة. 
<div class="w3-progressbar w3-pale-red" style="width:50%">50%</div>
w3-progressbar w3-pale-green شريط تقدم بخلفية خضراء باهتة. 
<div class="w3-progressbar w3-pale-green" style="width:50%">50%</div>
w3-progressbar w3-pale-yellow شريط تقدم بخلفية صفراء باهتة. 
<div class="w3-progressbar w3-pale-yellow" style="width:50%">50%</div>
w3-progressbar w3-container شريط تقدم داخل حاوية. 
<div class="w3-container">
  <div class="w3-progressbar" style="width:50%">50%</div>
</div>
w3-progressbar w3-card شريط تقدم بتصميم البطاقة. 
<div class="w3-progressbar w3-card" style="width:50%">50%</div>
w3-progressbar w3-hover-shadow شريط تقدم يظهر له ظل عند التمرير. 
<div class="w3-progressbar w3-hover-shadow" style="width:50%">50%</div>
w3-progressbar w3-hover-opacity شريط تقدم يصبح شفافاً عند التمرير. 
<div class="w3-progressbar w3-hover-opacity" style="width:50%">50%</div>
w3-progressbar w3-animate-opacity شريط تقدم يظهر تدريجياً. 
<div class="w3-progressbar w3-animate-opacity" style="width:50%">50%</div>
w3-progressbar w3-animate-top شريط تقدم ينزلق من الأعلى. 
<div class="w3-progressbar w3-animate-top" style="width:50%">50%</div>
w3-progressbar w3-animate-bottom شريط تقدم ينزلق من الأسفل. 
<div class="w3-progressbar w3-animate-bottom" style="width:50%">50%</div>
w3-progressbar w3-animate-left شريط تقدم ينزلق من اليسار. 
<div class="w3-progressbar w3-animate-left" style="width:50%">50%</div>
w3-progressbar w3-animate-right شريط تقدم ينزلق من اليمين. 
<div class="w3-progressbar w3-animate-right" style="width:50%">50%</div>
w3-progressbar w3-animate-zoom شريط تقدم يتكبير من المركز. 
<div class="w3-progressbar w3-animate-zoom" style="width:50%">50%</div>
w3-progressbar w3-tiny شريط تقدم صغير الحجم. 
<div class="w3-progressbar w3-tiny" style="width:50%">50%</div>
w3-progressbar w3-small شريط تقدم بحجم صغير. 
<div class="w3-progressbar w3-small" style="width:50%">50%</div>
w3-progressbar w3-medium شريط تقدم بحجم متوسط. 
<div class="w3-progressbar w3-medium" style="width:50%">50%</div>
w3-progressbar w3-large شريط تقدم بحجم كبير. 
<div class="w3-progressbar w3-large" style="width:50%">50%</div>
w3-progressbar w3-xlarge شريط تقدم بحجم كبير جداً. 
<div class="w3-progressbar w3-xlarge" style="width:50%">50%</div>
w3-progressbar w3-xxlarge شريط تقدم بحجم ضخم. 
<div class="w3-progressbar w3-xxlarge" style="width:50%">50%</div>
w3-progressbar w3-jumbo شريط تقدم بحجم jumbo. 
<div class="w3-progressbar w3-jumbo" style="width:50%">50%</div>
w3-progressbar-container حاوية لشريط التقدم. 
<div class="w3-progressbar-container">
  <div class="w3-progressbar" style="width:50%">50%</div>
</div>
w3-progressbar w3-disabled شريط تقدم معطل. 
<div class="w3-progressbar w3-disabled" style="width:50%">50%</div>
w3-progressbar w3-mobile شريط تقدم متجاوب للجوال. 
<div class="w3-progressbar w3-mobile" style="width:50%">50%</div>
w3-progressbar w3-center شريط تقدم متمركز في الوسط. 
<div class="w3-progressbar w3-center" style="width:50%">50%</div>
w3-progressbar w3-right شريط تقدم متمركز على اليمين. 
<div class="w3-progressbar w3-right" style="width:50%">50%</div>
w3-progressbar w3-left شريط تقدم متمركز على اليسар. 
<div class="w3-progressbar w3-left" style="width:50%">50%</div>

Panels

29 عنصر
الاسم الوصف مثال
w3-panel تنشئ لوحة/حاوية للمحتوى مع هوامش وحواف داخلية وظل خفيف. مناسبة لعناصر المحتوى المنظمة. 
<div class="w3-panel">
  <p>لوحة عادية تحتوي على نص.</p>
</div>
w3-panel w3-round تنشئ لوحة ذات زوايا دائرية (مدورة). 
<div class="w3-panel w3-round">
  <p>لوحة بزوايا مدورة.</p>
</div>
w3-panel w3-round-large تنشئ لوحة ذات زوايا دائرية كبيرة. 
<div class="w3-panel w3-round-large">
  <p>لوحة بزوايا مدورة كبيرة.</p>
</div>
w3-panel w3-round-xlarge تنشئ لوحة ذات زوايا دائرية كبيرة جداً. 
<div class="w3-panel w3-round-xlarge">
  <p>لوحة بزوايا مدورة كبيرة جداً.</p>
</div>
w3-panel w3-round-xxlarge تنشئ لوحة ذات زوايا دائرية ضخمة. 
<div class="w3-panel w3-round-xxlarge">
  <p>لوحة بزوايا مدورة ضخمة.</p>
</div>
w3-pale-red تضيف لون خلفية أحمر باهت للوحة. مناسبة للتحذيرات. 
<div class="w3-panel w3-pale-red">
  <p>هذا تحذير مهم!</p>
</div>
w3-pale-blue تضيف لون خلفية أزرق باهت للوحة. مناسبة للمعلومات. 
<div class="w3-panel w3-pale-blue">
  <p>معلومة مفيدة للمستخدم.</p>
</div>
w3-pale-green تضيف لون خلفية أخضر باهت للوحة. مناسبة للإنجازات والتأكيدات. 
<div class="w3-panel w3-pale-green">
  <p>تمت العملية بنجاح!</p>
</div>
w3-pale-yellow تضيف لون خلفية أصفر باهت للوحة. مناسبة للتنبيهات المحايدة. 
<div class="w3-panel w3-pale-yellow">
  <p>تنبيه: يرجى المراجعة.</p>
</div>
w3-pale-khaki تضيف لون خلفية كاكي باهت للوحة. 
<div class="w3-panel w3-pale-khaki">
  <p>إشعار بمظهر أنيق.</p>
</div>
w3-leftbar تضيف شريطًا عموديًا على الجانب الأيسر من اللوحة. 
<div class="w3-panel w3-leftbar w3-border-blue">
  <p>لوحة مع شريط أيسر أزرق.</p>
</div>
w3-rightbar تضيف شريطًا عموديًا على الجانب الأيمن من اللوحة. 
<div class="w3-panel w3-rightbar w3-border-green">
  <p>لوحة مع شريط أيمن أخضر.</p>
</div>
w3-topbar تضيف شريطًا أفقيًا في أعلى اللوحة. 
<div class="w3-panel w3-topbar w3-border-red">
  <p>لوحة مع شريط علوي أحمر.</p>
</div>
w3-bottombar تضيف شريطًا أفقيًا في أسفل اللوحة. 
<div class="w3-panel w3-bottombar w3-border-orange">
  <p>لوحة مع شريط سفلي برتقالي.</p>
</div>
w3-display-container تنشئ حاوية لعناصر العرض الخاصة. تسمح بوضع عناصر داخلية في مواقع محددة. 
<div class="w3-display-container" style="height:200px;">
  <div class="w3-display-middle">هذا النص في المنتصف</div>
</div>
w3-display-topleft يضع العنصر في الزاوية العلوية اليسرى داخل w3-display-container. 
<div class="w3-display-topleft">أعلى اليسار</div>
w3-display-topright يضع العنصر في الزاوية العلوية اليمنى داخل w3-display-container. 
<div class="w3-display-topright">أعلى اليمين</div>
w3-display-bottomleft يضع العنصر في الزاوية السفلية اليسرى داخل w3-display-container. 
<div class="w3-display-bottomleft">أسفل اليسار</div>
w3-display-bottomright يضع العنصر في الزاوية السفلية اليمنى داخل w3-display-container. 
<div class="w3-display-bottomright">أسفل اليمين</div>
w3-display-left يضع العنصر في المنتصف على اليسار داخل w3-display-container. 
<div class="w3-display-left">الوسط يسار</div>
w3-display-right يضع العنصر في المنتصف على اليمين داخل w3-display-container. 
<div class="w3-display-right">الوسط يمين</div>
w3-display-middle يضع العنصر في المنتصف تماماً داخل w3-display-container. 
<div class="w3-display-middle">منتصف</div>
w3-display-topmiddle يضع العنصر في المنتصف العلوي داخل w3-display-container. 
<div class="w3-display-topmiddle">أعلى المنتصف</div>
w3-display-bottommiddle يضع العنصر في المنتصف السفلي داخل w3-display-container. 
<div class="w3-display-bottommiddle">أسفل المنتصف</div>
w3-display-hover يظهر العنصر فقط عند التمرير فوق w3-display-container. 
<div class="w3-display-hover">يظهر عند التمرير</div>
w3-display-position يحدد موضع العنصر داخل w3-display-container باستخدام الإحداثيات. 
<div class="w3-display-position" style="top:50px;left:20px;">موضع مخصص</div>
w3-note تنشئ لوحة ملاحظة بمظهر مميز. مفيدة للنصائح والإضافات. 
<div class="w3-panel w3-note">
  <p>ملاحظة: هذه معلومات إضافية مهمة.</p>
</div>
w3-code تنشئ لوحة لعرض الأكواد بنمط مميز مع خلفية رمادية. 
<div class="w3-code htmlHigh">
  &lt;div&gt;هذا كود HTML&lt;/div&gt;
</div>
w3-example تنشئ قسم مثال مع خلفية وحدود مميزة. 
<div class="w3-example">
  <h3>مثال</h3>
  <p>هذا مثال عملي.</p>
</div>

Pagination

31 عنصر
الاسم الوصف مثال
w3-pagination ينشئ عنصر ترقيم الصفحات الأساسي. 
<div class="w3-pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</div>
w3-pagination w3-border ترقيم صفحات بحدود حوله. 
<div class="w3-pagination w3-border">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</div>
w3-pagination w3-round ترقيم صفحات بزوايا مستديرة. 
<div class="w3-pagination w3-round">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</div>
w3-pagination w3-card ترقيم صفحات بتصميم البطاقة. 
<div class="w3-pagination w3-card">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</div>
w3-pagination w3-blue ترقيم صفحات باللون الأزرق. 
<div class="w3-pagination w3-blue">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</div>
w3-pagination w3-red ترقيم صفحات باللون الأحمر. 
<div class="w3-pagination w3-red">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</div>
w3-pagination w3-green ترقيم صفحات باللون الأخضر. 
<div class="w3-pagination w3-green">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</div>
w3-pagination w3-yellow ترقيم صفحات باللون الأصفر. 
<div class="w3-pagination w3-yellow">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</div>
w3-pagination w3-black ترقيم صفحات باللون الأسود. 
<div class="w3-pagination w3-black">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</div>
w3-pagination w3-white ترقيم صفحات باللون الأبيض. 
<div class="w3-pagination w3-white w3-border">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</div>
w3-pagination w3-center ترقيم صفحات متمركز في الوسط. 
<div class="w3-pagination w3-center">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</div>
w3-pagination w3-right ترقيم صفحات متمركز على اليمين. 
<div class="w3-pagination w3-right">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</div>
w3-pagination w3-left ترقيم صفحات متمركز على اليسار. 
<div class="w3-pagination w3-left">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</div>
w3-pagination w3-mobile ترقيم صفحات متجاوب للجوال. 
<div class="w3-pagination w3-mobile">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</div>
w3-pagination a رابط فردي داخل ترقيم الصفحات. 
<a href="#" class="w3-pagination a">1</a>
w3-pagination a w3-border رابط بحدود داخل ترقيم الصفحات. 
<a href="#" class="w3-pagination a w3-border">1</a>
w3-pagination a w3-round رابط بزوايا مستديرة داخل ترقيم الصفحات. 
<a href="#" class="w3-pagination a w3-round">1</a>
w3-pagination a w3-blue رابط أزرق داخل ترقيم الصفحات. 
<a href="#" class="w3-pagination a w3-blue">1</a>
w3-pagination a w3-red رابط أحمر داخل ترقيم الصفحات. 
<a href="#" class="w3-pagination a w3-red">1</a>
w3-pagination a w3-green رابط أخضر داخل ترقيم الصفحات. 
<a href="#" class="w3-pagination a w3-green">1</a>
w3-pagination a w3-yellow رابط أصفر داخل ترقيم الصفحات. 
<a href="#" class="w3-pagination a w3-yellow">1</a>
w3-pagination a w3-black رابط أسود داخل ترقيم الصفحات. 
<a href="#" class="w3-pagination a w3-black">1</a>
w3-pagination a w3-white رابط أبيض داخل ترقيم الصفحات. 
<a href="#" class="w3-pagination a w3-white w3-border">1</a>
w3-pagination a w3-hover-blue رابط يتحول إلى أزرق عند التمرير. 
<a href="#" class="w3-pagination a w3-hover-blue">1</a>
w3-pagination a w3-hover-red رابط يتحول إلى أحمر عند التمرير. 
<a href="#" class="w3-pagination a w3-hover-red">1</a>
w3-pagination a w3-hover-green رابط يتحول إلى أخضر عند التمرير. 
<a href="#" class="w3-pagination a w3-hover-green">1</a>
w3-pagination a w3-hover-yellow رابط يتحول إلى أصفر عند التمرير. 
<a href="#" class="w3-pagination a w3-hover-yellow">1</a>
w3-pagination a w3-hover-black رابط يتحول إلى أسود عند التمرير. 
<a href="#" class="w3-pagination a w3-hover-black">1</a>
w3-pagination a w3-hover-white رابط يتحول إلى أبيض عند التمرير. 
<a href="#" class="w3-pagination a w3-hover-white">1</a>
w3-pagination a w3-disabled رابط معطل في ترقيم الصفحات. 
<a href="#" class="w3-pagination a w3-disabled">1</a>
w3-pagination a w3-active رابط نشط في ترقيم الصفحات. 
<a href="#" class="w3-pagination a w3-active">1</a>

Accordions

15 عنصر
الاسم الوصف مثال
w3-accordion ينشئ حاوية للأكورديون (قائمة قابلة للطي). 
<div class="w3-accordion">
  <button onclick="accordionFunction('section1')" class="w3-button w3-block w3-left-align">
    القسم 1
  </button>
  <div id="section1" class="w3-accordion-content w3-container">
    <p>محتوى القسم 1</p>
  </div>
</div>
w3-accordion-content يحوي محتوى القسم القابل للطي في الأكورديون. 
<div class="w3-accordion-content w3-container">
  <p>محتوى قابل للطي</p>
</div>
w3-accordion w3-border أكورديون بحدود حوله. 
<div class="w3-accordion w3-border">
  <button onclick="accordionFunction('section1')" class="w3-button w3-block w3-left-align">
    قسم بحدود
  </button>
  <div id="section1" class="w3-accordion-content w3-container">
    <p>محتوى مع حدود</p>
  </div>
</div>
w3-accordion w3-round أكورديون بزوايا مستديرة. 
<div class="w3-accordion w3-round">
  <button onclick="accordionFunction('section1')" class="w3-button w3-block w3-left-align">
    قسم مستدير
  </button>
  <div id="section1" class="w3-accordion-content w3-container">
    <p>محتوى مستدير</p>
  </div>
</div>
w3-accordion w3-card أكورديون بتصميم البطاقة (بظل). 
<div class="w3-accordion w3-card">
  <button onclick="accordionFunction('section1')" class="w3-button w3-block w3-left-align">
    قسم بطاقة
  </button>
  <div id="section1" class="w3-accordion-content w3-container">
    <p>محتوى بطاقة</p>
  </div>
</div>
w3-accordion w3-blue أكورديون باللون الأزرق. 
<div class="w3-accordion w3-blue">
  <button onclick="accordionFunction('section1')" class="w3-button w3-block w3-left-align">
    قسم أزرق
  </button>
  <div id="section1" class="w3-accordion-content w3-container">
    <p>محتوى أزرق</p>
  </div>
</div>
w3-accordion w3-red أكورديون باللون الأحمر. 
<div class="w3-accordion w3-red">
  <button onclick="accordionFunction('section1')" class="w3-button w3-block w3-left-align">
    قسم أحمر
  </button>
  <div id="section1" class="w3-accordion-content w3-container">
    <p>محتوى أحمر</p>
  </div>
</div>
w3-accordion w3-green أكورديون باللون الأخضر. 
<div class="w3-accordion w3-green">
  <button onclick="accordionFunction('section1')" class="w3-button w3-block w3-left-align">
    قسم أخضر
  </button>
  <div id="section1" class="w3-accordion-content w3-container">
    <p>محتوى أخضر</p>
  </div>
</div>
w3-accordion w3-yellow أكورديون باللون الأصفر. 
<div class="w3-accordion w3-yellow">
  <button onclick="accordionFunction('section1')" class="w3-button w3-block w3-left-align">
    قسم أصفر
  </button>
  <div id="section1" class="w3-accordion-content w3-container">
    <p>محتوى أصفر</p>
  </div>
</div>
w3-accordion-content w3-pale-blue محتوى الأكورديون بخلفية زرقاء باهتة. 
<div class="w3-accordion-content w3-pale-blue w3-container">
  <p>محتوى بخلفية زرقاء باهتة</p>
</div>
w3-accordion-content w3-pale-red محتوى الأكورديون بخلفية حمراء باهتة. 
<div class="w3-accordion-content w3-pale-red w3-container">
  <p>محتوى بخلفية حمراء باهتة</p>
</div>
w3-accordion-content w3-pale-green محتوى الأكورديون بخلفية خضراء باهتة. 
<div class="w3-accordion-content w3-pale-green w3-container">
  <p>محتوى بخلفية خضراء باهتة</p>
</div>
w3-accordion-content w3-pale-yellow محتوى الأكورديون بخلفية صفراء باهتة. 
<div class="w3-accordion-content w3-pale-yellow w3-container">
  <p>محتوى بخلفية صفراء باهتة</p>
</div>
w3-accordion w3-hover-shadow أكورديون يظهر له ظل عند التمرير. 
<div class="w3-accordion w3-hover-shadow">
  <button onclick="accordionFunction('section1')" class="w3-button w3-block w3-left-align">
    قسم بظل عند التمرير
  </button>
  <div id="section1" class="w3-accordion-content w3-container">
    <p>محتوى بظل عند التمرير</p>
  </div>
</div>
w3-accordion w3-mobile أكورديون متجاوب للجوال. 
<div class="w3-accordion w3-mobile">
  <button onclick="accordionFunction('section1')" class="w3-button w3-block w3-left-align">
    قسم متجاوب
  </button>
  <div id="section1" class="w3-accordion-content w3-container">
    <p>محتوى متجاوب</p>
  </div>
</div>

Alerts

20 عنصر
الاسم الوصف مثال
w3-panel w3-red تنبيه خطر/خطأ بلون أحمر. 
<div class="w3-panel w3-red">
  <h3>تحذير!</h3>
  <p>هذا تنبيه خطر بلون أحمر.</p>
</div>
w3-panel w3-green تنبيه نجاح بلون أخضر. 
<div class="w3-panel w3-green">
  <h3>نجاح!</h3>
  <p>هذا تنبيه نجاح بلون أخضر.</p>
</div>
w3-panel w3-blue تنبيه معلومات بلون أزرق. 
<div class="w3-panel w3-blue">
  <h3>معلومات!</h3>
  <p>هذا تنبيه معلومات بلون أزرق.</p>
</div>
w3-panel w3-yellow تنبيه تحذير بلون أصفر. 
<div class="w3-panel w3-yellow">
  <h3>انتباه!</h3>
  <p>هذا تنبيه تحذير بلون أصفر.</p>
</div>
w3-panel w3-orange تنبيه مهم بلون برتقالي. 
<div class="w3-panel w3-orange">
  <h3>مهم!</h3>
  <p>هذا تنبيه مهم بلون برتقالي.</p>
</div>
w3-panel w3-pale-red تنبيه خطر بخلفية حمراء باهتة. 
<div class="w3-panel w3-pale-red">
  <h3>تحذير!</h3>
  <p>هذا تنبيه خطر بخلفية حمراء باهتة.</p>
</div>
w3-panel w3-pale-green تنبيه نجاح بخلفية خضراء باهتة. 
<div class="w3-panel w3-pale-green">
  <h3>نجاح!</h3>
  <p>هذا تنبيه نجاح بخلفية خضراء باهتة.</p>
</div>
w3-panel w3-pale-blue تنبيه معلومات بخلفية زرقاء باهتة. 
<div class="w3-panel w3-pale-blue">
  <h3>معلومات!</h3>
  <p>هذا تنبيه معلومات بخلفية زرقاء باهتة.</p>
</div>
w3-panel w3-pale-yellow تنبيه تحذير بخلفية صفراء باهتة. 
<div class="w3-panel w3-pale-yellow">
  <h3>انتباه!</h3>
  <p>هذا تنبيه تحذير بخلفية صفراء باهتة.</p>
</div>
w3-panel w3-leftbar w3-border-red تنبيه بشريط أيسر أحمر. 
<div class="w3-panel w3-leftbar w3-border-red">
  <h3>تحذير!</h3>
  <p>هذا تنبيه بشريط أيسر أحمر.</p>
</div>
w3-panel w3-leftbar w3-border-green تنبيه بشريط أيسر أخضر. 
<div class="w3-panel w3-leftbar w3-border-green">
  <h3>نجاح!</h3>
  <p>هذا تنبيه بشريط أيسر أخضر.</p>
</div>
w3-panel w3-leftbar w3-border-blue تنبيه بشريط أيسر أزرق. 
<div class="w3-panel w3-leftbar w3-border-blue">
  <h3>معلومات!</h3>
  <p>هذا تنبيه بشريط أيسر أزرق.</p>
</div>
w3-panel w3-leftbar w3-border-yellow تنبيه بشريط أيسر أصفر. 
<div class="w3-panel w3-leftbar w3-border-yellow">
  <h3>انتباه!</h3>
  <p>هذا تنبيه بشريط أيسر أصفر.</p>
</div>
w3-panel w3-topbar w3-bottombar w3-border-red تنبيه بشريط علوي وسفلي أحمر. 
<div class="w3-panel w3-topbar w3-bottombar w3-border-red">
  <h3>تحذير!</h3>
  <p>هذا تنبيه بشريط علوي وسفلي أحمر.</p>
</div>
w3-panel w3-round تنبيه بزوايا مستديرة. 
<div class="w3-panel w3-round w3-blue">
  <h3>معلومات!</h3>
  <p>هذا تنبيه بزوايا مستديرة.</p>
</div>
w3-panel w3-round-large تنبيه بزوايا مستديرة كبيرة. 
<div class="w3-panel w3-round-large w3-green">
  <h3>نجاح!</h3>
  <p>هذا تنبيه بزوايا مستديرة كبيرة.</p>
</div>
w3-panel w3-card تنبيه بتأثير البطاقة (بظل). 
<div class="w3-panel w3-card w3-yellow">
  <h3>انتباه!</h3>
  <p>هذا تنبيه بتأثير البطاقة.</p>
</div>
w3-panel w3-card-4 تنبيه بتأثير البطاقة بظل أكبر. 
<div class="w3-panel w3-card-4 w3-red">
  <h3>تحذير!</h3>
  <p>هذا تنبيه بتأثير البطاقة بظل أكبر.</p>
</div>
w3-panel w3-display-container تنبيه مع حاوية عرض للعناصر الداخلية. 
<div class="w3-panel w3-display-container w3-blue">
  <span onclick="this.parentElement.style.display='none'" class="w3-button w3-display-topright">×</span>
  <h3>معلومات!</h3>
  <p>هذا تنبيه مع زر إغلاق.</p>
</div>
w3-panel w3-hover-shadow تنبيه يظهر له ظل عند التمرير. 
<div class="w3-panel w3-hover-shadow w3-green">
  <h3>نجاح!</h3>
  <p>هذا تنبيه يظهر له ظل عند التمرير.</p>
</div>

Animations

26 عنصر
الاسم الوصف مثال
w3-animate-opacity يضيف تأثير تحريك للشفافية (الظهور التدريجي). 
<div class="w3-animate-opacity w3-padding">عنصر يظهر تدريجياً</div>
w3-animate-top ينزلق العنصر من الأعلى إلى موضعه. 
<div class="w3-animate-top w3-padding">عنصر ينزلق من الأعلى</div>
w3-animate-bottom ينزلق العنصر من الأسفل إلى موضعه. 
<div class="w3-animate-bottom w3-padding">عنصر ينزلق من الأسفل</div>
w3-animate-left ينزلق العنصر من اليسار إلى موضعه. 
<div class="w3-animate-left w3-padding">عنصر ينزلق من اليسار</div>
w3-animate-right ينزلق العنصر من اليمين إلى موضعه. 
<div class="w3-animate-right w3-padding">عنصر ينزلق من اليمين</div>
w3-animate-zoom يكبر العنصر من نقطة المركز. 
<div class="w3-animate-zoom w3-padding">عنصر يتكبير من المركز</div>
w3-animate-fading يضيف تأثير تدرج في الظهور والاختفاء. 
<div class="w3-animate-fading w3-padding">عنصر بتأثير تدرج</div>
w3-spin يدور العنصر بشكل مستمر. 
<div class="w3-spin w3-padding">⚪</div>
w3-animate-input يضيف تأثير تحريك عند التركيز على حقل الإدخال. 
<input class="w3-animate-input" type="text" placeholder="اضغط هنا لرؤية التأثير">
w3-opacity يجعل العنصر شفافاً بنسبة 60%. 
<div class="w3-opacity w3-padding">عنصر شفاف</div>
w3-opacity-min يجعل العنصر شفافاً بنسبة 75%. 
<div class="w3-opacity-min w3-padding">عنصر شفاف قليلاً</div>
w3-opacity-max يجعل العنصر شفافاً بنسبة 25%. 
<div class="w3-opacity-max w3-padding">عنصر شفاف جداً</div>
w3-hover-opacity يجعل العنصر شفافاً عند التمرير فوقه. 
<div class="w3-hover-opacity w3-padding">مرر فوقي للشفافية</div>
w3-hover-opacity-off يزيل الشفافية عند التمرير فوقه. 
<div class="w3-hover-opacity-off w3-padding">مرر فوقي لإزالة الشفافية</div>
w3-sepia يحول العنصر إلى لون سيبيا (بني داكن). 
<div class="w3-sepia w3-padding">عنصر بلون سيبيا</div>
w3-hover-sepia يحول العنصر إلى لون سيبيا عند التمرير. 
<div class="w3-hover-sepia w3-padding">مرر فوقي للتحول إلى سيبيا</div>
w3-grayscale يحول العنصر إلى تدرج الرمادي. 
<div class="w3-grayscale w3-padding">عنصر رمادي</div>
w3-hover-grayscale يحول العنصر إلى تدرج الرمادي عند التمرير. 
<div class="w3-hover-grayscale w3-padding">مرر فوقي للتحول إلى رمادي</div>
w3-animate-border يضيف تأثير تحريك للحدود. 
<div class="w3-animate-border w3-padding w3-border">حدود متحركة</div>
w3-animate-shadow يضيف تأثير تحريك للظل. 
<div class="w3-animate-shadow w3-padding w3-card">ظل متحرك</div>
w3-animate-color يضيف تأثير تحريك لتغير اللون. 
<div class="w3-animate-color w3-padding w3-blue">تغير لون متحرك</div>
w3-animate-pulse يضيف تأثير نبض للعنصر. 
<div class="w3-animate-pulse w3-padding">عنصر نابض</div>
w3-animate-bounce يضيف تأثير ارتداد للعنصر. 
<div class="w3-animate-bounce w3-padding">عنصر يرتد</div>
w3-animate-flip يقلب العنصر بشكل أفقي. 
<div class="w3-animate-flip w3-padding">عنصر مقلوب</div>
w3-animate-rotate يدور العنصر بزاوية محددة. 
<div class="w3-animate-rotate w3-padding">عنصر دوار</div>
w3-animate-slide ينزلق العنصر من الجانب. 
<div class="w3-animate-slide w3-padding">عنصر منزلق</div>

Badges

35 عنصر
الاسم الوصف مثال
w3-badge ينشئ شارة (بادج) أساسية بدائرية صغيرة. 
<span class="w3-badge">5</span>
w3-badge w3-round ينشئ شارة بدائرية صغيرة بزوايا مستديرة. 
<span class="w3-badge w3-round">5</span>
w3-badge w3-round-large ينشئ شارة بدائرية صغيرة بزوايا مستديرة كبيرة. 
<span class="w3-badge w3-round-large">5</span>
w3-badge w3-circle ينشئ شارة بدائرية كاملة. 
<span class="w3-badge w3-circle">5</span>
w3-badge w3-red ينشئ شارة حمراء. 
<span class="w3-badge w3-red">5</span>
w3-badge w3-blue ينشئ شارة زرقاء. 
<span class="w3-badge w3-blue">5</span>
w3-badge w3-green ينشئ شارة خضراء. 
<span class="w3-badge w3-green">5</span>
w3-badge w3-yellow ينشئ شارة صفراء. 
<span class="w3-badge w3-yellow">5</span>
w3-badge w3-black ينشئ شارة سوداء. 
<span class="w3-badge w3-black">5</span>
w3-badge w3-white ينشئ شارة بيضاء. 
<span class="w3-badge w3-white w3-border">5</span>
w3-badge w3-pink ينشئ شارة وردية. 
<span class="w3-badge w3-pink">5</span>
w3-badge w3-purple ينشئ شارة بنفسجية. 
<span class="w3-badge w3-purple">5</span>
w3-badge w3-orange ينشئ شارة برتقالية. 
<span class="w3-badge w3-orange">5</span>
w3-badge w3-teal ينشئ شارة بلون teal. 
<span class="w3-badge w3-teal">5</span>
w3-badge w3-khaki ينشئ شارة بلون كاكي. 
<span class="w3-badge w3-khaki">5</span>
w3-badge w3-small ينشئ شارة صغيرة الحجم. 
<span class="w3-badge w3-small">5</span>
w3-badge w3-large ينشئ شارة كبيرة الحجم. 
<span class="w3-badge w3-large">5</span>
w3-badge w3-xlarge ينشئ شارة كبيرة جداً في الحجم. 
<span class="w3-badge w3-xlarge">5</span>
w3-badge w3-xxlarge ينشئ شارة ضخمة الحجم. 
<span class="w3-badge w3-xxlarge">5</span>
w3-badge w3-border ينشئ شارة بحدود. 
<span class="w3-badge w3-border">5</span>
w3-badge w3-hover-shadow ينشئ شارة تظهر لها ظل عند التمرير. 
<span class="w3-badge w3-hover-shadow">5</span>
w3-badge w3-hover-opacity ينشئ شارة تصبح شفافة عند التمرير. 
<span class="w3-badge w3-hover-opacity">5</span>
w3-badge w3-hover-red ينشئ شارة تتغير إلى اللون الأحمر عند التمرير. 
<span class="w3-badge w3-hover-red">5</span>
w3-badge w3-hover-blue ينشئ شارة تتغير إلى اللون الأزرق عند التمرير. 
<span class="w3-badge w3-hover-blue">5</span>
w3-badge w3-hover-green ينشئ شارة تتغير إلى اللون الأخضر عند التمرير. 
<span class="w3-badge w3-hover-green">5</span>
w3-badge w3-right ينشئ شارة بمحاذاة إلى اليمين. 
<div class="w3-container">
  <span class="w3-badge w3-right">5</span>
  <p>نص مع شارة على اليمين</p>
</div>
w3-badge w3-left ينشئ شارة بمحاذاة إلى اليسار. 
<div class="w3-container">
  <span class="w3-badge w3-left">5</span>
  <p>نص مع شارة على اليسار</p>
</div>
w3-badge w3-top ينشئ شارة بمحاذاة إلى الأعلى. 
<div class="w3-container w3-display-container">
  <span class="w3-badge w3-top">5</span>
  <p>نص مع شارة في الأعلى</p>
</div>
w3-badge w3-bottom ينشئ شارة بمحاذاة إلى الأسفل. 
<div class="w3-container w3-display-container">
  <span class="w3-badge w3-bottom">5</span>
  <p>نص مع شارة في الأسفل</p>
</div>
w3-badge w3-margin ينشئ شارة بهامش حولها. 
<span class="w3-badge w3-margin">5</span>
w3-badge w3-padding ينشئ شارة بحشو داخلي. 
<span class="w3-badge w3-padding">5</span>
w3-badge w3-tag ينشئ علامة (tag) بدلاً من شارة دائرية. 
<span class="w3-tag">علامة</span>
w3-badge w3-tag w3-red ينشئ علامة حمراء. 
<span class="w3-tag w3-red">علامة حمراء</span>
w3-badge w3-tag w3-blue ينشئ علامة زرقاء. 
<span class="w3-tag w3-blue">علامة زرقاء</span>
w3-badge w3-tag w3-green ينشئ علامة خضراء. 
<span class="w3-tag w3-green">علامة خضراء</span>

Bars

27 عنصر
الاسم الوصف مثال
w3-bar ينشئ شريط أفقي لحاوية العناصر. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button">زر 1</button>
  <button class="w3-bar-item w3-button">زر 2</button>
</div>
w3-bar-item عنصر داخل الشريط الأفقي. 
<div class="w3-bar">
  <div class="w3-bar-item">عنصر في الشريط</div>
</div>
w3-bar-block ينشئ شريط عمودي (كتلة عناصر). 
<div class="w3-bar-block">
  <button class="w3-bar-item w3-button">زر 1</button>
  <button class="w3-bar-item w3-button">زر 2</button>
</div>
w3-sidebar ينشئ شريطًا جانبيًا. 
<div class="w3-sidebar w3-bar-block">
  <button class="w3-bar-item w3-button">زر 1</button>
  <button class="w3-bar-item w3-button">زر 2</button>
</div>
w3-navbar ينشئ شريط تنقل أفقي. 
<div class="w3-navbar">
  <a href="#" class="w3-bar-item w3-button">رابط 1</a>
  <a href="#" class="w3-bar-item w3-button">رابط 2</a>
</div>
w3-bar-block w3-card شريط عمودي بتأثير البطاقة. 
<div class="w3-bar-block w3-card">
  <button class="w3-bar-item w3-button">زر 1</button>
  <button class="w3-bar-item w3-button">زر 2</button>
</div>
w3-bar-block w3-border شريط عمودي بحدود. 
<div class="w3-bar-block w3-border">
  <button class="w3-bar-item w3-button">زر 1</button>
  <button class="w3-bar-item w3-button">زر 2</button>
</div>
w3-bar-block w3-round شريط عمودي بزوايا مستديرة. 
<div class="w3-bar-block w3-round">
  <button class="w3-bar-item w3-button">زر 1</button>
  <button class="w3-bar-item w3-button">زر 2</button>
</div>
w3-bar-item w3-button زر داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button">زر في الشريط</button>
</div>
w3-bar-item w3-input حقل إدخال داخل الشريط. 
<div class="w3-bar">
  <input class="w3-bar-item w3-input" type="text" placeholder="ابحث...">
</div>
w3-bar-item w3-dropdown-hover قائمة منسدلة داخل الشريط. 
<div class="w3-bar">
  <div class="w3-bar-item w3-dropdown-hover">
    <button class="w3-button">القائمة</button>
    <div class="w3-dropdown-content w3-bar-block">
      <a href="#" class="w3-bar-item w3-button">خيار 1</a>
      <a href="#" class="w3-bar-item w3-button">خيار 2</a>
    </div>
  </div>
</div>
w3-bar-item w3-right عنصر بمحاذاة لليمين داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-right">زر على اليمين</button>
</div>
w3-bar-item w3-left عنصر بمحاذاة لليسار داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-left">زر على اليسار</button>
</div>
w3-bar-item w3-center عنصر بمحاذاة للوسط داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-center">زر في الوسط</button>
</div>
w3-bar-item w3-mobile عنصر متجاوب داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-mobile">زر متجاوب</button>
</div>
w3-bar-item w3-hide-small إخفاء العنصر على الشاشات الصغيرة. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-hide-small">مخفي على الجوال</button>
</div>
w3-bar-item w3-round عنصر بزوايا مستديرة داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-round">زر مستدير</button>
</div>
w3-bar-item w3-circle عنصر دائري داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-circle">🔘</button>
</div>
w3-bar-item w3-border عنصر بحدود داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-border">زر بحدود</button>
</div>
w3-bar-item w3-padding عنصر بحشو داخلي داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-padding">زر بحشو</button>
</div>
w3-bar-item w3-margin عنصر بهامش خارجي داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-margin">زر بهامش</button>
</div>
w3-bar-item w3-red عنصر أحمر داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-red">زر أحمر</button>
</div>
w3-bar-item w3-blue عنصر أزرق داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-blue">زر أزرق</button>
</div>
w3-bar-item w3-green عنصر أخضر داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-green">زر أخضر</button>
</div>
w3-bar-item w3-yellow عنصر أصفر داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-yellow">زر أصفر</button>
</div>
w3-bar-item w3-black عنصر أسود داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-black">زر أسود</button>
</div>
w3-bar-item w3-white عنصر أبيض داخل الشريط. 
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-white w3-border">زر أبيض</button>
</div>

Borders

51 عنصر
الاسم الوصف مثال
w3-border يضيف حدودًا أساسية رمادية حول العنصر. 
<div class="w3-border w3-padding">عنصر بحدود أساسية</div>
w3-border-0 يزيل جميع الحدود من العنصر. 
<div class="w3-border-0 w3-padding">عنصر بدون حدود</div>
w3-border-top يضيف حدودًا علوية فقط للعنصر. 
<div class="w3-border-top w3-padding">عنصر بحدود علوية فقط</div>
w3-border-right يضيف حدودًا يمينية فقط للعنصر. 
<div class="w3-border-right w3-padding">عنصر بحدود يمينية فقط</div>
w3-border-bottom يضيف حدودًا سفلية فقط للعنصر. 
<div class="w3-border-bottom w3-padding">عنصر بحدود سفلية فقط</div>
w3-border-left يضيف حدودًا يسارية فقط للعنصر. 
<div class="w3-border-left w3-padding">عنصر بحدود يسارية فقط</div>
w3-border-red يغير لون الحدود إلى أحمر. 
<div class="w3-border w3-border-red w3-padding">حدود حمراء</div>
w3-border-pink يغير لون الحدود إلى وردي. 
<div class="w3-border w3-border-pink w3-padding">حدود وردية</div>
w3-border-purple يغير لون الحدود إلى بنفسجي. 
<div class="w3-border w3-border-purple w3-padding">حدود بنفسجية</div>
w3-border-deep-purple يغير لون الحدود إلى بنفسجي غامق. 
<div class="w3-border w3-border-deep-purple w3-padding">حدود بنفسجية غامقة</div>
w3-border-indigo يغير لون الحدود إلى نيلي (إنديجو). 
<div class="w3-border w3-border-indigo w3-padding">حدود نيلي</div>
w3-border-blue يغير لون الحدود إلى أزرق. 
<div class="w3-border w3-border-blue w3-padding">حدود زرقاء</div>
w3-border-light-blue يغير لون الحدود إلى أزرق فاتح. 
<div class="w3-border w3-border-light-blue w3-padding">حدود زرقاء فاتحة</div>
w3-border-cyan يغير لون الحدود إلى سيان. 
<div class="w3-border w3-border-cyan w3-padding">حدود سيان</div>
w3-border-aqua يغير لون الحدود إلى aqua. 
<div class="w3-border w3-border-aqua w3-padding">حدود aqua</div>
w3-border-teal يغير لون الحدود إلى teal (أزرق-أخضر). 
<div class="w3-border w3-border-teal w3-padding">حدود teal</div>
w3-border-green يغير لون الحدود إلى أخضر. 
<div class="w3-border w3-border-green w3-padding">حدود خضراء</div>
w3-border-light-green يغير لون الحدود إلى أخضر فاتح. 
<div class="w3-border w3-border-light-green w3-padding">حدود خضراء فاتحة</div>
w3-border-lime يغير لون الحدود إلى lime (أخضر مصفر). 
<div class="w3-border w3-border-lime w3-padding">حدود lime</div>
w3-border-sand يغير لون الحدود إلى لون الرمل. 
<div class="w3-border w3-border-sand w3-padding">حدود بلون الرمل</div>
w3-border-khaki يغير لون الحدود إلى كاكي. 
<div class="w3-border w3-border-khaki w3-padding">حدود كاكي</div>
w3-border-yellow يغير لون الحدود إلى أصفر. 
<div class="w3-border w3-border-yellow w3-padding">حدود صفراء</div>
w3-border-amber يغير لون الحدود إلى كهرماني. 
<div class="w3-border w3-border-amber w3-padding">حدود كهرمانية</div>
w3-border-orange يغير لون الحدود إلى برتقالي. 
<div class="w3-border w3-border-orange w3-padding">حدود برتقالية</div>
w3-border-deep-orange يغير لون الحدود إلى برتقالي غامق. 
<div class="w3-border w3-border-deep-orange w3-padding">حدود برتقالية غامقة</div>
w3-border-blue-gray يغير لون الحدود إلى أزرق-رمادي. 
<div class="w3-border w3-border-blue-gray w3-padding">حدود زرقاء رمادية</div>
w3-border-brown يغير لون الحدود إلى بني. 
<div class="w3-border w3-border-brown w3-padding">حدود بنية</div>
w3-border-light-gray يغير لون الحدود إلى رمادي فاتح. 
<div class="w3-border w3-border-light-gray w3-padding">حدود رمادية فاتحة</div>
w3-border-gray يغير لون الحدود إلى رمادي. 
<div class="w3-border w3-border-gray w3-padding">حدود رمادية</div>
w3-border-dark-gray يغير لون الحدود إلى رمادي غامق. 
<div class="w3-border w3-border-dark-gray w3-padding">حدود رمادية غامقة</div>
w3-border-black يغير لون الحدود إلى أسود. 
<div class="w3-border w3-border-black w3-padding">حدود سوداء</div>
w3-border-white يغير لون الحدود إلى أبيض. 
<div class="w3-border w3-border-white w3-padding">حدود بيضاء</div>
w3-border-transparent يجعل الحدود شفافة. 
<div class="w3-border w3-border-transparent w3-padding">حدود شفافة</div>
w3-border-top-0 يزيل الحد العلوي فقط. 
<div class="w3-border w3-border-top-0 w3-padding">حدود بدون الحد العلوي</div>
w3-border-right-0 يزيل الحد اليميني فقط. 
<div class="w3-border w3-border-right-0 w3-padding">حدود بدون الحد اليميني</div>
w3-border-bottom-0 يزيل الحد السفلي فقط. 
<div class="w3-border w3-border-bottom-0 w3-padding">حدود بدون الحد السفلي</div>
w3-border-left-0 يزيل الحد اليساري فقط. 
<div class="w3-border w3-border-left-0 w3-padding">حدود بدون الحد اليساري</div>
w3-bottombar يضيف شريطًا سفليًا فقط (حدود سفلية سميكة). 
<div class="w3-bottombar w3-padding">شريط سفلي سميك</div>
w3-leftbar يضيف شريطًا يساريًا فقط (حدود يسارية سميكة). 
<div class="w3-leftbar w3-padding">شريط يساري سميك</div>
w3-rightbar يضيف شريطًا يمينيًا فقط (حدود يمينية سميكة). 
<div class="w3-rightbar w3-padding">شريط يميني سميك</div>
w3-topbar يضيف شريطًا علويًا فقط (حدود علوية سميكة). 
<div class="w3-topbar w3-padding">شريط علوي سميك</div>
w3-round يجعل زوايا العنصر مستديرة. 
<div class="w3-border w3-round w3-padding">زوايا مستديرة</div>
w3-round-small يجعل زوايا العنصر مستديرة بشكل صغير. 
<div class="w3-border w3-round-small w3-padding">زوايا مستديرة صغيرة</div>
w3-round-medium يجعل زوايا العنصر مستديرة بشكل متوسط. 
<div class="w3-border w3-round-medium w3-padding">زوايا مستديرة متوسطة</div>
w3-round-large يجعل زوايا العنصر مستديرة بشكل كبير. 
<div class="w3-border w3-round-large w3-padding">زوايا مستديرة كبيرة</div>
w3-round-xlarge يجعل زوايا العنصر مستديرة بشكل كبير جداً. 
<div class="w3-border w3-round-xlarge w3-padding">زوايا مستديرة كبيرة جداً</div>
w3-round-xxlarge يجعل زوايا العنصر مستديرة بشكل دائري كامل. 
<div class="w3-border w3-round-xxlarge w3-padding">زوايا مستديرة بشكل دائري</div>
w3-circle يحول العنصر إلى شكل دائري كامل. 
<div class="w3-border w3-circle w3-padding" style="width:100px;height:100px;">دائري</div>
w3-border w3-border-red w3-round جمع بين حدود حمراء وزوايا مستديرة. 
<div class="w3-border w3-border-red w3-round w3-padding">حدود حمراء مستديرة</div>
w3-topbar w3-bottombar w3-border-blue جمع بين شريط علوي وسفلي أزرق. 
<div class="w3-topbar w3-bottombar w3-border-blue w3-padding">شريط علوي وسفلي أزرق</div>
w3-leftbar w3-border-green w3-pale-green جمع بين شريط يساري أخضر وخلفية خضراء باهتة. 
<div class="w3-leftbar w3-border-green w3-pale-green w3-padding">شريط يساري مع خلفية مطابقة</div>

Buttons

29 عنصر
الاسم الوصف مثال
w3-button ينشئ زرًا أساسيًا بتصميم W3.CSS. 
<button class="w3-button w3-blue">زر أساسي</button>
w3-btn مرادف لـ w3-button (ينشئ زرًا أساسيًا). 
<button class="w3-btn w3-green">زر أساسي</button>
w3-block يجعل الزر يأخذ العرض الكامل (100%). 
<button class="w3-button w3-block w3-red">زر كامل العرض</button>
w3-circle يحول الزر إلى شكل دائري. 
<button class="w3-button w3-circle w3-blue" style="width:50px;height:50px;">د</button>
w3-round يجعل زوايا الزر مستديرة. 
<button class="w3-button w3-round w3-green">زر مستدير</button>
w3-round-large يجعل زوايا الزر مستديرة بشكل كبير. 
<button class="w3-button w3-round-large w3-teal">زر مستدير كبير</button>
w3-round-xlarge يجعل زوايا الزر مستديرة بشكل كبير جداً. 
<button class="w3-button w3-round-xlarge w3-orange">زر مستدير جداً</button>
w3-round-xxlarge يجعل زوايا الزر مستديرة بشكل دائري كامل. 
<button class="w3-button w3-round-xxlarge w3-purple">زر دائري</button>
w3-border يضيف حدودًا للزر. 
<button class="w3-button w3-border w3-border-blue">زر بحدود</button>
w3-hover-shadow يضيف ظلًا عند التمرير فوق الزر. 
<button class="w3-button w3-hover-shadow w3-blue">زر بظل عند التمرير</button>
w3-hover-opacity يجعل الزر شفافًا عند التمرير فوقه. 
<button class="w3-button w3-hover-opacity w3-green">زر شفاف عند التمرير</button>
w3-hover-red يغير لون الزر إلى أحمر عند التمرير. 
<button class="w3-button w3-hover-red w3-blue">أحمر عند التمرير</button>
w3-hover-blue يغير لون الزر إلى أزرق عند التمرير. 
<button class="w3-button w3-hover-blue w3-green">أزرق عند التمرير</button>
w3-hover-green يغير لون الزر إلى أخضر عند التمرير. 
<button class="w3-button w3-hover-green w3-yellow">أخضر عند التمرير</button>
w3-hover-yellow يغير لون الزر إلى أصفر عند التمرير. 
<button class="w3-button w3-hover-yellow w3-gray">أصفر عند التمرير</button>
w3-hover-black يغير لون الزر إلى أسود عند التمرير. 
<button class="w3-button w3-hover-black w3-white">أسود عند التمرير</button>
w3-hover-white يغير لون الزر إلى أبيض عند التمرير. 
<button class="w3-button w3-hover-white w3-black">أبيض عند التمرير</button>
w3-disabled يعطل الزر ويجعله غير قابل للنقر. 
<button class="w3-button w3-disabled w3-gray">زر معطل</button>
w3-button w3-red زر بلون أحمر. 
<button class="w3-button w3-red">زر أحمر</button>
w3-button w3-blue زر بلون أزرق. 
<button class="w3-button w3-blue">زر أزرق</button>
w3-button w3-green زر بلون أخضر. 
<button class="w3-button w3-green">زر أخضر</button>
w3-button w3-yellow زر بلون أصفر. 
<button class="w3-button w3-yellow">زر أصفر</button>
w3-button w3-black زر بلون أسود. 
<button class="w3-button w3-black">زر أسود</button>
w3-button w3-white زر بلون أبيض. 
<button class="w3-button w3-white w3-border">زر أبيض</button>
w3-button w3-pink زر بلون وردي. 
<button class="w3-button w3-pink">زر وردي</button>
w3-button w3-purple زر بلون بنفسجي. 
<button class="w3-button w3-purple">زر بنفسجي</button>
w3-button w3-orange زر بلون برتقالي. 
<button class="w3-button w3-orange">زر برتقالي</button>
w3-button w3-teal زر بلون teal. 
<button class="w3-button w3-teal">زر teal</button>
w3-button w3-khaki زر بلون كاكي. 
<button class="w3-button w3-khaki">زر كاكي</button>

Cards

28 عنصر
الاسم الوصف مثال
w3-card تنشئ بطاقة أساسية بظل خفيف (2px) وحواف دائرية قليلاً. 
<div class="w3-card w3-padding">
  <p>بطاقة أساسية</p>
</div>
w3-card-2 تنشئ بطاقة بظل متوسط (4px) - نفس تأثير w3-card. 
<div class="w3-card-2 w3-padding">
  <p>بطاقة بظل متوسط</p>
</div>
w3-card-4 تنشئ بطاقة بظل أكثر وضوحاً (8px). 
<div class="w3-card-4 w3-padding">
  <p>بطاقة بظل أعمق</p>
</div>
w3-card-8 تنشئ بطاقة بظل كبير جداً (16px). 
<div class="w3-card-8 w3-padding">
  <p>بطاقة بظل كبير</p>
</div>
w3-card-12 تنشئ بطاقة بظل كبير جداً (24px). 
<div class="w3-card-12 w3-padding">
  <p>بطاقة بظل كبير جداً</p>
</div>
w3-card-16 تنشئ بطاقة بظل كبير جداً (32px). 
<div class="w3-card-16 w3-padding">
  <p>بطاقة بظل ضخم</p>
</div>
w3-card w3-container جمع بين البطاقة والحاوية لتنسيق أفضل للمحتوى. 
<div class="w3-card w3-container">
  <h3>عنوان البطاقة</h3>
  <p>محتوى البطاقة</p>
</div>
w3-card w3-padding إضافة حواف داخلية للبطاقة لمزيد من التنظيم. 
<div class="w3-card w3-padding">
  <p>بطاقة بحواف داخلية</p>
</div>
w3-card w3-margin إضافة هوامش خارجية للبطاقة للفصل بينها وبين العناصر الأخرى. 
<div class="w3-card w3-margin w3-padding">
  <p>بطاقة بهامش خارجي</p>
</div>
w3-card w3-red بطاقة بلون خلفية أحمر. 
<div class="w3-card w3-red w3-padding">
  <p>بطاقة حمراء</p>
</div>
w3-card w3-blue بطاقة بلون خلفية أزرق. 
<div class="w3-card w3-blue w3-padding">
  <p>بطاقة زرقاء</p>
</div>
w3-card w3-green بطاقة بلون خلفية أخضر. 
<div class="w3-card w3-green w3-padding">
  <p>بطاقة خضراء</p>
</div>
w3-card w3-yellow بطاقة بلون خلفية أصفر. 
<div class="w3-card w3-yellow w3-padding">
  <p>بطاقة صفراء</p>
</div>
w3-card w3-round بطاقة بزوايا مستديرة. 
<div class="w3-card w3-round w3-padding">
  <p>بطاقة بزوايا مستديرة</p>
</div>
w3-card w3-round-large بطاقة بزوايا مستديرة كبيرة. 
<div class="w3-card w3-round-large w3-padding">
  <p>بطاقة بزوايا مستديرة كبيرة</p>
</div>
w3-card w3-round-xlarge بطاقة بزوايا مستديرة كبيرة جداً. 
<div class="w3-card w3-round-xlarge w3-padding">
  <p>بطاقة بزوايا مستديرة كبيرة جداً</p>
</div>
w3-card w3-round-xxlarge بطاقة بزوايا مستديرة ضخمة. 
<div class="w3-card w3-round-xxlarge w3-padding">
  <p>بطاقة بزوايا مستديرة ضخمة</p>
</div>
w3-card w3-circle بطاقة دائرية (تتطلب تحديد عرض وارتفاع متساويين). 
<div class="w3-card w3-circle w3-padding" style="width:120px;height:120px;">
  <p>بطاقة دائرية</p>
</div>
w3-card w3-border w3-border-red بطاقة بحدود حمراء. 
<div class="w3-card w3-border w3-border-red w3-padding">
  <p>بطاقة بحدود حمراء</p>
</div>
w3-card w3-border w3-border-blue بطاقة بحدود زرقاء. 
<div class="w3-card w3-border w3-border-blue w3-padding">
  <p>بطاقة بحدود زرقاء</p>
</div>
w3-card w3-border w3-border-green بطاقة بحدود خضراء. 
<div class="w3-card w3-border w3-border-green w3-padding">
  <p>بطاقة بحدود خضراء</p>
</div>
w3-card w3-hover-shadow بطاقة يظهر لها ظل عند التمرير فوقها. 
<div class="w3-card w3-hover-shadow w3-padding">
  <p>مرر فوقي لرؤية الظل</p>
</div>
w3-card w3-hover-red بطاقة يتغير لونها إلى أحمر عند التمرير فوقها. 
<div class="w3-card w3-hover-red w3-padding">
  <p>مرر فوقي لأصبح حمراء</p>
</div>
w3-card w3-hover-blue بطاقة يتغير لونها إلى أزرق عند التمرير فوقها. 
<div class="w3-card w3-hover-blue w3-padding">
  <p>مرر فوقي لأصبح زرقاء</p>
</div>
w3-card w3-hover-opacity بطاقة تصبح شفافة قليلاً عند التمرير فوقها. 
<div class="w3-card w3-hover-opacity w3-padding">
  <p>مرر فوقي لأصبح شفافة</p>
</div>
w3-card-4 w3-padding w3-red w3-round-large بطاقة متكاملة بلون أحمر، بزوايا مستديرة كبيرة وظل واضح. 
<div class="w3-card-4 w3-padding w3-red w3-round-large">
  <h3>بطاقة متكاملة</h3>
  <p>مثال على بطاقة بمزايا متعددة</p>
</div>
w3-card w3-pale-blue w3-leftbar w3-border-blue بطاقة بأناقة مع شريط أيسر أزرق وخلفية زرقاء باهتة. 
<div class="w3-card w3-pale-blue w3-leftbar w3-border-blue w3-padding">
  <p>بطاقة بتصميم أنيق</p>
</div>
w3-card w3-white w3-hover-shadow بطاقة بيضاء يظهر لها ظل عند التمرير. 
<div class="w3-card w3-white w3-hover-shadow w3-padding">
  <p>بطاقة بيضاء بتأثير ظل عند التمرير</p>
</div>

Studies

6 عنصر
الاسم الوصف مثال
w3-case-responsive موقع تجارة إلكترونية متجاوب بالكامل 
<div class="w3-container">
  <header class="w3-bar w3-white w3-border-bottom">
    <div class="w3-bar-item w3-button w3-hide-medium w3-hide-large" onclick="toggleMenu()">☰</div>
    <a href="#" class="w3-bar-item w3-button w3-text-blue w3-hover-none"><b>متجرنا</b></a>
    <nav class="w3-bar-item w3-right w3-hide-small">
      <a href="#" class="w3-button">المنتجات</a>
      <a href="#" class="w3-button">العروض</a>
      <a href="#" class="w3-button">اتصل بنا</a>
    </nav>
  </header>
  
  <div class="w3-row-padding w3-margin-top">
    <div class="w3-third w3-mobile">
      <div class="w3-card">
        <img src="product1.jpg" style="width:100%">
        <div class="w3-container">
          <h4>منتج مميز</h4>
          <p class="w3-text-green">199 ريال</p>
          <button class="w3-button w3-blue">أضف إلى السلة</button>
        </div>
      </div>
    </div>
    <!-- المزيد من المنتجات -->
  </div>
</div>
w3-case-dashboard لوحة تحكم إدارية حديثة 
<div class="w3-container">
  <div class="w3-row">
    <div class="w3-col m3">
      <div class="w3-sidebar w3-blue w3-bar-block" style="width:200px">
        <h3 class="w3-bar-item">القائمة</h3>
        <a href="#" class="w3-bar-item w3-button">الإحصائيات</a>
        <a href="#" class="w3-bar-item w3-button">المستخدمون</a>
        <a href="#" class="w3-bar-item w3-button">التقارير</a>
      </div>
    </div>
    
    <div class="w3-col m9">
      <div class="w3-row-padding">
        <div class="w3-third">
          <div class="w3-card w3-green w3-text-white w3-padding">
            <h3>125</h3>
            <p>مستخدم نشط</p>
          </div>
        </div>
        <div class="w3-third">
          <div class="w3-card w3-blue w3-text-white w3-padding">
            <h3>1,250</h3>
            <p>طلب هذا الشهر</p>
          </div>
        </div>
        <div class="w3-third">
          <div class="w3-card w3-orange w3-text-white w3-padding">
            <h3>75%</h3>
            <p>معدل النمو</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
w3-case-portfolio portfolio website for creative professional 
<div class="w3-container">
  <div class="w3-display-container w3-text-white">
    <img src="hero-bg.jpg" style="width:100%">
    <div class="w3-display-middle w3-center">
      <h1 class="w3-xxxlarge">محمد أحمد</h1>
      <p class="w3-large">مصمم ومطور ويب</p>
    </div>
  </div>
  
  <div class="w3-content">
    <div class="w3-row w3-margin-top">
      <div class="w3-half">
        <h2>عن أعمالي</h2>
        <p>أعمل كمصمم ويب محترف لأكثر من 5 سنوات</p>
      </div>
      <div class="w3-half">
        <img src="about.jpg" style="width:100%">
      </div>
    </div>
  </div>
</div>
w3-case-blog مدونة عصرية بتصميم نظيف 
<div class="w3-container">
  <div class="w3-content" style="max-width:800px">
    <article class="w3-card w3-margin-bottom">
      <img src="blog1.jpg" style="width:100%">
      <div class="w3-container">
        <h2>عنوان المقال الرئيسي</h2>
        <p class="w3-text-grey">12 يناير 2024 | تقنية</p>
        <p>محتوى المقال يظهر هنا مع تفاصيل كاملة...</p>
        <button class="w3-button w3-blue">اقرأ المزيد</button>
      </div>
    </article>
    
    <div class="w3-row">
      <div class="w3-third">
        <div class="w3-card">
          <img src="blog2.jpg" style="width:100%">
          <div class="w3-container">
            <h4>مقال قصير</h4>
            <p>ملخص المقال هنا</p>
          </div>
        </div>
      </div>
      <!-- المزيد من المقالات -->
    </div>
  </div>
</div>
w3-case-landing صفحة هبوط لمنتج تقني 
<div class="w3-container w3-light-grey">
  <div class="w3-content">
    <div class="w3-row-padding w3-margin-top">
      <div class="w3-half">
        <h1 class="w3-xxxlarge">Product Name</h1>
        <p class="w3-large">الحل الأمثل لمشكلتك</p>
        <ul class="w3-ul">
          <li>ميزة رائعة ١</li>
          <li>ميزة رائعة ٢</li>
          <li>ميزة رائعة ٣</li>
        </ul>
        <button class="w3-button w3-blue w3-large">جربه الآن</button>
      </div>
      <div class="w3-half">
        <img src="product-showcase.png" style="width:100%">
      </div>
    </div>
  </div>
</div>
w3-case-education منصة تعليمية تفاعلية 
<div class="w3-container">
  <div class="w3-row">
    <div class="w3-third">
      <div class="w3-card">
        <div class="w3-container w3-blue">
          <h3>دورة HTML</h3>
        </div>
        <div class="w3-container">
          <p>تعلم أساسيات HTML في 30 يوم</p>
          <div class="w3-progressbar" style="width:75%">75% مكتمل</div>
        </div>
      </div>
    </div>
    
    <div class="w3-third">
      <div class="w3-card">
        <div class="w3-container w3-green">
          <h3>دورة CSS</h3>
        </div>
        <div class="w3-container">
          <p>أتقن CSS خلال 4 أسابيع</p>
          <div class="w3-progressbar" style="width:40%">40% مكتمل</div>
        </div>
      </div>
    </div>
  </div>
</div>

Cells

28 عنصر
الاسم الوصف مثال
w3-cell ينشئ خلية في تخطيط الجدول (تعمل كخلية في جدول CSS). 
<div class="w3-cell">خلية محتوى</div>
w3-cell-row ينشئ صفًا من الخلايا (جميع الخلايا في الصف يكون لها نفس الارتفاع). 
<div class="w3-cell-row">
  <div class="w3-cell">الخلية 1</div>
  <div class="w3-cell">الخلية 2</div>
</div>
w3-cell-top يحاذي محتوى الخلية إلى الأعلى. 
<div class="w3-cell w3-cell-top">محتوى بمحاذاة علوية</div>
w3-cell-middle يحاذي محتوى الخلية إلى المنتصف. 
<div class="w3-cell w3-cell-middle">محتوى بمحاذاة وسطية</div>
w3-cell-bottom يحاذي محتوى الخلية إلى الأسفل. 
<div class="w3-cell w3-cell-bottom">محتوى بمحاذاة سفلية</div>
w3-cell-col ينشئ عمودًا من الخلايا (تعمل كعمود في تخطيط الجدول). 
<div class="w3-cell-col">عمود خلايا</div>
w3-cell w3-border ينشئ خلية بحدود. 
<div class="w3-cell w3-border">خلية بحدود</div>
w3-cell w3-padding ينشئ خلية بحشو داخلي. 
<div class="w3-cell w3-padding">خلية بحشو داخلي</div>
w3-cell w3-margin ينشئ خلية بهامش خارجي. 
<div class="w3-cell w3-margin">خلية بهامش</div>
w3-cell w3-round ينشئ خلية بزوايا مستديرة. 
<div class="w3-cell w3-round">خلية مستديرة</div>
w3-cell w3-blue ينشئ خلية بلون خلفية أزرق. 
<div class="w3-cell w3-blue">خلية زرقاء</div>
w3-cell w3-green ينشئ خلية بلون خلفية أخضر. 
<div class="w3-cell w3-green">خلية خضراء</div>
w3-cell w3-red ينشئ خلية بلون خلفية أحمر. 
<div class="w3-cell w3-red">خلية حمراء</div>
w3-cell w3-yellow ينشئ خلية بلون خلفية أصفر. 
<div class="w3-cell w3-yellow">خلية صفراء</div>
w3-cell w3-pale-blue ينشئ خلية بخلفية زرقاء باهتة. 
<div class="w3-cell w3-pale-blue">خلية زرقاء باهتة</div>
w3-cell w3-pale-green ينشئ خلية بخلفية خضراء باهتة. 
<div class="w3-cell w3-pale-green">خلية خضراء باهتة</div>
w3-cell w3-pale-red ينشئ خلية بخلفية حمراء باهتة. 
<div class="w3-cell w3-pale-red">خلية حمراء باهتة</div>
w3-cell w3-pale-yellow ينشئ خلية بخلفية صفراء باهتة. 
<div class="w3-cell w3-pale-yellow">خلية صفراء باهتة</div>
w3-cell w3-center ينشئ خلية بمحاذاة النص إلى المنتصف. 
<div class="w3-cell w3-center">نص في المنتصف</div>
w3-cell w3-left-align ينشئ خلية بمحاذاة النص إلى اليسار. 
<div class="w3-cell w3-left-align">نص بمحاذاة لليسار</div>
w3-cell w3-right-align ينشئ خلية بمحاذاة النص إلى اليمين. 
<div class="w3-cell w3-right-align">نص بمحاذاة لليمين</div>
w3-cell w3-justify ينشئ خلية بمحاذاة النص بشكل كامل. 
<div class="w3-cell w3-justify">نص بمحاذاة كاملة</div>
w3-cell-row w3-border ينشئ صف خلايا بحدود. 
<div class="w3-cell-row w3-border">
  <div class="w3-cell">خلية 1</div>
  <div class="w3-cell">خلية 2</div>
</div>
w3-cell-row w3-padding ينشئ صف خلايا بحشو داخلي. 
<div class="w3-cell-row w3-padding">
  <div class="w3-cell">خلية 1</div>
  <div class="w3-cell">خلية 2</div>
</div>
w3-cell-row w3-margin ينشئ صف خلايا بهامش خارجي. 
<div class="w3-cell-row w3-margin">
  <div class="w3-cell">خلية 1</div>
  <div class="w3-cell">خلية 2</div>
</div>
w3-cell-row w3-round ينشئ صف خلايا بزوايا مستديرة. 
<div class="w3-cell-row w3-round">
  <div class="w3-cell">خلية 1</div>
  <div class="w3-cell">خلية 2</div>
</div>
w3-cell-row w3-blue ينشئ صف خلايا بلون خلفية أزرق. 
<div class="w3-cell-row w3-blue">
  <div class="w3-cell">خلية 1</div>
  <div class="w3-cell">خلية 2</div>
</div>
w3-cell-row w3-green ينشئ صف خلايا بلون خلفية أخضر. 
<div class="w3-cell-row w3-green">
  <div class="w3-cell">خلية 1</div>
  <div class="w3-cell">خلية 2</div>
</div>

Code

15 عنصر
الاسم الوصف مثال
w3-code عرض كود أساسي مع تنسيق 
<div class="w3-code htmlHigh notranslate">
&lt;div class="w3-container"&gt;
  &lt;p&gt;هذا محتوى عادي&lt;/p&gt;
&lt;/div&gt;
</div>
w3-code عرض كود لغة JavaScript 
<div class="w3-code jsHigh notranslate">
function myFunction() {
  console.log("Hello World!");
  return true;
}
</div>
w3-code عرض كود لغة CSS 
<div class="w3-code cssHigh notranslate">
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}
.container {
  max-width: 1200px;
}
</div>
w3-code عرض كود لغة PHP 
<div class="w3-code phpHigh notranslate">
&lt;?php
  $name = "Ahmed";
  echo "مرحبا " . $name;
?&gt;
</div>
w3-code عرض كود لغة Python 
<div class="w3-code pythonHigh notranslate">
def greet(name):
    print(f"Hello, {name}")

greet("Ali")
</div>
w3-code عرض كود مع أرقام الأسطر 
<div class="w3-code htmlHigh notranslate" style="position:relative">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;صفحتي&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;مرحبا&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</div>
w3-code عرض كود مع زر النسخ 
<div class="w3-code htmlHigh notranslate" style="position:relative">
&lt;button onclick="copyCode()" class="w3-button w3-small w3-green" style="position:absolute;top:0;right:0"&gt;نسخ&lt;/button&gt;
&lt;div&gt;
  &lt;p&gt;مثال كود HTML&lt;/p&gt;
&lt;/div&gt;
</div>
w3-code عرض كود بلون مختلف 
<div class="w3-code htmlHigh notranslate w3-light-grey">
&lt;nav class="w3-bar w3-blue"&gt;
  &lt;a href="#" class="w3-bar-item w3-button"&gt;الصفحة الرئيسية&lt;/a&gt;
&lt;/nav&gt;
</div>
w3-code عرض كود مع التمييز اللوني لل syntax 
<div class="w3-code notranslate">
<span style="color:green">&lt;!-- هذا تعليق في HTML --&gt;</span>
<span style="color:blue">&lt;div</span> <span style="color:red">class</span>=<span style="color:purple">&quot;container&quot;</span><span style="color:blue">&gt;</span>
  <span style="color:blue">&lt;p&gt;</span>نص هنا<span style="color:blue">&lt;/p&gt;</span>
<span style="color:blue">&lt;/div&gt;</span>
</div>
w3-code عرض كود SQL 
<div class="w3-code sqlHigh notranslate">
SELECT first_name, last_name 
FROM users 
WHERE country = "SA" 
ORDER BY created_at DESC;
</div>
w3-code عرض كود قصير في سطر واحد 
<code class="w3-codespan">console.log("Hello World");</code>
w3-code عرض كود مع إطار مخصص 
<div class="w3-code htmlHigh notranslate w3-border w3-border-blue">
&lt;div class="w3-card"&gt;
  &lt;header class="w3-container w3-blue"&gt;
    &lt;h3&gt;البطاقة&lt;/h3&gt;
  &lt;/header&gt;
&lt;/div&gt;
</div>
w3-code عرض كود مع تمرير أفقي 
<div class="w3-code htmlHigh notranslate" style="overflow-x:auto">
&lt;table class="w3-table-all"&gt;&lt;tr&gt;&lt;th&gt;العمود 1&lt;/th&gt;&lt;th&gt;العمود 2&lt;/th&gt;&lt;th&gt;العمود 3&lt;/th&gt;&lt;th&gt;العمود 4&lt;/th&gt;&lt;th&gt;العمود 5&lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;
</div>
w3-code عرض كود مع زر التشغيل 
<div class="w3-code jsHigh notranslate" style="position:relative">
<button onclick="runCode()" class="w3-button w3-small w3-blue" style="position:absolute;top:0;right:0">تشغيل</button>
function sayHello() {
  alert("مرحبا!");
}
sayHello();
</div>
w3-code عرض كود مدمج في النص 
<p>استخدم <code class="w3-codespan">document.getElementById()</code> للوصول إلى العناصر.</p>