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

Metronic extends Bootstrap Spacing Classesto support spacing classes from 1to 40to 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>                            
                        

Notifications 24 New

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo