New

Powerful Svelte-Bootstrap SaaS App Template

Admin CRM Application Template

Robust Next.js SaaS App Template

Powerful React-Bootstrap SaaS App Template

Modern Remix SaaS App Template

VueJS-Bootstrap SaaS App Template

Intuitive Nuxt-Bootstrap SaaS App Template

Background

Convey meaning through background-color and add decoration with gradients.

Solid Color

For backgrounds, use .bg-* with any color from a predefined set of 270+ colors. Choose from 22 base colors with respective light & dark shades. See full list of colors here.

<div class="bg-success"></div>
<div class="bg-red"></div>
<div class="bg-danger"></div>
<div class="bg-info"></div>
<div class="bg-warning"></div>

import React from 'react';
function SolidColors() {
  return (
     <>
        <div className="d-flex">
            <div className="flex-fill bg-danger h-70p" />
            <div className="flex-fill bg-pink h-70p" />
            <div className="flex-fill bg-purple h-70p" />
            <div className="flex-fill bg-violet h-70p" />
            <div className="flex-fill bg-indigo h-70p" />
            <div className="flex-fill bg-blue h-70p" />
            <div className="flex-fill bg-primary h-70p" />
            <div className="flex-fill bg-info h-70p" />
            <div className="flex-fill bg-teal h-70p" />
            <div className="flex-fill bg-success h-70p" />
        </div>
        <div className="d-flex">
            <div className="flex-fill bg-neon h-70p" />
            <div className="flex-fill bg-lime h-70p" />
            <div className="flex-fill bg-sun h-70p" />
            <div className="flex-fill bg-warning h-70p" />
            <div className="flex-fill bg-orange h-70p" />
            <div className="flex-fill bg-pumpkin h-70p" />
            <div className="flex-fill bg-brown h-70p" />
            <div className="flex-fill bg-grey h-70p" />
            <div className="flex-fill bg-gold h-70p" />
            <div className="flex-fill bg-smoke h-70p" />
        </div>
     </>
  );
}
export default SolidColors;

import React from 'react';
function SolidColors() {
  return (
     <>
        <div className="d-flex">
            <div className="flex-fill bg-danger h-70p" />
            <div className="flex-fill bg-pink h-70p" />
            <div className="flex-fill bg-purple h-70p" />
            <div className="flex-fill bg-violet h-70p" />
            <div className="flex-fill bg-indigo h-70p" />
            <div className="flex-fill bg-blue h-70p" />
            <div className="flex-fill bg-primary h-70p" />
            <div className="flex-fill bg-info h-70p" />
            <div className="flex-fill bg-teal h-70p" />
            <div className="flex-fill bg-success h-70p" />
        </div>
        <div className="d-flex">
            <div className="flex-fill bg-neon h-70p" />
            <div className="flex-fill bg-lime h-70p" />
            <div className="flex-fill bg-sun h-70p" />
            <div className="flex-fill bg-warning h-70p" />
            <div className="flex-fill bg-orange h-70p" />
            <div className="flex-fill bg-pumpkin h-70p" />
            <div className="flex-fill bg-brown h-70p" />
            <div className="flex-fill bg-grey h-70p" />
            <div className="flex-fill bg-gold h-70p" />
            <div className="flex-fill bg-smoke h-70p" />
        </div>
     </>
  );
}
export default SolidColors;

<template>
    <div class="d-flex">
        <div class="flex-fill bg-danger h-70p"></div>
        <div class="flex-fill bg-pink h-70p"></div>
        <div class="flex-fill bg-purple h-70p"></div>
        <div class="flex-fill bg-violet h-70p"></div>
        <div class="flex-fill bg-indigo h-70p"></div>
        <div class="flex-fill bg-blue h-70p"></div>
        <div class="flex-fill bg-primary h-70p"></div>
        <div class="flex-fill bg-info h-70p"></div>
        <div class="flex-fill bg-teal h-70p"></div>
        <div class="flex-fill bg-success h-70p"></div>
    </div>
    <div class="d-flex">
        <div class="flex-fill bg-neon h-70p"></div>
        <div class="flex-fill bg-lime h-70p"></div>
        <div class="flex-fill bg-sun h-70p"></div>
        <div class="flex-fill bg-warning h-70p"></div>
        <div class="flex-fill bg-orange h-70p"></div>
        <div class="flex-fill bg-pumpkin h-70p"></div>
        <div class="flex-fill bg-brown h-70p"></div>
        <div class="flex-fill bg-grey h-70p"></div>
        <div class="flex-fill bg-gold h-70p"></div>
        <div class="flex-fill bg-smoke h-70p"></div>
    </div>
</template>

<template>
    <div class="d-flex">
        <div class="flex-fill bg-danger h-70p"></div>
        <div class="flex-fill bg-pink h-70p"></div>
        <div class="flex-fill bg-purple h-70p"></div>
        <div class="flex-fill bg-violet h-70p"></div>
        <div class="flex-fill bg-indigo h-70p"></div>
        <div class="flex-fill bg-blue h-70p"></div>
        <div class="flex-fill bg-primary h-70p"></div>
        <div class="flex-fill bg-info h-70p"></div>
        <div class="flex-fill bg-teal h-70p"></div>
        <div class="flex-fill bg-success h-70p"></div>
    </div>
    <div class="d-flex">
        <div class="flex-fill bg-neon h-70p"></div>
        <div class="flex-fill bg-lime h-70p"></div>
        <div class="flex-fill bg-sun h-70p"></div>
        <div class="flex-fill bg-warning h-70p"></div>
        <div class="flex-fill bg-orange h-70p"></div>
        <div class="flex-fill bg-pumpkin h-70p"></div>
        <div class="flex-fill bg-brown h-70p"></div>
        <div class="flex-fill bg-grey h-70p"></div>
        <div class="flex-fill bg-gold h-70p"></div>
        <div class="flex-fill bg-smoke h-70p"></div>
    </div>
</template>

<div>
    <div class="d-flex">
        <div class="flex-fill bg-danger h-70p"></div>
        <div class="flex-fill bg-pink h-70p"></div>
        <div class="flex-fill bg-purple h-70p"></div>
        <div class="flex-fill bg-violet h-70p"></div>
        <div class="flex-fill bg-indigo h-70p"></div>
        <div class="flex-fill bg-blue h-70p"></div>
        <div class="flex-fill bg-primary h-70p"></div>
        <div class="flex-fill bg-info h-70p"></div>
        <div class="flex-fill bg-teal h-70p"></div>
        <div class="flex-fill bg-success h-70p"></div>
    </div>
    <div class="d-flex">
        <div class="flex-fill bg-neon h-70p"></div>
        <div class="flex-fill bg-lime h-70p"></div>
        <div class="flex-fill bg-sun h-70p"></div>
        <div class="flex-fill bg-warning h-70p"></div>
        <div class="flex-fill bg-orange h-70p"></div>
        <div class="flex-fill bg-pumpkin h-70p"></div>
        <div class="flex-fill bg-brown h-70p"></div>
        <div class="flex-fill bg-grey h-70p"></div>
        <div class="flex-fill bg-gold h-70p"></div>
        <div class="flex-fill bg-smoke h-70p"></div>
    </div>
</div>

Dark Color

For Dark backgrounds, use .bg-dark-*

<div class="bg-dark-10 h-70p"></div>
<div class="bg-dark-20 h-70p"></div>
<div class="bg-dark-40 h-70p"></div>
<div class="bg-dark-60 h-70p"></div>
<div class="bg-dark-80 h-70p"></div>
<div class="bg-dark-100 h-70p"></div>

import React from 'react';
function DarkColor() {
  return (
     <>
        <div className="d-flex">
            <div className="flex-fill bg-danger h-70p" />
            <div className="flex-fill bg-pink h-70p" />
            <div className="flex-fill bg-purple h-70p" />
            <div className="flex-fill bg-violet h-70p" />
            <div className="flex-fill bg-indigo h-70p" />
            <div className="flex-fill bg-blue h-70p" />
            <div className="flex-fill bg-primary h-70p" />
            <div className="flex-fill bg-info h-70p" />
            <div className="flex-fill bg-teal h-70p" />
            <div className="flex-fill bg-success h-70p" />
        </div>
        <div className="d-flex">
            <div className="flex-fill bg-neon h-70p" />
            <div className="flex-fill bg-lime h-70p" />
            <div className="flex-fill bg-sun h-70p" />
            <div className="flex-fill bg-warning h-70p" />
            <div className="flex-fill bg-orange h-70p" />
            <div className="flex-fill bg-pumpkin h-70p" />
            <div className="flex-fill bg-brown h-70p" />
            <div className="flex-fill bg-grey h-70p" />
            <div className="flex-fill bg-gold h-70p" />
            <div className="flex-fill bg-smoke h-70p" />
        </div>
     </>
  );
}
export default DarkColor;

import React from 'react';
function DarkColor() {
  return (
     <>
        <div className="d-flex">
            <div className="flex-fill bg-danger h-70p" />
            <div className="flex-fill bg-pink h-70p" />
            <div className="flex-fill bg-purple h-70p" />
            <div className="flex-fill bg-violet h-70p" />
            <div className="flex-fill bg-indigo h-70p" />
            <div className="flex-fill bg-blue h-70p" />
            <div className="flex-fill bg-primary h-70p" />
            <div className="flex-fill bg-info h-70p" />
            <div className="flex-fill bg-teal h-70p" />
            <div className="flex-fill bg-success h-70p" />
        </div>
        <div className="d-flex">
            <div className="flex-fill bg-neon h-70p" />
            <div className="flex-fill bg-lime h-70p" />
            <div className="flex-fill bg-sun h-70p" />
            <div className="flex-fill bg-warning h-70p" />
            <div className="flex-fill bg-orange h-70p" />
            <div className="flex-fill bg-pumpkin h-70p" />
            <div className="flex-fill bg-brown h-70p" />
            <div className="flex-fill bg-grey h-70p" />
            <div className="flex-fill bg-gold h-70p" />
            <div className="flex-fill bg-smoke h-70p" />
        </div>
     </>
  );
}
export default DarkColor;

<template>
    <div class="d-flex">
        <div class="flex-fill bg-dark-10 h-70p"></div>
        <div class="flex-fill bg-dark-20 h-70p"></div>
        <div class="flex-fill bg-dark-40 h-70p"></div>
        <div class="flex-fill bg-dark-60 h-70p"></div>
        <div class="flex-fill bg-dark-80 h-70p"></div>
        <div class="flex-fill bg-dark-100 h-70p"></div>
    </div>
</template>

<template>
    <div class="d-flex">
        <div class="flex-fill bg-dark-10 h-70p"></div>
        <div class="flex-fill bg-dark-20 h-70p"></div>
        <div class="flex-fill bg-dark-40 h-70p"></div>
        <div class="flex-fill bg-dark-60 h-70p"></div>
        <div class="flex-fill bg-dark-80 h-70p"></div>
        <div class="flex-fill bg-dark-100 h-70p"></div>
    </div>
</template>

<div>
    <div class="bg-dark-10 h-70p"></div>
    <div class="bg-dark-20 h-70p"></div>
    <div class="bg-dark-40 h-70p"></div>
    <div class="bg-dark-60 h-70p"></div>
    <div class="bg-dark-80 h-70p"></div>
    <div class="bg-dark-100 h-70p"></div>
</div>

Grey Color

For Dark backgrounds, use .bg-grey-*

<div class="bg-gray-light-5 h-70p"></div>
<div class="bg-gray-light-4 h-70p"></div>
<div class="bg-gray-light-3 h-70p"></div>
<div class="bg-gray-light-2 h-70p"></div>
<div class="bg-gray-light-1 h-70p"></div>
<div class="bg-gray h-70p"></div>
<div class="bg-gray-dark-1 h-70p"></div>
<div class="bg-gray-dark-2 h-70p"></div>
<div class="bg-gray-dark-3 h-70p"></div>
<div class="bg-gray-dark-4 h-70p"></div>
<div class="bg-gray-dark-5 h-70p"></div>

import React from 'react';
function GreyColors() {
  return (
     <>
        <div className="d-flex">
        <div className="flex-fill bg-grey-light-5 h-70p" />
        <div className="flex-fill bg-grey-light-4 h-70p" />
        <div className="flex-fill bg-grey-light-3 h-70p" />
        <div className="flex-fill bg-grey-light-2 h-70p" />
        <div className="flex-fill bg-grey-light-1 h-70p" />
        <div className="flex-fill bg-grey h-70p" />
        <div className="flex-fill bg-grey-dark-1 h-70p" />
        <div className="flex-fill bg-grey-dark-2 h-70p" />
        <div className="flex-fill bg-grey-dark-3 h-70p" />
        <div className="flex-fill bg-grey-dark-4 h-70p" />
        <div className="flex-fill bg-grey-dark-5 h-70p" />
        </div>
     </>
  );
}
export default GreyColors;

import React from 'react';
function GreyColors() {
  return (
     <>
        <div className="d-flex">
        <div className="flex-fill bg-grey-light-5 h-70p" />
        <div className="flex-fill bg-grey-light-4 h-70p" />
        <div className="flex-fill bg-grey-light-3 h-70p" />
        <div className="flex-fill bg-grey-light-2 h-70p" />
        <div className="flex-fill bg-grey-light-1 h-70p" />
        <div className="flex-fill bg-grey h-70p" />
        <div className="flex-fill bg-grey-dark-1 h-70p" />
        <div className="flex-fill bg-grey-dark-2 h-70p" />
        <div className="flex-fill bg-grey-dark-3 h-70p" />
        <div className="flex-fill bg-grey-dark-4 h-70p" />
        <div className="flex-fill bg-grey-dark-5 h-70p" />
        </div>
     </>
  );
}
export default GreyColors;

<template>
    <div class="flex-fill bg-grey-light-5 h-70p"></div>
    <div class="flex-fill bg-grey-light-4 h-70p"></div>
    <div class="flex-fill bg-grey-light-3 h-70p"></div>
    <div class="flex-fill bg-grey-light-2 h-70p"></div>
    <div class="flex-fill bg-grey-light-1 h-70p"></div>
    <div class="flex-fill bg-grey h-70p"></div>
    <div class="flex-fill bg-grey-dark-1 h-70p"></div>
    <div class="flex-fill bg-grey-dark-2 h-70p"></div>
    <div class="flex-fill bg-grey-dark-3 h-70p"></div>
    <div class="flex-fill bg-grey-dark-4 h-70p"></div>
    <div class="flex-fill bg-grey-dark-5 h-70p"></div>
</template>

<template>
    <div class="flex-fill bg-grey-light-5 h-70p"></div>
    <div class="flex-fill bg-grey-light-4 h-70p"></div>
    <div class="flex-fill bg-grey-light-3 h-70p"></div>
    <div class="flex-fill bg-grey-light-2 h-70p"></div>
    <div class="flex-fill bg-grey-light-1 h-70p"></div>
    <div class="flex-fill bg-grey h-70p"></div>
    <div class="flex-fill bg-grey-dark-1 h-70p"></div>
    <div class="flex-fill bg-grey-dark-2 h-70p"></div>
    <div class="flex-fill bg-grey-dark-3 h-70p"></div>
    <div class="flex-fill bg-grey-dark-4 h-70p"></div>
    <div class="flex-fill bg-grey-dark-5 h-70p"></div>
</template>

<div>
    <div class="flex-fill bg-grey-light-5 h-70p"></div>
    <div class="flex-fill bg-grey-light-4 h-70p"></div>
    <div class="flex-fill bg-grey-light-3 h-70p"></div>
    <div class="flex-fill bg-grey-light-2 h-70p"></div>
    <div class="flex-fill bg-grey-light-1 h-70p"></div>
    <div class="flex-fill bg-grey h-70p"></div>
    <div class="flex-fill bg-grey-dark-1 h-70p"></div>
    <div class="flex-fill bg-grey-dark-2 h-70p"></div>
    <div class="flex-fill bg-grey-dark-3 h-70p"></div>
    <div class="flex-fill bg-grey-dark-4 h-70p"></div>
    <div class="flex-fill bg-grey-dark-5 h-70p"></div>
</div>

Background Opacity

A set of dark & light background is made with different transparencies.

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

<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>

import React from 'react';
function BackgrounOpacity() {
  return (
     <>
        <div className="bg-success p-2 text-white">This is default success background</div>
        <div className="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
        <div className="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
        <div className="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
        <div className="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
     </>
  );
}
export default BackgrounOpacity;

import React from 'react';
function BackgrounOpacity() {
  return (
     <>
        <div className="bg-success p-2 text-white">This is default success background</div>
        <div className="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
        <div className="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
        <div className="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
        <div className="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
     </>
  );
}
export default BackgrounOpacity;

<template>
    <div class="bg-success p-2 text-white">This is default success
        background</div>
    <div class="bg-success p-2 text-white bg-opacity-75">This is 75%
        opacity success background</div>
    <div class="bg-success p-2 text-dark bg-opacity-50">This is 50%
        opacity success background</div>
    <div class="bg-success p-2 text-dark bg-opacity-25">This is 25%
        opacity success background</div>
    <div class="bg-success p-2 text-dark bg-opacity-10">This is 10%
        opacity success background</div>
</template>

<template>
    <div class="bg-success p-2 text-white">This is default success
        background</div>
    <div class="bg-success p-2 text-white bg-opacity-75">This is 75%
        opacity success background</div>
    <div class="bg-success p-2 text-dark bg-opacity-50">This is 50%
        opacity success background</div>
    <div class="bg-success p-2 text-dark bg-opacity-25">This is 25%
        opacity success background</div>
    <div class="bg-success p-2 text-dark bg-opacity-10">This is 10%
        opacity success background</div>
</template>

<div>
    <div class="bg-success p-2 text-white">This is default success
        background</div>
    <div class="bg-success p-2 text-white bg-opacity-75">This is 75%
        opacity success background</div>
    <div class="bg-success p-2 text-dark bg-opacity-50">This is 50%
        opacity success background</div>
    <div class="bg-success p-2 text-dark bg-opacity-25">This is 25%
        opacity success background</div>
    <div class="bg-success p-2 text-dark bg-opacity-10">This is 10%
        opacity success background</div>
</div>

Overlay

Use .bg-overlay .bg-success .bg-opacity-*.

<div class="overlay-wrap">
<img class="d-block w-100 img-fluid" src="dist/img/trans-bg.jpg" alt="img" />
<div class="bg-overlay bg-success bg-opacity-25"></div>

import React from 'react';
//images
import bgimg from '../../../Assets/dist/img/trans-bg.jpg';
function Overlay() {
  return (
     <>
        <div className="overlay-wrap">
            <img className="d-block w-100 img-fluid" src={bgimg} alt="img" />
            <div className="bg-overlay bg-success bg-opacity-25" />
        </div>
        <div className="overlay-wrap">
            <img className="d-block w-100 img-fluid" src={bgimg} alt="img" />
            <div className="bg-overlay bg-light bg-opacity-25" />
        </div>
     </>
  );
}
export default Overlay;

import React from 'react';
//images
import bgimg from '../../../Assets/dist/img/trans-bg.jpg';
function Overlay() {
  return (
     <>
        <div className="overlay-wrap">
            <img className="d-block w-100 img-fluid" src={bgimg} alt="img" />
            <div className="bg-overlay bg-success bg-opacity-25" />
        </div>
        <div className="overlay-wrap">
            <img className="d-block w-100 img-fluid" src={bgimg} alt="img" />
            <div className="bg-overlay bg-light bg-opacity-25" />
        </div>
     </>
  );
}
export default Overlay;

<script setup>
    import bgImg from '@/img-src/trans-bg.jpg'
</script>
<template>
    <div class="overlay-wrap">
        <img class="d-block w-100 img-fluid" :src="bgImg" alt="img" />
        <div class="bg-overlay bg-success bg-opacity-25"></div>
    </div>
    <div class="overlay-wrap">
        <img class="d-block w-100 img-fluid" :src="bgImg" alt="img" />
        <div class="bg-overlay bg-light bg-opacity-25"></div>
    </div>
</template>

<script setup>
    import bgImg from '@/img-src/trans-bg.jpg'
</script>
<template>
    <div class="overlay-wrap">
        <img class="d-block w-100 img-fluid" :src="bgImg" alt="img" />
        <div class="bg-overlay bg-success bg-opacity-25"></div>
    </div>
    <div class="overlay-wrap">
        <img class="d-block w-100 img-fluid" :src="bgImg" alt="img" />
        <div class="bg-overlay bg-light bg-opacity-25"></div>
    </div>
</template>

<script>
    let bgImg = "img-src/bgImg.jpg";
</script>
<div>
    <div class="overlay-wrap">
        <img class="d-block w-100 img-fluid" src={bgImg} alt="img" />
        <div class="bg-overlay bg-success bg-opacity-25"></div>
    </div>
    <div class="overlay-wrap">
        <img class="d-block w-100 img-fluid" src={bgImg} alt="img" />
        <div class="bg-overlay bg-light bg-opacity-25"></div>
    </div>
</div>

Solid Color
Dark Color
Grey Color
Background Opacity
Overlay