Logo

Utilities

Stockholm-icons / General / Search Created with Sketch.
Stockholm-icons / Communication / Group-chat Created with Sketch.
Sean UX Designer
S

Search Job

Job Management System
Stockholm-icons / General / Search Created with Sketch.
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Media / Rec Created with Sketch.

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>
                        

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