پس زمینه

افزودن رنگ و تغییر رنگ المان ها با کلاس های از پیش تعریف شده
رنگ بندی پایه
اولیه .bg-primary
ثانویه .bg-secondary
موفق .bg-success
خطر .bg-danger
اخطار .bg-warning
اطلاعات .bg-info
روشن .bg-light
تاریک .bg-dark
سفید .bg-white
شفاف .bg-transparent
ابزارهای پیش‌فرض پس‌زمینه Bootstrap طبیعتاً متنی هستند و از پالت رنگی که در فایل ../variables/_colors.scss وجود دارند.
رنگ بندی توسعه داده شده
قرمز .bg-red
نارنجی .bg-orange
زرد .bg-yellow
سبز .bg-green
سبز کم رنگ .bg-teal
فیروزه ای .bg-cyan
آبی .bg-blue
نیلی آبی .bg-indigo
بنفش .bg-purple
صورتی .bg-pink
SB Admin Pro رنگ های غیر متنی را به نقشه رنگ اضافه می کند تا بتوان از آنها به همان روشی که از رنگ های بوت استرپ استفاده می کنید استفاده کرد. این رنگ ها نیز در رنگ تعریف می شوند styles.css
پس زمینه گرادیان سفارشی
گرادیان اولیه به ثانویه .bg-gradient-primary-to-secondary
پس‌زمینه گرادیان سفارشی در سرصفحه‌های صفحه استفاده می‌شود، و می‌توان آن را در هر جایی که از ابزار رنگ پس‌زمینه معمولی استفاده کنید، اعمال کرد.
مقیاس خاکستری تطبیقی
.bg-white
.bg-gray-100
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500
.bg-gray-600
.bg-gray-700
.bg-gray-800
.bg-gray-900
.bg-black
برنامه های کاربردی تصویر پس زمینه
عکس پس زمینه (کاور):
<div class="bg-img-cover" style="background-image: url('path/to/image')">
    ...
</div>
.bg-img-cover(style='background-image: url("path/to/image")')
    | ...
استفاده از کلاس .bg-img-cover به همراه یک مجموعه تصویر پس زمینه با استفاده از CSS درون خطی و تصویر پس زمینه عنصر مورد استفاده را پوشش می دهد.
عکس پس زمینه (تکرار شونده):
<div class="bg-img-repeat" style="background-image: url('path/to/pattern')">
    ...
</div>
.bg-img-repeat(style='background-image: url("path/to/pattern")')
    | ...
استفاده زا کلاس .bg-img-repeat به همراه یک الگوی پس‌زمینه با استفاده از CSS درون خطی تنظیم می‌شود و تصویر پس‌زمینه در سراسر عنصر مورد استفاده تکرار می‌شود. از یک ابزار رنگ پس‌زمینه به همراه آن برای اضافه کردن رنگ پس‌زمینه به همراه الگو استفاده کنید.
ابزار پوشش پس زمینه
<div class="bg-img-cover overlay" style="background-image: url('path/to/image')">
    ...
</div>
.bg-img-cover.overlay(style='background-image: url("path/to/image")')
    | ...
استفاده از کلاس .overlay به همراه یک تصویر پس زمینه برای افزودن یک پوشش به یک عنصر. پوشش پیش‌فرض یک پوشش تاریک 50% به عنصر اضافه می‌کند. گزینه های رنگ و شفافیت نیز موجود است.
همپوشانی کدریت - Opacity
10 از 90 .overlay-10
20 از 90 .overlay-20
30 از 90 .overlay-30
40 از 90 .overlay-40
50 از 90 .overlay-50
60 از 90 .overlay-60
70 از 90 .overlay-70
80 از 90 .overlay-80
90 از 90 .overlay-90 
<!-- 10% Overlay -->
<div class="bg-img-cover overlay overlay-10" style="background-image: url('path/to/image')">
    <div class="z-1">...</div>
</div>

<!-- 20% Overlay -->
<div class="bg-img-cover overlay overlay-20" style="background-image: url('path/to/image')">
    <div class="z-1">...</div>
</div>

<!-- 30% Overlay -->
<div class="bg-img-cover overlay overlay-30" style="background-image: url('path/to/image')">
    <div class="z-1">...</div>
</div>

<!-- 40% Overlay -->
<div class="bg-img-cover overlay overlay-40" style="background-image: url('path/to/image')">
    <div class="z-1">...</div>
</div>

<!-- 50% Overlay -->
<div class="bg-img-cover overlay overlay-50" style="background-image: url('path/to/image')">
    <div class="z-1">...</div>
</div>

<!-- 60% Overlay -->
<div class="bg-img-cover overlay overlay-60" style="background-image: url('path/to/image')">
    <div class="z-1">...</div>
</div>

<!-- 70% Overlay -->
<div class="bg-img-cover overlay overlay-70" style="background-image: url('path/to/image')">
    <div class="z-1">...</div>
</div>

<!-- 80% Overlay -->
<div class="bg-img-cover overlay overlay-80" style="background-image: url('path/to/image')">
    <div class="z-1">...</div>
</div>

<!-- 90% Overlay -->
<div class="bg-img-cover overlay overlay-90" style="background-image: url('path/to/image')">
    <div class="z-1">...</div>
</div>
//- 10% Overlay
.bg-img-cover.overlay.overlay-10(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 20% Overlay
.bg-img-cover.overlay.overlay-20(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 30% Overlay
.bg-img-cover.overlay.overlay-30(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 40% Overlay
.bg-img-cover.overlay.overlay-40(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 50% Overlay
.bg-img-cover.overlay.overlay-50(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 60% Overlay
.bg-img-cover.overlay.overlay-60(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 70% Overlay
.bg-img-cover.overlay.overlay-70(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 80% Overlay
.bg-img-cover.overlay.overlay-80(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 90% Overlay
.bg-img-cover.overlay.overlay-90(style='background-image: url("path/to/image")')
    .z-1
        | ...
با استفاده از کلاس .overlay به همراه یک ابزار شفافیت، 10-90،میتوان Opacity عنصر را تغییر داد.
رنگبندی هموشانی
اولیه .overlay-primary
ثانویه .overlay-secondary
موفق .overlay-success
اطلاعات .overlay-info
اخطار .overlay-warning
خطر .overlay-danger 
<!-- Primary Overlay -->
<div class="bg-img-cover overlay overlay-primary" style="background-image: url('path/to/image')">
    <div class="z-1">...</div>
</div>

<!-- Secondary Overlay -->
<div class="bg-img-cover overlay overlay-secondary" style="background-image: url('path/to/image')">
    <div class="z-1">...</div>
</div>

<!-- Success Overlay -->
<div class="bg-img-cover overlay overlay-success" style="background-image: url('path/to/image')">
    <div class="z-1">...</div>
</div>

<!-- Info Overlay -->
<div class="bg-img-cover overlay overlay-info" style="background-image: url('path/to/image')">
    <div class="z-1">...</div>
</div>

<!-- Warning Overlay -->
<div class="bg-img-cover overlay overlay-warning" style="background-image: url('path/to/image')">
    <div class="z-1">...</div>
</div>

<!-- Danger Overlay -->
<div class="bg-img-cover overlay overlay-danger" style="background-image: url('path/to/image')">
    <div class="z-1">...</div>
//- Primary Overlay
.bg-img-cover.overlay.overlay-primary(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- Secondary Overlay
.bg-img-cover.overlay.overlay-secondary(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- Success Overlay
.bg-img-cover.overlay.overlay-success(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- Info Overlay
.bg-img-cover.overlay.overlay-info(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- Warning Overlay
.bg-img-cover.overlay.overlay-warning(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- Danger Overlay
.bg-img-cover.overlay.overlay-dagner(style='background-image: url("path/to/image")')
    .z-1
        | ...
با استفاده از کلاس .overlay به همراه یک ابزار رنگ همپوشانی، به عنوان مثال، .overlay-primary . همچنین می توانید از رنگ های همپوشانی استفاده کنید که بخشی از سیستم رنگی توسعه یافته هستند، مانند .overlay-red
ترکیب ابزارهای همپوشانی
<div class="bg-img-cover overlay overlay-70 overlay-primary" style="background-image: url('path/to/image')">
    ...
</div>
.bg-img-cover.overlay.overlay-70.overlay-primary(style='background-image: url("path/to/image")')
    | ...
ابزارهای همپوشانی کدر (opacity overlay) و رنگ بندی همپوشانی (overlay color) را می توان با هم استفاده کرد. در مثال بالا، ما از .overlay با .overlay-70 و .overlay-primary استفاده کردیم.