You are here

background-color-classes.css in Bootstrap Styles 1.0.x

.bs-bg-success {
  background-color: green !important;
}

.bs-bg-warning {
  background-color: yellow !important;
}

.bs-bg-danger {
  background-color: red !important;
}

.bs-bg-light {
  background-color: lightgray !important;
}

.ui-dialog-off-canvas .bs-bg-sm-success {
  background-color: green !important;
}

@media screen and (max-width: 576px) {
  .bs-bg-sm-success {
    background-color: green !important;
  }
}

.ui-dialog-off-canvas .bs-bg-sm-warning {
  background-color: yellow !important;
}

@media screen and (max-width: 576px) {
  .bs-bg-sm-warning {
    background-color: yellow !important;
  }
}

.ui-dialog-off-canvas .bs-bg-sm-danger {
  background-color: red !important;
}

@media screen and (max-width: 576px) {
  .bs-bg-sm-danger {
    background-color: red !important;
  }
}

.ui-dialog-off-canvas .bs-bg-sm-light {
  background-color: lightgray !important;
}

@media screen and (max-width: 576px) {
  .bs-bg-sm-light {
    background-color: lightgray !important;
  }
}

.ui-dialog-off-canvas .bs-bg-md-success {
  background-color: green !important;
}

@media (min-width: 576px) and (max-width: 992px) {
  .bs-bg-md-success {
    background-color: green !important;
  }
}

.ui-dialog-off-canvas .bs-bg-md-warning {
  background-color: yellow !important;
}

@media (min-width: 576px) and (max-width: 992px) {
  .bs-bg-md-warning {
    background-color: yellow !important;
  }
}

.ui-dialog-off-canvas .bs-bg-md-danger {
  background-color: red !important;
}

@media (min-width: 576px) and (max-width: 992px) {
  .bs-bg-md-danger {
    background-color: red !important;
  }
}

.ui-dialog-off-canvas .bs-bg-md-light {
  background-color: lightgray !important;
}

@media (min-width: 576px) and (max-width: 992px) {
  .bs-bg-md-light {
    background-color: lightgray !important;
  }
}

.ui-dialog-off-canvas .bs-bg-lg-success {
  background-color: green !important;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .bs-bg-lg-success {
    background-color: green !important;
  }
}

.ui-dialog-off-canvas .bs-bg-lg-warning {
  background-color: yellow !important;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .bs-bg-lg-warning {
    background-color: yellow !important;
  }
}

.ui-dialog-off-canvas .bs-bg-lg-danger {
  background-color: red !important;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .bs-bg-lg-danger {
    background-color: red !important;
  }
}

.ui-dialog-off-canvas .bs-bg-lg-light {
  background-color: lightgray !important;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .bs-bg-lg-light {
    background-color: lightgray !important;
  }
}

.ui-dialog-off-canvas .bs-bg-xl-success {
  background-color: green !important;
}

@media (min-width: 1200px) {
  .bs-bg-xl-success {
    background-color: green !important;
  }
}

.ui-dialog-off-canvas .bs-bg-xl-warning {
  background-color: yellow !important;
}

@media (min-width: 1200px) {
  .bs-bg-xl-warning {
    background-color: yellow !important;
  }
}

.ui-dialog-off-canvas .bs-bg-xl-danger {
  background-color: red !important;
}

@media (min-width: 1200px) {
  .bs-bg-xl-danger {
    background-color: red !important;
  }
}

.ui-dialog-off-canvas .bs-bg-xl-light {
  background-color: lightgray !important;
}

@media (min-width: 1200px) {
  .bs-bg-xl-light {
    background-color: lightgray !important;
  }
}

File

css/bs_example_classes/background-color-classes.css
View source
  1. .bs-bg-success {
  2. background-color: green !important;
  3. }
  4. .bs-bg-warning {
  5. background-color: yellow !important;
  6. }
  7. .bs-bg-danger {
  8. background-color: red !important;
  9. }
  10. .bs-bg-light {
  11. background-color: lightgray !important;
  12. }
  13. .ui-dialog-off-canvas .bs-bg-sm-success {
  14. background-color: green !important;
  15. }
  16. @media screen and (max-width: 576px) {
  17. .bs-bg-sm-success {
  18. background-color: green !important;
  19. }
  20. }
  21. .ui-dialog-off-canvas .bs-bg-sm-warning {
  22. background-color: yellow !important;
  23. }
  24. @media screen and (max-width: 576px) {
  25. .bs-bg-sm-warning {
  26. background-color: yellow !important;
  27. }
  28. }
  29. .ui-dialog-off-canvas .bs-bg-sm-danger {
  30. background-color: red !important;
  31. }
  32. @media screen and (max-width: 576px) {
  33. .bs-bg-sm-danger {
  34. background-color: red !important;
  35. }
  36. }
  37. .ui-dialog-off-canvas .bs-bg-sm-light {
  38. background-color: lightgray !important;
  39. }
  40. @media screen and (max-width: 576px) {
  41. .bs-bg-sm-light {
  42. background-color: lightgray !important;
  43. }
  44. }
  45. .ui-dialog-off-canvas .bs-bg-md-success {
  46. background-color: green !important;
  47. }
  48. @media (min-width: 576px) and (max-width: 992px) {
  49. .bs-bg-md-success {
  50. background-color: green !important;
  51. }
  52. }
  53. .ui-dialog-off-canvas .bs-bg-md-warning {
  54. background-color: yellow !important;
  55. }
  56. @media (min-width: 576px) and (max-width: 992px) {
  57. .bs-bg-md-warning {
  58. background-color: yellow !important;
  59. }
  60. }
  61. .ui-dialog-off-canvas .bs-bg-md-danger {
  62. background-color: red !important;
  63. }
  64. @media (min-width: 576px) and (max-width: 992px) {
  65. .bs-bg-md-danger {
  66. background-color: red !important;
  67. }
  68. }
  69. .ui-dialog-off-canvas .bs-bg-md-light {
  70. background-color: lightgray !important;
  71. }
  72. @media (min-width: 576px) and (max-width: 992px) {
  73. .bs-bg-md-light {
  74. background-color: lightgray !important;
  75. }
  76. }
  77. .ui-dialog-off-canvas .bs-bg-lg-success {
  78. background-color: green !important;
  79. }
  80. @media (min-width: 992px) and (max-width: 1200px) {
  81. .bs-bg-lg-success {
  82. background-color: green !important;
  83. }
  84. }
  85. .ui-dialog-off-canvas .bs-bg-lg-warning {
  86. background-color: yellow !important;
  87. }
  88. @media (min-width: 992px) and (max-width: 1200px) {
  89. .bs-bg-lg-warning {
  90. background-color: yellow !important;
  91. }
  92. }
  93. .ui-dialog-off-canvas .bs-bg-lg-danger {
  94. background-color: red !important;
  95. }
  96. @media (min-width: 992px) and (max-width: 1200px) {
  97. .bs-bg-lg-danger {
  98. background-color: red !important;
  99. }
  100. }
  101. .ui-dialog-off-canvas .bs-bg-lg-light {
  102. background-color: lightgray !important;
  103. }
  104. @media (min-width: 992px) and (max-width: 1200px) {
  105. .bs-bg-lg-light {
  106. background-color: lightgray !important;
  107. }
  108. }
  109. .ui-dialog-off-canvas .bs-bg-xl-success {
  110. background-color: green !important;
  111. }
  112. @media (min-width: 1200px) {
  113. .bs-bg-xl-success {
  114. background-color: green !important;
  115. }
  116. }
  117. .ui-dialog-off-canvas .bs-bg-xl-warning {
  118. background-color: yellow !important;
  119. }
  120. @media (min-width: 1200px) {
  121. .bs-bg-xl-warning {
  122. background-color: yellow !important;
  123. }
  124. }
  125. .ui-dialog-off-canvas .bs-bg-xl-danger {
  126. background-color: red !important;
  127. }
  128. @media (min-width: 1200px) {
  129. .bs-bg-xl-danger {
  130. background-color: red !important;
  131. }
  132. }
  133. .ui-dialog-off-canvas .bs-bg-xl-light {
  134. background-color: lightgray !important;
  135. }
  136. @media (min-width: 1200px) {
  137. .bs-bg-xl-light {
  138. background-color: lightgray !important;
  139. }
  140. }