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.

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

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

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

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}px and .w-{size}px class format to set fixed height and width in pixels to any element.
  • Use .min-h-{size}px and .min-w-{size}px class format to set minimum height and width in pixels to any element.
  • Use .max-w-{size}px and .max-w-{size}px class 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}px and .w-{breakpoint}-{size}px class format to set fixed height and width in pixels to any element.
  • Use .min-h-{breakpoint}-{size}px and .min-w-{breakpoint}-{size}px class format to set minimum height and width in pixels to any element.
  • Use .max-w-{breakpoint}-{size}px and .max-w-{breakpoint}-{size}px class 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

Metronic extends Bootstrap Spacing Classes to support spacing classes from 1 to 40 to provide requied spacing option according to the Metronic 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 12 messages

Recent Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo