White background class in Bootstrap

White background class in Bootstrap

I’m searching for a class that makes the element a white background.
maybe something like .bg-white, I couldn’t find it in Bootstrap but maybe its hidden somewhere?


Solution 1:

Since Bootstrap 4, Bootstrap does have white, light and dark background classes.


<div class="bg-light text-dark">Light background</div>
<div class="bg-dark text-white">Dark background</div>
<div class="bg-white text-dark">White background</div>

Source : Background Color – Bootstrap Docs

Solution 2:

Bootstrap doesn’t have a white background class.

Create your own:

    background:#ffffff !important;

This can be placed in bootstrap.css or your own custom stylesheet if you’ve created one.

The only backgrounds there are in bootstrap are:


Source: Bootstrap website

Solution 3:

You would have to define such class yourself. Put the following in your custom CSS file.


.bg-white {
    background-color: #ffffff !important;

In Bootstrap you have the following pre-defined backgrounds:

Bootstrap 3.1.0:

<div class="bg-primary">...</div>
<div class="bg-success">...</div>
<div class="bg-info">...</div>
<div class="bg-warning">...</div>
<div class="bg-danger">...</div>

Bootstrap 3.0.3:

<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>
Related:  load iframe in bootstrap modal

Solution 4:

I haven’t seen any style in bootstrap only for white-background. So apply yourself.

Add a class bg-white to your html element. Then in apply the background style.



<div class="bg-white">      
  <!-- div contents go here -->