How to set background color in bootstrap

Bootstrap methods to set the background color are: Inline method: set the CSS class directly through the style attribute: create the class and apply it to the element Bootstrap utility class: use the specified color class to customize the CSS variable: use the variable and Access the background gradient through --: Use the background-image attribute to create a gradient background image: Use the background-image attribute to set the image

Bootstrap sets the background color Method

1. Inline method

Use the style attribute to set the background color directly in the element:

<div style="background-color: #ffffff;">内容</div>

2. CSS Classes

Create a CSS class with the desired background color and then apply it to the element:

.my-background {
  background-color: #ffffff;
}

<div class="my-background">内容</div>

3. Bootstrap Utility Classes

Bootstrap provides a series of utility classes to set the background color, each class corresponds to a color:

• .bg-primary
• .bg-secondary
• .bg-success
• .bg-danger
• .bg-warning
• .bg-info
• ##.bg-light
• .bg-dark

<div class="bg-primary">内容</div>

4. Custom CSS variables

Use CSS variables to define the background color and pass

- - Access variables:

:root {
  --my-background-color: #ffffff;
}

<div style="background-color: var(--my-background-color);">内容</div>

5. Background gradient

Use the

background-image property to create a background gradient:

.my-gradient {
  background-image: linear-gradient(to right, #ffffff, #000000);
}

<div class="my-gradient">内容</div>

6. Background image

Use the

background-image attribute to set the background image:

.my-image {
  background-image: url("image.jpg");
}

<div class="my-image">内容</div>

The above is the detailed content of How to set background color in bootstrap. For more information, please follow other related articles on the PHP Chinese website!