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:

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

2. CSS Classes

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

<code class="css">.my-background {
  background-color: #ffffff;
}</code>

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

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

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

4. Custom CSS variables

Use CSS variables to define the background color and pass

- - Access variables:

<code class="css">:root {
  --my-background-color: #ffffff;
}</code>

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

5. Background gradient

Use the

background-image property to create a background gradient:

<code class="css">.my-gradient {
  background-image: linear-gradient(to right, #ffffff, #000000);
}</code>

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

6. Background image

Use the

background-image attribute to set the background image:

<code class="css">.my-image {
  background-image: url("image.jpg");
}</code>

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

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!