Utilities
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}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 range1,2,3,4,5,10,15,20,25,30 ... 95,100,125,150,175,200,225 ... 500,550,600,650 ...1000.
<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>
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.
<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.
<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>
