• 01666-222229
  • info@practicise.com
  • Sircl Tech Pvt. Ltd, Red Light Chowk, Sirsa
Search
Close this search box.
Course Content
Bootstrap
0/4
Introduction
00:00
how to use bootstrap 5?
00:00
Containers
00:00
Grid System
00:00
Typography
0/4
Introduction
00:00
h1-h6 tag, display headings and small tag
00:00
HTML Elements
00:00
Bootstrap typography classes
00:00
Colors
0/4
Introduction
00:00
Text Colors
00:00
Background colors
00:00
Bootstrap 5 Dark Mode
Tables
0/5
Introduction
00:00
Tables
00:00
Black and Dark Tables
00:00
Contextual Classes
00:00
Small and Responsive Table
00:00
Images
0/2
Introduction
00:00
Aligning Images
00:00
Bootstrap 5 Alerts
0/1
Alerts
00:00
Buttons
0/2
Buttons
00:00
Button Groups
00:00
Badges
0/2
Badges
00:00
Badge Sizing and Badge use with JavaScript
00:00
Progress Bars
0/1
Progress Bars
Spinners
0/1
Spinners
Pagination
0/1
Pagination
List Groups
0/1
List Groups
Cards
0/6
Introduction to Bootstrap 5 Cards
Card Headers, Footers & Titles
Adding Images to Cards
Styling Cards with Colors & Links
Displaying Multiple Cards in a Row
Advanced Customization & Hover Effects
Bootstrap5 Dropdowns
0/5
Introduction to Bootstrap 5 Dropdowns
Different Dropdown Variants
Dropdown Alignment & Positioning
Hover Dropdown & Dark Theme
Advanced Dropdowns (Forms & Inputs in Dropdowns)
Bootstrap 5 Collapse
0/5
Introduction to Bootstrap 5 Collapse
Accordion (Multiple Collapse Sections)
Collapse with Icons (Show/Hide State)
Horizontally Collapsing Content
Collapse with Forms & Nested Collapse
Bootstrap 5 Navs
0/5
Introduction to Bootstrap 5 Navs
Vertical Navigation
Navigation with Tabs & Pills
Justified & Centered Navigation
Navigation with Dropdowns
Bootstrap 5 Navbar
0/6
Introduction to Bootstrap 5 Navbar
Navbar with Background Colors & Styling
Responsive Navbar with Toggler
Navbar with Dropdowns
Navbar with Search Box & Buttons
Fixed & Sticky Navbar
Bootstrap 5 Carousel
0/5
Introduction to Bootstrap 5 Carousel
Adding Indicators and Captions in Carousel
Controlling Carousel Behavior
Carousel with Different Slide Transitions
Multi-Item Carousel (Custom Layout)
Bootstrap 5 Modal
0/5
Introduction to Bootstrap 5 Modal
Modal Sizes & Scrollable Modals
Centering Modals & Fullscreen Modals
Modals with Static Backdrop & Keyboard Control
Modal with Form & Submit Button
Bootstrap 5 Tooltip
0/3
Introduction to Bootstrap 5 Tooltips
Tooltip Placement & Colors
Dismissible & Interactive Tooltips
Bootstrap5 Popover
0/3
Introduction to Bootstrap 5 Popovers
Popover Placement & Triggers
Dismissible & Interactive Popovers
Bootstrap 5 Toast
0/3
Introduction to Bootstrap 5 Toast
Toast Positioning & Auto-Hide
Toast with Different Triggers
Bootstrap 5 Scrollspy
0/1
Introduction to Bootstrap 5 Scrollspy
Bootstrap 5 Offcanvas
0/2
Introduction to Bootstrap 5 Offcanvas
Offcanvas from Different Sides
Bootstrap 5 Utilities
0/11
Bootstrap5 Borders
Bootstrap5 Width
Bootstrap5 Height
Bootstrap5 Shadows
Bootstrap5 Spacing
Bootstrap Vertical Align
Bootstrap5 Positioning
Bootstrap5 Display
Bootstrap5 Visibility
Bootstrap5 Colors
Bootstrap5 Background Colors
Bootstrap 5 Flexbox
0/8
Introduction to Bootstrap 5 Flexbox
Flex Direction (flex-row, flex-column)
Justify Content (Horizontal Alignment)
Align Items (Vertical Alignment)
Flex Wrap (flex-wrap)
Align Self (Individual Alignment)
Order (order-*)
Grow & Shrink (flex-grow, flex-shrink)
Bootstrap 5 Forms
0/7
Bootstrap 5 Forms
BS5 Select Menus
BS5 Checks and Radios
BS5 Range
BS5 Input Groups
BS5 Floating Labels
BS5 Form Validation
Bootstrap 5 Grid
0/4
Bootstrap 5 Grid System
Bootstrap Grid Structure (Basic Layout)
How the 12-Column Grid Works
Responsive Grid System (Breakpoints)
Bootstrap
About Lesson

Bootstrap5 Background Colors

Use bg-* classes to apply different background colors.

1. Bootstrap 5 Background Color Classes (bg-*)

You can use text-* classes to apply different colors to text.

  • bg-primary → Blue
  • bg-secondary → Gray
  • bg-success → Green
  • bg-danger → Red
  • bg-warning → Yellow
  • bg-info → Cyan
  • bg-light → Light Gray
  • bg-dark → Dark Gray
  • bg-body → Default Background Color
  • bg-white → White Background
  • bg-transparent → Transparent Background

Example:

HTML
<div class="p-3 bg-primary text-white">Primary Background</div>
<div class="p-3 bg-secondary text-white">Secondary Background</div>
<div class="p-3 bg-success text-white">Success Background</div>
<div class="p-3 bg-danger text-white">Danger Background</div>
<div class="p-3 bg-warning text-dark">Warning Background</div>
<div class="p-3 bg-info text-dark">Info Background</div>
<div class="p-3 bg-dark text-white">Dark Background</div>
<div class="p-3 bg-light text-dark">Light Background</div>

Output:

2. Background Opacity (bg-opacity-*)

You can control the opacity of background colors using bg-opacity-* classes.

  • bg-opacity-10 → 10% opacity
  • bg-opacity-25 → 25% opacity
  • bg-opacity-50 → 50% opacity
  • bg-opacity-75 → 75% opacity
  • bg-opacity-100 → 100% opacity (default)

Example:

HTML
  <div class="p-3 bg-danger bg-opacity-10">Danger with 10% Opacity</div>
  <div class="p-3 bg-danger bg-opacity-25">Danger with 25% Opacity</div>
  <div class="p-3 bg-danger bg-opacity-50">Danger with 50% Opacity</div>
  <div class="p-3 bg-danger bg-opacity-75">Danger with 75% Opacity</div>

Output:

3. Text Background Colors (text-bg-*)

Use text-bg-* classes to apply a background color directly to text elements. This is different from bg-* because it also ensures better text contrast.

  • text-bg-primary
  • text-bg-secondary
  • text-bg-success
  • text-bg-danger
  • text-bg-warning
  • text-bg-info
  • text-bg-light
  • text-bg-dark

Example:

HTML
<p class="text-bg-primary">This is primary text with background</p>
<p class="text-bg-success">This is success text with background</p>
<p class="text-bg-danger">This is danger text with background</p>
<p class="text-bg-warning">This is warning text with background</p>
<p class="text-bg-dark text-white">This is dark text with background</p>

Output:

Previous
Next