Фоновый цвет
Подобно классам цвета контекстного текста, установите фон элемента для любого контекстного класса. Фоновые утилиты не устанавливают color
, поэтому в некоторых случаях Вы захотите использовать .text-*
утилиты цвета.
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-transparent
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
Фоновый градиент
При добавлении класса .bg-gradient
, линейный градиент добавляется как фоновое изображение к фону. Этот градиент начинается с полупрозрачного белого цвета, который постепенно исчезает к низу.
Вам нужен градиент в вашем собственном CSS? Просто добавьте background-image: var(--bs-gradient);
.
.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
Непрозрачность
Added in v5.1.0
Начиная с версии 5.1.0, утилиты background-color
генерируются с помощью Sass с использованием переменных CSS. Это позволяет изменять цвет в реальном времени без компиляции и динамических изменений альфа-прозрачности.
Как это устроено
Рассмотрим нашу стандартную утилиту .bg-success
.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Мы используем RGB-версию нашей переменной CSS --bs-success
(со значением 25, 135, 84
) и добавляем вторую переменную CSS, --bs-bg-opacity
, для альфа-прозрачности. (со значением по умолчанию 1
благодаря локальной переменной CSS). Это означает, что каждый раз, когда вы сейчас используете .bg-success
, вашим вычисленным значением color
будет rgba(25, 135, 84, 1)
. Локальная переменная CSS внутри каждого класса .bg-*
позволяет избежать проблем с наследованием, поэтому вложенные экземпляры утилит не имеют автоматически измененной альфа-прозрачности.
Пример
Чтобы изменить эту непрозрачность, переопределите --bs-bg-opacity
с помощью пользовательских стилей или встроенных стилей.
Это фон успеха по умолчанию
Это успешный фон с непрозрачностью 50%
<div class="bg-success p-2 text-white">Это фон успеха по умолчанию</div>
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">Это успешный фон с непрозрачностью 50%</div>
Or, choose from any of the .bg-opacity
utilities:
Это фон успеха по умолчанию
Это успешный фон с непрозрачностью 75%
Это успешный фон с непрозрачностью 50%
Это успешный фон с непрозрачностью 25%
Это успешный фон с непрозрачностью 10%
<div class="bg-success p-2 text-white">Это фон успеха по умолчанию</div>
<div class="bg-success p-2 text-white bg-opacity-75">Это успешный фон с непрозрачностью 75%</div>
<div class="bg-success p-2 text-dark bg-opacity-50">Это успешный фон с непрозрачностью 50%</div>
<div class="bg-success p-2 text-dark bg-opacity-25">Это успешный фон с непрозрачностью 25%</div>
<div class="bg-success p-2 text-dark bg-opacity-10">Это успешный фон с непрозрачностью 10%</div>
Sass
В дополнение к следующей функциональности Sass, рассмотрите возможность чтения о наших включенных настраиваемых свойствах CSS (также известных как переменные CSS) для цветов и многого другого.
Переменные
Большинство утилит background-color
генерируются цветами нашей темы, переназначенными из переменных нашей общей цветовой палитры.
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0));
Также доступны оттенки серого, но для создания каких-либо утилит используется только подмножество.
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
Карта
Затем цвета темы помещаются в карту Sass, чтобы мы могли перебирать их, чтобы сгенерировать наши утилиты, модификаторы компонентов и многое другое.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Цвета в градациях серого также доступны в виде карты Sass. Эта карта не используется для создания каких-либо утилит.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
Цвета RGB генерируются из отдельной карты Sass:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
И непрозрачность цвета фона основывается на этом с их собственной картой, которая используется API утилит:
$utilities-bg: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-bg)
)
);
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");
Миксины
Никакие миксины не используются для создания наших фоновых утилит, но у нас есть некоторые дополнительные миксины для других ситуаций, когда Вы хотите создать свои собственные градиенты.
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$variable-prefix}gradient);
}
}
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
}
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
background-image: linear-gradient($deg, $start-color, $end-color);
}
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
}
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
}
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
background-image: radial-gradient(circle, $inner-color, $outer-color);
}
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
Утилиты API
Фоновые утилиты объявлены в нашем API утилит в scss/_utilities.scss
. Узнайте, как использовать утилиты API.
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
),
"bg-opacity": (
css-var: true,
class: bg-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
I am building a web application where I have set my default color to navy blue using css. But when i added the twitter bootstrap css’s in my page I did not find my navy blue color instead I found the white background color provided by twitter bootstrap.
My query is that what portion of css should I change in bootstrap to change my page’s background.
Cœur
36.4k25 gold badges191 silver badges259 bronze badges
asked May 26, 2012 at 18:47
SM Farhad AliSM Farhad Ali
1,0742 gold badges12 silver badges28 bronze badges
3
You can overwrite Bootstraps default CSS by adding your own rules.
<style type="text/css">
body { background: navy !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
Tim
2,0954 gold badges27 silver badges44 bronze badges
answered May 26, 2012 at 20:26
0
Bootstrap 4 provides standard methods for this, fully described here: https://getbootstrap.com/docs/4.3/getting-started/theming
Eg. you can override defaults simply by setting variables in the SASS file, where you import bootstrap. An example from the docs (which also answers the question):
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";
answered Jul 27, 2019 at 20:31
1
You have to override the bootstrap default by being a bit more specific. Try this for a black background:
html body {
background-color: rgba(0,0,0,1.00);
}
josliber♦
43.5k12 gold badges98 silver badges133 bronze badges
answered Sep 13, 2015 at 21:28
RichieRichie
1811 silver badge2 bronze badges
3
I would not recommend changing the actual bootstrap CSS files. If you do not want to use Jako’s first solution you can create a custom bootstrap style sheet with one of the available Bootstrap theme generator (Bootstrap theme generators). That way you can use 1 style sheet with all of the default Bootstrap CSS with just the one change to it that you want. With a Bootstrap theme generator you do not need to write any CSS. You only need to set the hex values for the color you want for the body (Scaffolding; bodyBackground).
answered Mar 5, 2013 at 7:47
TheoTheo
1411 silver badge3 bronze badges
You can simply add this line into your bootstrap_and_overides.css.less file
body { background: #000000 !important;}
that’s it
answered Feb 22, 2014 at 15:24
0
I’m using CDN bootstrap, and the solution that I found was:
First, include the bootstrap’s CDN, then (just under) you include the file .css
where you are editing the default styles of bootstrap.
<!-- Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Your styles -->
<link rel='stylesheet' href='styles/my_bootsrap_editions.css'>
answered Jan 29, 2015 at 18:52
CarmorenoCarmoreno
1,25317 silver badges28 bronze badges
Add your own .css file & put in it:
body{
background: navy;
}
Important: While including css files in html, first include the cdn bootstrap css, then only include your own .css file. This way stylings in your own css file overrides the default behaviour from bootstrap css.
answered Jul 17, 2016 at 18:17
The colors changed due to the order of CSS files.
Place the custom CSS under the bootstrap CSS.
answered Jan 1, 2020 at 10:36
EstherEsther
2875 silver badges11 bronze badges
Its not recommended to overwrite bootstrap file, just in your local style.css use
body{background: your color !important;
here !important declaration overwrite bootstrap value.
answered Oct 11, 2016 at 7:29
karuneshkarunesh
3153 silver badges7 bronze badges
how to change background color in html & css with class
example:
on html you write
<div class="pad_menu">
</div>
on css
.pad_menu {
padding: 100px;
background-color: #A9FFCB;
}
so your background will be change to Magic Mint, if you want to know the code of the color, i suggest you visit https://coolors.co. Hope this useful
answered Nov 5, 2017 at 11:00
1
Bootstrap 5 Colors
MDB is supported by an extensive Material Design color system that themes our styles and
components. This enables more comprehensive customization and extension for any project.
Theme
We use a subset of all colors to create a smaller color palette for generating color schemes,
also available as SCSS variables and a Sass map in Bootstrap’s
scss/free/_variables.scss
file.
All these colors are available as a Sass map, $theme-colors
in
scss/free/_variables.scss
file.
Note: Theme colors are also available as CSS classes. You can use them
directly in your project without compiling scss code. Have a look at the examples below.
Background
Easily set the background by using .bg-*
color classes
Background gradient
By adding a .bg-gradient
class, a linear gradient is added as background
image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
Do you need a gradient in your custom CSS? Just add background-image: var(--mdb-gradient);
.
.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
Text
Colorize text with color utilities.
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black
.text-white-50
.text-black-50
Depracation: With the addition of .text-opacity-*
utilities and CSS variables for text utilities,
.text-black-50
and .text-white-50
are deprecated as
of Bootstrap v5.1.0. They’ll be removed in v6.0.0.
Links
You can use the .link-*
classes to colorize links. Unlike the
.text-*
classes, these classes have a :hover
and
:focus
state.
Some of the button styles use a relatively light foreground color, and should only be used
on a dark background in order to have sufficient contrast.
Components
We also use theme colors as predefined colors for some components, for example, buttons.
Opacity
Text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
How it works
Consider our default .text-primary
utility.
We use an RGB version of our --mdb-primary
(with the value of 13, 110, 253
) CSS variable and attached a second CSS variable,
--mdb-text-opacity
, for the alpha transparency (with a default value 1
thanks to a local CSS variable). That means anytime you use .text-primary
now, your computed
color value is rgba(13, 110, 253, 1)
. The local CSS variable inside each .text-*
class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency.
Example
To change that opacity, override —mdb-text-opacity via custom styles or inline styles.
This is default primary text
This is 50% opacity primary text
Or, choose from any of the .text-opacity
utilities:
This is default primary text
This is 75% opacity primary text
This is 50% opacity primary text
This is 25% opacity primary text
Background
To change that opacity, override --mdb-bg-opacity
via custom styles or inline styles.
This is default success background
This is 50% opacity success background
Or, choose from any of the .bg-opacity
utilities:
This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
Full palette
All MDB colors are available as SCSS variables and a Sass map in
scss/free/_variables.scss
file. To avoid increased file sizes, we don’t create
text or background color classes for each of these variables. Instead, we choose a subset of
these colors for a theme palette.
Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three
contrast ratios to each of the main colors—one for the swatch’s current colors, one for
against white, and one for against black.
Red 50 #FFEBEE
100 #FFCDD2
200 #EF9A9A
300 #E57373
400 #EF5350
500 #F44336
600 #E53935
700 #D32F2F
800 #C62828
900 #B71C1C
A100 #FF8A80
A200 #FF5252
A400 #FF1744
A700 #D50000
Pink 50 #FCE4EC
100 #F8BBD0
200 #F48FB1
300 #F06292
400 #EC407A
500 #E91E63
600 #D81B60
700 #C2185B
800 #AD1457
900 #880E4F
A100 #FF80AB
A200 #FF4081
A400 #F50057
A700 #C51162
Purple 50 #F3E5F5
100 #E1BEE7
200 #CE93D8
300 #BA68C8
400 #AB47BC
500 #9C27B0
600 #8E24AA
700 #7B1FA2
800 #6A1B9A
900 #4A148C
A100 #EA80FC
A200 #E040FB
A400 #D500F9
A700 #AA00FF
Deep Purple 50 #EDE7F6
100 #D1C4E9
200 #B39DDB
300 #9575CD
400 #7E57C2
500 #673AB7
600 #5E35B1
700 #512DA8
800 #4527A0
900 #311B92
A100 #B388FF
A200 #7C4DFF
A400 #651FFF
A700 #6200EA
Indigo 50 #E8EAF6
100 #C5CAE9
200 #9FA8DA
300 #7986CB
400 #5C6BC0
500 #3F51B5
600 #3949AB
700 #303F9F
800 #283593
900 #1A237E
A100 #8C9EFF
A200 #536DFE
A400 #3D5AFE
A700 #304FFE
Blue 50 #E3F2FD
100 #BBDEFB
200 #90CAF9
300 #64B5F6
400 #42A5F5
500 #2196F3
600 #1E88E5
700 #1976D2
800 #1565C0
900 #0D47A1
A100 #82B1FF
A200 #448AFF
A400 #2979FF
A700 #2962FF
Light Blue 50 #E1F5FE
100 #B3E5FC
200 #81D4FA
300 #4FC3F7
400 #29B6F6
500 #03A9F4
600 #039BE5
700 #0288D1
800 #0277BD
900 #01579B
A100 #80D8FF
A200 #40C4FF
A400 #00B0FF
A700 #0091EA
Cyan 50 #E0F7FA
100 #B2EBF2
200 #80DEEA
300 #4DD0E1
400 #26C6DA
500 #00BCD4
600 #00ACC1
700 #0097A7
800 #00838F
900 #006064
A100 #84FFFF
A200 #18FFFF
A400 #00E5FF
A700 #00B8D4
Teal 50 #E0F2F1
100 #B2DFDB
200 #80CBC4
300 #4DB6AC
400 #26A69A
500 #009688
600 #00897B
700 #00796B
800 #00695C
900 #004D40
A100 #A7FFEB
A200 #64FFDA
A400 #1DE9B6
A700 #00BFA5
Green 50 #E8F5E9
100 #C8E6C9
200 #A5D6A7
300 #81C784
400 #66BB6A
500 #4CAF50
600 #43A047
700 #388E3C
800 #2E7D32
900 #1B5E20
A100 #B9F6CA
A200 #69F0AE
A400 #00E676
A700 #00C853
Light Green 50 #F1F8E9
100 #DCEDC8
200 #C5E1A5
300 #AED581
400 #9CCC65
500 #8BC34A
600 #7CB342
700 #689F38
800 #558B2F
900 #33691E
A100 #CCFF90
A200 #B2FF59
A400 #76FF03
A700 #64DD17
Lime 50 #F9FBE7
100 #F0F4C3
200 #E6EE9C
300 #DCE775
400 #D4E157
500 #CDDC39
600 #C0CA33
700 #AFB42B
800 #9E9D24
900 #827717
A100 #F4FF81
A200 #EEFF41
A400 #C6FF00
A700 #AEEA00
Yellow 50 #FFFDE7
100 #FFF9C4
200 #FFF59D
300 #FFF176
400 #FFEE58
500 #FFEB3B
600 #FDD835
700 #FBC02D
800 #F9A825
900 #F57F17
A100 #FFFF8D
A200 #FFFF00
A400 #FFEA00
A700 #FFD600
Amber 50 #FFF8E1
100 #FFECB3
200 #FFE082
300 #FFD54F
400 #FFCA28
500 #FFC107
600 #FFB300
700 #FFA000
800 #FF8F00
900 #FF6F00
A100 #FFE57F
A200 #FFD740
A400 #FFC400
A700 #FFAB00
Orange 50 #FFF3E0
100 #FFE0B2
200 #FFCC80
300 #FFB74D
400 #FFA726
500 #FF9800
600 #FB8C00
700 #F57C00
800 #EF6C00
900 #E65100
A100 #FFD180
A200 #FFAB40
A400 #FF9100
A700 #FF6D00
Deep Orange 50 #FBE9E7
100 #FFCCBC
200 #FFAB91
300 #FF8A65
400 #FF7043
500 #FF5722
600 #F4511E
700 #E64A19
800 #D84315
900 #BF360C
A100 #FF9E80
A200 #FF6E40
A400 #FF3D00
A700 #DD2C00
Brown 50 #EFEBE9
100 #D7CCC8
200 #BCAAA4
300 #A1887F
400 #8D6E63
500 #795548
600 #6D4C41
700 #5D4037
800 #4E342E
900 #3E2723
Gray 50 #FBFBFB
100 #F5F5F5
200 #EEEEEE
300 #E0E0E0
400 #BDBDBD
500 #9E9E9E
600 #757575
700 #616161
800 #4F4F4F
900 #262626
Blue Gray 50 #ECEFF1
100 #CFD8DC
200 #B0BEC5
300 #90A4AE
400 #78909C
500 #607D8B
600 #546E7A
700 #455A64
800 #37474F
900 #263238
Black #000000
White #FFFFFF
Generating utilities
Bootstrap doesn’t include color
and background-color
utilities for every color variable,
but you can generate these yourself with our utility API and our extended Sass maps added in v5.1.0.
- To start, make sure you’ve imported our functions, variables, mixins, and utilities.
- Use our
map-merge-multiple()
function to quickly merge multiple Sass maps together in a new map. - Merge this new combined map to extend any utility with a
{color}-{level}
class name.
Here’s an example that generates text color utilities (e.g., .text-purple-500
) using the above steps.
This will generate new .text-{color}-{level}
utilities for every color and level. You can do the same for any other utility and property as well.
Цвета
Раскрашивайте текст с помощью цветных утилит. Если вы хотите раскрасить ссылки, вы можете использовать .link-*
вспомогательные классы, у которых есть :hover
и :focus
состояния.
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
Фоновый цвет
Подобно классам цвета контекстного текста, легко установить фон элемента для любого контекстного класса. Фоновые утилиты не установлены color
, поэтому в некоторых случаях вы захотите использовать .text-*
утилиты.
.bg-primary
.bg-вторичный
.bg-успех
.bg-опасность
.bg-предупреждение
.bg-info
.bg-light
.bg-темный
.bg-белый
.bg-прозрачный
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-body">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
Фоновый градиент
При добавлении .bg-gradient
класса к фону добавляется линейный градиент в качестве фонового изображения. Этот градиент начинается с полупрозрачного белого цвета, который постепенно исчезает к низу.
Вам нужен градиент в вашем собственном CSS? Просто добавь background-image: var(--bs-gradient);
.
.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-dangerous.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
Работа со спецификой
Иногда контекстные классы не могут быть применены из-за специфики другого селектора. В некоторых случаях достаточно обойтись без содержимого вашего элемента в <div>
классе с классом.
Передача смысла вспомогательным технологиям
Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого контента (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only
классом.
Improve Article
Save Article
Improve Article
Save Article
Bootstrap is designed for front-end web development that prioritizes mobile responsiveness. It facilitates quicker web page design due to its built-in CSS, JS, etc.
Bootstrap 5 provides a few color utility classes, using which you may use a background color to convey a message. It includes support for opacity, lightning, and darkening, as well as dynamic backdrop colors on different triggers.
Bootstrap 5 Background color Class:
- .bg-primary: This class gives a primary color as the background.
- .bg-success: This class gives a green background.
- .bg-info: This class gives a teal background.
- .bg-warning: This class gives a yellow background.
- .bg-danger: This class gives a red background.
- .bg-secondary: This class gives a gray background.
- .bg-dark: This class gives a dark gray background.
- .bg-light: This class gives a light gray background.
- .bg-transparent: This class gives a transparent background.
Example: Here is an example of all informative background color classes.
HTML
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>Background color</
title
>
<
link
rel
=
"stylesheet"
href
=
</
head
>
<
body
class
=
"ms-2 me-2"
>
<
div
class
=
"text-center"
>
<
h1
class
=
"text-success"
>
GeeksforGeeks
</
h1
>
<
strong
>Bootstrap 5 Background colors</
strong
>
<
div
class
=
"p-3 mb-2 bg-primary text-white"
>
.bg color-primary</
div
>
<
div
class
=
"p-3 mb-2 bg-secondary text-white"
>
.bg-secondary</
div
>
<
div
class
=
"p-3 mb-2 bg-success text-white"
>
.bg-success</
div
>
<
div
class
=
"p-3 mb-2 bg-danger text-white"
>
.bg-danger</
div
>
<
div
class
=
"p-3 mb-2 bg-warning text-dark"
>
.bg-warning</
div
>
<
div
class
=
"p-3 mb-2 bg-info text-dark"
>
.bg-info</
div
>
</
div
>
</
body
>
</
html
>
Output:
Bootstrap 5 bg-color
Example 2: In this example, we will use normal background color classes like white, black, transparent, etc.
HTML
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>Background color</
title
>
<
link
rel
=
"stylesheet"
href
=
</
head
>
<
body
class
=
"ms-2 me-2"
>
<
div
class
=
"text-center"
>
<
h1
class
=
"text-success"
>
GeeksforGeeks
</
h1
>
<
strong
>Bootstrap 5 Background colors</
strong
>
<
div
class
=
"p-3 mb-2 bg-light text-dark"
>
.bg-light</
div
>
<
div
class
=
"p-3 mb-2 bg-dark text-white"
>
.bg-dark</
div
>
<
div
class
=
"p-3 mb-2 bg-body text-dark"
>
.bg-body</
div
>
<
div
class
=
"p-3 mb-2 bg-white text-dark"
>
.bg-white</
div
>
<
div
class
=
"p-3 mb-2 bg-transparent text-dark"
>
.bg-transparent</
div
>
</
div
>
</
body
>
</
html
>
Output:
Bootstrap bg-color
Reference: https://getbootstrap.com/docs/5.0/utilities/background/#background-color