بوت استرپ 4 تکه کدهای آماده ای به نام کامپوننت در اختیار طراحان قرار داده که به کمک آن ها می توان عناصر استاندارد و زیبایی را روی صفحه وب قرار داد.
در حقیقت کامپوننت ها مجموعه ای از کدهای نوشته شده با html و css و javascript هستند. مانند دکمه ها، تصاویر متحرک، لیست ها، منوهای افقی و عمودی و .... بطور مثال اگر بدون استفاده از کدهای بوت استرپ یک تصویر متحرک اسلایدشو روی صفحه وب قرار دهیم لازم است، غیر از کدهای html و css که باید بنویسیم از جاوااسکریپت هم برای متحرک کردن تصاویر استفاده کنیم. اما بوت استرپ فرایندهای دستی بالا را انجام داده و آن را به عنوان یک کامپوننت معرفی کرده است و فقط کافی است نحوه استفاده از آن را بدانیم.
برای استفاده از کامپوننت ها کافی است به سایت getbootstrap.com مراجعه کرده، از قسمت کامپوننت ها (components)، کامپوننت مورد نظر خود را پیدا کرده و راهنما و نحوه استفاده از کد ها را مطالعه کنیم و در اکثر موارد با کپی کردن کدهای آن و سپس تغییرات جزئی در متن و برخی خصوصیات آن به هدف مورد نظر خواهیم رسید.
در دوره آموزش بوت استرپ 4 نیز به طور کامل کامپوننت های بوت استرپ و نحوه استفاده از آنها را آموزش داده ایم.
مهم ترین کامپوننت های بوت استرپ عبارتند از:
برای ارائه پیام های هشدار یا پیام های انتقادی متنی بکار می رود.

برای نشان ها و برچسب گذاری ها مورد استفاده قرار می گیرد.

برای آنکه موقعیت صفحه ای که در آن هستیم را مشخص کنید می توانید از این کامپوننت استفاده کنید. در این حالت جداکننده ها بطور خودکار از طریق کد css اضافه می شوند.

از استایل های دکمه (Button) برای فرم ها، گفتگوها و موارد دیگر با پشتیبانی از اندازه ها و حالت های مختلف استفاده کنید.

گروهی از چندین دکمه با هم روی یک خط است که می توانید در موارد مختلف از آن استفاده کنید.

برای داشتن یک محتوای انعطاف پذیر و گسترده با انواع گزینه های مختلف بکار می رود.

برای ایجاد اسلایدشو از تصاویر و اسلاید های متنی مورد استفاده قرار می گیرد.

با این کامپوننت می توانید یک محتوا را با کلیک روی یک دکمه ظاهر یا پنهان کنید.

برای نمایش کمبوباکس ها منوهای آبشاری از آن استفاده می شود.

برای ایجاد فرم های دریافت اطلاعات از کاربران می توان از انواع مختلف آن استفاده کرد.

شکل ظاهری فرم های دریافت اطلاعات را با یک متن یا آیکون زیباتر و با مفهوم تر می کنند.

کامپوننتی انعطاف پذیر برای نمایش استایل محتوایی hero

برای نمایش لیستی از محتوا مورد استفاده قرار می گیرد.

برای ساخت اجزای بسیار تکراری مانند نظرات وبلاگ ها، توییت ها و موارد مشابه مورد استفاده قرار می گیرد.

برای افزودن گفتگو به سایت خود به صورت lightbox و یا اعلان های کاربر استفاده می شود.

برای نمایش منوها یا navigation ها از این کامپوننت استفاده می شود.

برای ایجاد منوهای افقی واکنش گرا از این کامپوننت استفاده می شود.

برای صفحه بندی اطلاعات معمولا جداول از این کامپوننت استفاده می شود.

با کلیک روی یک دکمه یک منو به صورت popover نمایش داده می شود.

برای نمایش میزان پیشرفت کاربرد دارد.

چنانچه بخواهیم اجزای گروه را بر اساس موقعیت پیمایش لیست کنیم تا مشخص شود کدام پیوند در حال حاضر در حال نمایش است، از این کامپوننت استفاده می کنیم.

حالت loading… یا waiting… را برای یک دکمه ایجاد می کند.

جهت نمایش یک اعلان به کاربر بکار می رود.

برای افزودن راهنماهایی به فرم ها یا دکمه ها مورد استفاده قرار می گیرد.

در اینفوگرافیک زیر می توانید خلاصه این مقاله را مشاهده نمایید.
