Bootstrap Background Colors

Bootstrap 4 contextual background utilities quickly apply semantic background colors. Pair dark backgrounds with a readable text utility when needed.

Background Utilities Top ↑

<div class="bg-primary text-white">Primary</div>
<div class="bg-success text-white">Success</div>
<div class="bg-warning text-dark">Warning</div>
<div class="bg-danger text-white">Danger</div>
<div class="bg-light text-dark">Light</div>
<div class="bg-dark text-white">Dark</div>
<div class="bg-white text-dark">White</div>
<div class="bg-transparent">Transparent</div>

Change Background Class with jQuery Top ↑

const classes =
    "bg-primary bg-success bg-warning bg-danger bg-info bg-light bg-dark";

$( "#box" )
    .removeClass( classes )
    .addClass( "bg-success text-white" );

Custom Background Top ↑

$( "#box" ).css(
    "background-color",
    "#e9ecef"
);

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<p class='bg-primary'>This Background is class='bg-primary' Hex : '#337ab7'</p>
<p class='bg-success'>This Background is class='bg-success' Hex : '#c1e2b3'</p>
<p class='bg-info'>This Background is class='bg-info' Hex : '#d9edf7'</p>
<p class='bg-warning'>This Background is class='bg-warning' Hex : '#f7ecb5'</p>
<p class='bg-danger'>This Background is class='bg-danger' Hex : '#f2dede'</p>

Original example 2

<h3 class="bg-danger">This background is class='bg-danger'</h3>

Original example 3

.hdd{padding-left: 0.3cm;}

Original example 4

class='bg-warning text-dark hdd'

Original example 5

<style>
.my_bg-class {
  background-color: #f00000;
}
</style>

Original example 6

<p class="my_bg-class">This background is class='my_bg-class'</p>

Original example 7

<style>\n";
str +=".my_bg-class {\n";
str +=" background-color: "+val+";\n"
str +="}\n"
str +="</style>

Original example 8

var presentClassName = $('#d1').attr('class');

Original example 9

$('#d1').removeClass('bg-warning').addClass( 'bg-info' );

Original example 10

var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "bg-success" );

Additional Original Learning Routes Top ↑

• bs-font-colour.php
• msg-demo/bs-background.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: