How to change background color

Changing the background color of your webpage can dramatically improve its appearance and user experience. Follow our guide to learn various ways to change background colors using CSS, inline styles, and Bootstrap.

Using Bootstrap

Bootstrap offers utility classes to easily change background colors. This method is effective for rapid prototyping and consistent styling.

In this example, we use Bootstrap's bg-primary class to set the background color of a <div> element to the primary color defined in Bootstrap's theme.

This is a div with a Bootstrap primary background.

HTML

        
            
        <div class="bg-primary text-white">This is a div with a Bootstrap primary background.</div>

Using CSS

You can change the background color of an HTML element by applying CSS styles. This is a clean and reusable method that separates content from design.

In this example, we use an external CSS file to set the background color of a <div> element to green.

This is a div with a green background.

HTML
CSS

        
            
        <div class="background-css w-100 h-100">This is a div with a green background.</div>

        
            
        .background-css {
          background-color: green;
        }

Using Inline Styles

Inline styles allow you to apply styles directly to an HTML element. This method is useful for quick changes or specific one-off cases.

We use the style attribute to set the background color of a <div> element to blue.

This is a div with a blue background.

HTML

        
            
        <div style="background-color: blue;">This is a div with a blue background.</div>