Bootstrap 5 Background
Bootstrap 5 Background is used with the help of the keyword bg. It offers various colors like primary, success, info, warning, danger, secondary, dark, and light.
- Background Color: The background color of the elements is set to contextual class like .bg-primary, .bg-success, and so on.
- Background gradient: A linear gradient is applied to the backgrounds by adding color value and the .bg-gradient class to it.
- Sass: This involves the Sass map and spacing utilities that are declared in Utility API.
Below examples illustrate the Bootstrap 5 Background:
Example 1: The following code demonstrates different background Color classes of Bootstrap 5.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < h1 class = "text-center text-success" > w3wiki </ h1 > < h2 class = "text-center" > Bootstrap 5 Background </ h2 > < div class = "p-3 mb-2 bg-primary text-white" > Hello World </ div > < div class = "p-3 mb-2 bg-secondary text-white" > Hello World </ div > < div class = "p-3 mb-2 bg-success text-white" > Hello World </ div > < div class = "p-3 mb-2 bg-danger text-white" > Hello World </ div > < div class = "p-3 mb-2 bg-warning text-dark" > Hello World </ div > < div class = "p-3 mb-2 bg-info text-dark" > Hello World </ div > < div class = "p-3 mb-2 bg-light text-dark" > Hello World </ div > < div class = "p-3 mb-2 bg-dark text-white" > Hello World </ div > </ body > </ html > |
Output:
Bootstrap 5 Background
Example 2: The following code demonstrates different background Gradient classes.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < h1 class = "text-center text-success" > w3wiki </ h1 > < h2 class = "text-center" > Bootstrap 5 Background</ h2 > < div class = "p-3 mb-2 bg-info bg-gradient" > .bg-info.bg-gradient </ div > < div class = "p-3 mb-2 bg-light bg-gradient" > .bg-light.bg-gradient </ div > < div class = "p-3 mb-2 text-white bg-dark bg-gradient" > .bg-dark.bg-gradient </ div > </ body > </ html > |
Output:
Bootstrap 5 Background
Reference: https://getbootstrap.com/docs/5.0/utilities/background/