Standard and custom Bootstrap background color utilities:
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-gray-100
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500
.bg-gray-600
.bg-gray-700
.bg-gray-800
.bg-gray-900
.bg-white
.bg-transparent
<p class="bg-primary text-white py-2 px-4">.bg-primary</p>
<p class="bg-secondary py-2 px-4">.bg-secondary</p>
<p class="bg-success text-white py-2 px-4">.bg-success</p>
<p class="bg-danger text-white py-2 px-4">.bg-danger</p>
<p class="bg-warning text-white py-2 px-4">.bg-warning</p>
<p class="bg-info text-white py-2 px-4">.bg-info</p>
<p class="bg-light text-dark py-2 px-4">.bg-light</p>
<p class="bg-dark text-white py-2 px-4">.bg-dark</p>
<p class="bg-gray-100 text-dark-50 py-2 px-4">.bg-gray-100</p>
<p class="bg-gray-200 text-dark-50 py-2 px-4">.bg-gray-200</p>
<p class="bg-gray-300 text-dark-50 py-2 px-4">.bg-gray-300</p>
<p class="bg-gray-400 text-dark-50 py-2 px-4">.bg-gray-400</p>
<p class="bg-gray-500 text-dark-50 py-2 px-4">.bg-gray-500</p>
<p class="bg-gray-600 text-white py-2 px-4">.bg-gray-600</p>
<p class="bg-gray-700 text-white py-2 px-4">.bg-gray-700</p>
<p class="bg-gray-800 text-white py-2 px-4">.bg-gray-800</p>
<p class="bg-gray-900 text-white py-2 px-4">.bg-gray-900</p>
<p class="bg-white text-dark py-2 px-4">.bg-white</p>
<p class="bg-transparent text-dark py-2 px-4">.bg-transparent</p>
Use custom .bg-hover-{color} class to set a hover background color:
<div class="bg-gray-200 bg-hover-primary"></div>
<div class="bg-gray-200 bg-hover-success"></div>
<div class="bg-gray-200 bg-hover-danger"></div>
<div class="bg-gray-200 bg-hover-warning"></div>
<div class="bg-gray-200 bg-hover-dark"></div>
<div class="bg-gray-200 bg-hover-info"></div>
Use custom .bg-hover-state-{color} class to set a darken hover background color:
<div class="bg-gray-200 bg-hover-state-primary"></div>
<div class="bg-gray-200 bg-hover-state-success"></div>
<div class="bg-gray-200 bg-hover-state-danger"></div>
<div class="bg-gray-200 bg-hover-state-warning"></div>
<div class="bg-gray-200 bg-hover-state-dark"></div>
<div class="bg-gray-200 bg-hover-state-info"></div>
Keen adds 2 new rounded-sm and rounded-lg border radius classes to enable more sizing options for border radius:
<div class="bg-gray-200 rounded-sm"></div>
<div class="bg-gray-200 rounded"></div>
<div class="bg-gray-200 rounded-lg"></div>Subtractive border radius classes:
<div class="bg-gray-200 rounded-lg rounded-top-0"></div>
<div class="bg-gray-200 rounded-lg rounded-bottom-0"></div>
<div class="bg-gray-200 rounded-lg rounded-left-0"></div>
<div class="bg-gray-200 rounded-lg rounded-right-0"></div>
Use bg-radial-gradient-{color} class format to set a background radial gradient color.
<div class="bg-radial-gradient-primary"></div>
<div class="bg-radial-gradient-success"></div>
<div class="bg-radial-gradient-info"></div>
<div class="bg-radial-gradient-danger"></div>
<div class="bg-radial-gradient-warning"></div>
<div class="bg-radial-gradient-dark"></div>
Use bg-{color}-o-{opacity} class format to set a background color with opacity level in range 1 to 20(0.5 - 1).
For example, bg-primary-o-10 sets primary background color with opacity: 0.1.
<div class="bg-primary-o-10"></div>
<div class="bg-primary-o-20"></div>
<div class="bg-primary-o-30"></div>
<div class="bg-primary-o-40"></div>
<div class="bg-primary-o-50"></div>
<div class="bg-primary"></div>
<div class="bg-success-o-10"></div>
<div class="bg-success-o-20"></div>
<div class="bg-success-o-30"></div>
<div class="bg-success-o-40"></div>
<div class="bg-success-o-50"></div>
<div class="bg-success">
<div class="bg-warning-o-10"></div>
<div class="bg-warning-o-20"></div>
<div class="bg-warning-o-30"></div>
<div class="bg-warning-o-40"></div>
<div class="bg-warning-o-50"></div>
<div class="bg-warning">
<div class="bg-danger-o-10"></div>
<div class="bg-danger-o-20"></div>
<div class="bg-danger-o-30"></div>
<div class="bg-danger-o-40"></div>
<div class="bg-danger-o-50"></div>
<div class="bg-danger"></div>
Use .bg-diagonal, .bg-diagonal-{color} and .bg-diagonal-r-{color} class format to set diagonal background colors.
<div class="bg-diagonal bg-diagonal-primary bg-diagonal-r-light rounded h-150px"></div>
<div class="bg-diagonal bg-diagonal-success bg-diagonal-r-danger rounded h-150px"></div>
<div class="bg-diagonal bg-diagonal-info bg-diagonal-r-warning rounded h-150px"></div>
.h-{size}px and .w-{size}px class format to set fixed height and width in pixels to any element.
.min-h-{size}px and .min-w-{size}px class format to set minimum height and width in pixels to any element.
.max-w-{size}px and .max-w-{size}px class format to set maximum height and width in pixels to any element.
{size} accepts values in range 1,2,3,4,5,10,15,20,25,30 ... 95,100,125,150,175,200,225 ... 500,550,600,650 ...1000.
<div class="bg-gray-100 w-75px h-75px mr-2"></div>
<div class="bg-gray-100 min-w-100px min-h-100px mr-2"></div>
<div class="bg-gray-100 max-w-125px max-h-125px">
Lorem Ipsum is simply dummy text of the printing Lorem Ipsum is simply Lorem Ipsum is simply m Ipsum is simply
</div>
sm,md,lg,xl,xxl
.h-{breakpoint}-{size}px and .w-{breakpoint}-{size}px class format to set fixed height and width in pixels to any element.
.min-h-{breakpoint}-{size}px and .min-w-{breakpoint}-{size}px class format to set minimum height and width in pixels to any element.
.max-w-{breakpoint}-{size}px and .max-w-{breakpoint}-{size}px class format to set maximum height and width in pixels to any element.
<div class="bg-gray-100 w-50px h-50px w-lg-75px h-lg-75px mr-2"></div>
<div class="bg-gray-100 min-w-50px min-h-50px min-w-lg-100px min-h-lg-100px mr-2"></div>
<div class="bg-gray-100 max-w-75px max-h-75px max-w-125px max-h-125px">
Lorem Ipsum is simply dummy text of the printing Lorem Ipsum is simply Lorem Ipsum is simply m Ipsum is simply
</div>
Keen extends Bootstrap Spacing Classes
to support spacing classes from 1 to 40 to provide requied spacing option according to the Keen design principles.
<div class="d-flex align-items-center">
<span class="p-5 bg-light mr-2">
.p-5
</span>
<span class="p-10 bg-light mr-2">
.p-10
</span>
<span class="p-15 bg-light mr-2">
.p-15
</span>
</div>
<div class="d-flex align-items-center">
<span class="m-5 p-5 bg-light">
.m-5
</span>
<span class="m-10 p-5 bg-light">
.m-10
</span>
<span class="m-15 p-5 bg-light">
.m-15
</span>
</div>
Lorem Ipsum is simply dummy text of the printing and industry.
There are many variations of passages of Lorem Ipsum available.
Contrary to popular belief, Lorem Ipsum is not simply random text.
If you are going to use a passage of Lorem Ipsum, you need.
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
