Skip to content

Commit 8bd61fb

Browse files
committed
Update background.mdx
1 parent c3b9afb commit 8bd61fb

1 file changed

Lines changed: 13 additions & 13 deletions

File tree

site/src/content/docs/utilities/background.mdx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -59,22 +59,22 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
5959

6060
Change the opacity of a background color by using any of the `.bg-<percentage>` utilities which use `color-mix()` to mix the background color with `transparent`.
6161

62-
<Example class="d-flex flex-column gap-2" code={`<div class="bg-success p-2 text-white">This is default success background</div>
63-
<div class="bg-success p-2 text-white bg-90">This is 90% opacity success background</div>
64-
<div class="bg-success p-2 text-white bg-80">This is 80% opacity success background</div>
65-
<div class="bg-success p-2 text-white bg-70">This is 70% opacity success background</div>
66-
<div class="bg-success p-2 text-white bg-60">This is 60% opacity success background</div>
67-
<div class="bg-success p-2 text-dark bg-50">This is 50% opacity success background</div>
68-
<div class="bg-success p-2 text-dark bg-40">This is 40% opacity success background</div>
69-
<div class="bg-success p-2 text-dark bg-30">This is 30% opacity success background</div>
70-
<div class="bg-success p-2 text-dark bg-20">This is 20% opacity success background</div>
71-
<div class="bg-success p-2 text-dark bg-10">This is 10% opacity success background</div>`} />
62+
<Example class="d-flex flex-column gap-2" code={`<div class="bg-success p-2">This is default success background</div>
63+
<div class="bg-success p-2 bg-90">This is 90% opacity success background</div>
64+
<div class="bg-success p-2 bg-80">This is 80% opacity success background</div>
65+
<div class="bg-success p-2 bg-70">This is 70% opacity success background</div>
66+
<div class="bg-success p-2 bg-60">This is 60% opacity success background</div>
67+
<div class="bg-success p-2 bg-50">This is 50% opacity success background</div>
68+
<div class="bg-success p-2 bg-40">This is 40% opacity success background</div>
69+
<div class="bg-success p-2 bg-30">This is 30% opacity success background</div>
70+
<div class="bg-success p-2 bg-20">This is 20% opacity success background</div>
71+
<div class="bg-success p-2 bg-10">This is 10% opacity success background</div>`} />
7272

7373
The same can be applied to subtle and muted background colors.
7474

75-
<Example class="d-flex flex-column gap-2" code={`<div class="bg-subtle-success p-2 text-success">This is subtle success background</div>
76-
<div class="bg-muted-success bg-40 p-2 text-success">This is 40% success background</div>
77-
<div class="bg-muted-success bg-20 p-2 text-success">This is 20% success background</div>
75+
<Example class="d-flex flex-column gap-2" code={`<div class="bg-subtle-success p-2">This is subtle success background</div>
76+
<div class="bg-muted-success bg-40 p-2">This is 40% success background</div>
77+
<div class="bg-muted-success bg-20 p-2">This is 20% success background</div>
7878
`} />
7979

8080
## CSS

0 commit comments

Comments
 (0)