Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.
Custom Bootstrap color utility classes created for Keen.

Background Colors

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>
                        

Hover Background Colors

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>
                        

Custom Border Radius Utilities

Keen adds 2 new rounded-smand rounded-lgborder 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>

Background Radial Gradient Color

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>
                        

Background Color With Opacity

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-10sets 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>

Diagonal Background Colors

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>
                        

Predefined Height & Width Responsive Classes

  • Use .h-{size}pxand .w-{size}pxclass format to set fixed height and width in pixels to any element.
  • Use .min-h-{size}pxand .min-w-{size}pxclass format to set minimum height and width in pixels to any element.
  • Use .max-w-{size}pxand .max-w-{size}pxclass format to set maximum height and width in pixels to any element.
  • Size {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.
Lorem Ipsum is simply dummy text of the printing Lorem Ipsum is simply Lorem Ipsum is simply m Ipsum is simply

                        <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>
                        
For responsive variations for each breakpoint sm,md,lg,xl,xxl
  • Use .h-{breakpoint}-{size}pxand .w-{breakpoint}-{size}pxclass format to set fixed height and width in pixels to any element.
  • Use .min-h-{breakpoint}-{size}pxand .min-w-{breakpoint}-{size}pxclass format to set minimum height and width in pixels to any element.
  • Use .max-w-{breakpoint}-{size}pxand .max-w-{breakpoint}-{size}pxclass format to set maximum height and width in pixels to any element.
Lorem Ipsum is simply dummy text of the printing Lorem Ipsum is simply Lorem Ipsum is simply m Ipsum is simply

                        <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>
                        

Extended Bootstrap Spacing Classes

Keen extends Bootstrap Spacing Classesto support spacing classes from 1to 40to provide requied spacing option according to the Keen design principles.

.p-5 .p-10 .p-15
.m-5 .m-10 .m-15

                            <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>
                        

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

System Update

There are many variations of passages of Lorem Ipsum available.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Notifications
Pic
Marcus Smart UI/UX, Art Director
+65%
AH
Andreas Hawks Python Developer
+23%
SC
Sarah Connor HTML, CSS. jQuery
-34%
Pic
Amanda Harden UI/UX, Art Director
+72%
SR
Sean Robbins UI/UX, Art Director
+65%
JT
Jason Tatum ASP.NET Developer
+139%

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9