Logo

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>
                        

Notifications 24 New

Quick Actions finance & reports

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

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Demo 23
Demo 24
Demo 25
Demo 26
Demo 27
Demo 28
Demo 29
Demo 30