OBE:BS4 COLORS
A customized Bootstrap 4 SASS build focused on integrating a full illustration color wheel palette into Bootstrap 4 elements, components and conventions.
These are your standard text colors.
These are your standard hyperlink colors.
These are your sets of tints (via adding white) and shades (via adding black) for each of your text colors.
These are sets of tints (via adding white) and shades (via adding black) for each of your link colors.
These are your standard background colors.
These are sets of tints (via adding white) and shades (via adding black) for each background color in the OBE:BS4 Color System.
These are your single color background gradients with a vertical orientation.
These are your single color background gradients with a horizontal orientation.
These are your single color radial background gradients.
These are your single color diagonal up background gradients.
These are your single color diagonal down background gradients.
These are your two color vertical background gradients.
These are your two color horizontal background gradients.
These are your two color diagonal upward gradients.
These are your two color diagonal downward gradients.
These are your two color radial background gradients.
These are your three color radial background gradients.
These are your three color vertical background gradients.
These are your three color horizontal background gradients.
These are your three color diagonal upward gradients.
These are your three color diagonal downward gradients.
These are your svg fill color options.
These are sets of tints (via adding white) and shades (via adding black) for each of your SVG fill colors.
These are your standard border colors.
These are your sets of tints (via adding white) and shades (via adding black) for each of your border colors.
These are your svg stroke color options.
These are sets of tints (via adding white) and shades (via adding black) for each of your SVG stroke colors.
These are your standard badge colors.
These are examples of inversed badge colors.
These are your standard alert colors.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
These are your solid ground alert colors.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
This is an example alert component with an example link! You can use this to display important information to a user in a way that visually stands out.
Note, you can use margin utilities to keep things tidy.
These are examples of color variations for Bootstrap 4 toast notification components.
These are examples of colored modal components that use Bootstrap 4 utility and color classes.
<!-- Modal Trigger -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-primary">Primary Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-primary" tabindex="-1" role="dialog" aria-labelledby="modal-primary-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-primary text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-primary-title">Primary Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-dark opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-primary" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-primary">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modal-secondary">Secondary Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-secondary" tabindex="-1" role="dialog" aria-labelledby="modal-secondary-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-secondary text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-secondary-title">Secondary Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-dark opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-secondary" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-secondary">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal-success">Success Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-success" tabindex="-1" role="dialog" aria-labelledby="modal-success-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-success">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-success-title">Success Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-success" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-success">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal-danger">Danger Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-danger" tabindex="-1" role="dialog" aria-labelledby="modal-danger-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-danger text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-danger-title">Danger Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-dark opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-danger" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-danger">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#modal-warning">Warning Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-warning" tabindex="-1" role="dialog" aria-labelledby="modal-warning-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-warning">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-warning-title">Warning Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-warning" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-warning">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modal-info">Info Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-info" tabindex="-1" role="dialog" aria-labelledby="modal-info-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-info">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-info-title">Info Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-info" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-info">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-light" data-toggle="modal" data-target="#modal-light">Light Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-light" tabindex="-1" role="dialog" aria-labelledby="modal-light-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-light">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-light-title">Light Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-light" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-light">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-dark" data-toggle="modal" data-target="#modal-dark">Dark Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-dark" tabindex="-1" role="dialog" aria-labelledby="modal-dark-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-dark text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-dark-title">Dark Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-black opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-dark" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-dark">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-white" data-toggle="modal" data-target="#modal-white">White Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-white" tabindex="-1" role="dialog" aria-labelledby="modal-white-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-white-title">White Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-white" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-white">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-light-gray" data-toggle="modal" data-target="#modal-light-gray">Light Gray Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-light-gray" tabindex="-1" role="dialog" aria-labelledby="modal-light-gray-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-light-gray">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-light-gray-title">Light Gray Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-light-gray" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-light-gray">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-gray" data-toggle="modal" data-target="#modal-gray">Gray Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-gray" tabindex="-1" role="dialog" aria-labelledby="modal-gray-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-gray text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-gray-title">Gray Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-dark opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-gray" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-gray">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-dark-gray" data-toggle="modal" data-target="#modal-dark-gray">Dark Gray Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-dark-gray" tabindex="-1" role="dialog" aria-labelledby="modal-dark-gray-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-dark-gray text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-dark-gray-title">Dark Gray Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-dark opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-dark-gray" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-dark-gray">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-black" data-toggle="modal" data-target="#modal-black">Black Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-black" tabindex="-1" role="dialog" aria-labelledby="modal-black-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-black text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-black-title">Black Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-gray opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-black" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-black">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-red" data-toggle="modal" data-target="#modal-red">Red Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-red" tabindex="-1" role="dialog" aria-labelledby="modal-red-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-red text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-red-title">Red Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-dark opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-red" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-red">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-rose" data-toggle="modal" data-target="#modal-rose">Rose Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-rose" tabindex="-1" role="dialog" aria-labelledby="modal-rose-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-rose text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-rose-title">Rose Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-dark opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-rose" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-rose">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-magenta" data-toggle="modal" data-target="#modal-magenta">Magenta Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-magenta" tabindex="-1" role="dialog" aria-labelledby="modal-magenta-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-magenta text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-magenta-title">Magenta Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-dark opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-magenta" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-magenta">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-violet" data-toggle="modal" data-target="#modal-violet">Violet Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-violet" tabindex="-1" role="dialog" aria-labelledby="modal-violet-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-violet text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-violet-title">Violet Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-dark opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-violet" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-violet">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-blue" data-toggle="modal" data-target="#modal-blue">Blue Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-blue" tabindex="-1" role="dialog" aria-labelledby="modal-blue-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-blue text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-blue-title">Blue Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-dark opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-blue" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-blue">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-azure" data-toggle="modal" data-target="#modal-azure">Azure Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-azure" tabindex="-1" role="dialog" aria-labelledby="modal-azure-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-azure text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-azure-title">Azure Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-dark opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-azure" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-azure">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-cyan" data-toggle="modal" data-target="#modal-cyan">Cyan Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-cyan" tabindex="-1" role="dialog" aria-labelledby="modal-cyan-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-cyan">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-cyan-title">Cyan Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-cyan" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-cyan">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-spring-green" data-toggle="modal" data-target="#modal-spring-green">Spring Green Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-spring-green" tabindex="-1" role="dialog" aria-labelledby="modal-spring-green-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-spring-green">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-spring-green-title">Spring Green Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-spring-green" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-spring-green">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-green" data-toggle="modal" data-target="#modal-green">Green Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-green" tabindex="-1" role="dialog" aria-labelledby="modal-green-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-green">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-green-title">Green Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-green" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-green">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-chartreuse" data-toggle="modal" data-target="#modal-chartreuse">Chartreuse Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-chartreuse" tabindex="-1" role="dialog" aria-labelledby="modal-chartreuse-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-chartreuse">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-chartreuse-title">Chartreuse Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-chartreuse" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-chartreuse">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-yellow" data-toggle="modal" data-target="#modal-yellow">Yellow Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-yellow" tabindex="-1" role="dialog" aria-labelledby="modal-yellow-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-yellow">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-yellow-title">Yellow Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-yellow" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-yellow">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-orange" data-toggle="modal" data-target="#modal-orange">Orange Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-orange" tabindex="-1" role="dialog" aria-labelledby="modal-orange-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-orange">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-orange-title">Orange Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-orange" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-orange">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-orange-gray" data-toggle="modal" data-target="#modal-orange-gray">Orange Gray Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-orange-gray" tabindex="-1" role="dialog" aria-labelledby="modal-orange-gray-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-orange-gray text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-orange-gray-title">Orange Gray Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-dark opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-orange-gray" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-orange-gray">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-dark-gray-orange" data-toggle="modal" data-target="#modal-dark-gray-orange">Dark Gray Orange Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-dark-gray-orange" tabindex="-1" role="dialog" aria-labelledby="modal-dark-gray-orange-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-dark-gray-orange text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-dark-gray-orange-title">Dark Gray Orange Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-dark opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-dark-gray-orange" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-dark-gray-orange">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-blue-gray" data-toggle="modal" data-target="#modal-blue-gray">Blue Gray Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-blue-gray" tabindex="-1" role="dialog" aria-labelledby="modal-blue-gray-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-blue-gray text-white">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-blue-gray-title">Blue Gray Modal</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom border-dark opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-blue-gray" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-blue-gray">SAVE</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger -->
<button type="button" class="btn btn-light-gray-azure" data-toggle="modal" data-target="#modal-light-gray-azure">Light Gray Azure Modal</button>
<!-- Modal Markup -->
<div class="modal fade" id="modal-light-gray-azure" tabindex="-1" role="dialog" aria-labelledby="modal-light-gray-azure-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-light-gray-azure">
<div class="modal-header border-0">
<h5 class="modal-title" id="modal-light-gray-azure-title">Light Gray Azure Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left border-top border-bottom opacity-70">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-light-gray-azure" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-light-gray-azure">SAVE</button>
</div>
</div>
</div>
</div>
These are your tooltip color options.
These are your dropdown menu color options.
These are your popover color options.
These are your standard table row/cell colors.
| # | Type | Element |
|---|---|---|
| 1 | Standard (Striped) | Row |
| 2 | Standard | Row |
| 3 | Standard (Striped) | Row |
| 4 | Standard | Row |
| 5 | Standard | Row |
| # | Type | Element |
|---|---|---|
| 1 | Primary Class (Striped) | Row |
| 2 | Primary Class | Row |
| 3 | Primary Class (Striped) | Row |
| 4 | Primary Class | Row |
| 5 | Primary Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Secondary Class (Striped) | Row |
| 2 | Secondary Class | Row |
| 3 | Secondary Class (Striped) | Row |
| 4 | Secondary Class | Row |
| 5 | Secondary Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Success Class (Striped) | Row |
| 2 | Success Class | Row |
| 3 | Success Class (Striped) | Row |
| 4 | Success Class | Row |
| 5 | Success Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Danger Class (Striped) | Row |
| 2 | Danger Class | Row |
| 3 | Danger Class (Striped) | Row |
| 4 | Danger Class | Row |
| 5 | Danger Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Warning Class (Striped) | Row |
| 2 | Warning Class | Row |
| 3 | Warning Class (Striped) | Row |
| 4 | Warning Class | Row |
| 5 | Warning Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Info Class (Striped) | Row |
| 2 | Info Class | Row |
| 3 | Info Class (Striped) | Row |
| 4 | Info Class | Row |
| 5 | Info Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Light Class (Striped) | Row |
| 2 | Light Class | Row |
| 3 | Light Class (Striped) | Row |
| 4 | Light Class | Row |
| 5 | Light Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Dark Class (Striped) | Row |
| 2 | Dark Class | Row |
| 3 | Dark Class (Striped) | Row |
| 4 | Dark Class | Row |
| 5 | Dark Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | White Class (Striped) | Row |
| 2 | White Class | Row |
| 3 | White Class (Striped) | Row |
| 4 | White Class | Row |
| 5 | White Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Light Gray Class (Striped) | Row |
| 2 | Light Gray Class | Row |
| 3 | Light Gray Class (Striped) | Row |
| 4 | Light Gray Class | Row |
| 5 | Light Gray Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Gray Class (Striped) | Row |
| 2 | Gray Class | Row |
| 3 | Gray Class (Striped) | Row |
| 4 | Gray Class | Row |
| 5 | Gray Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Dark Gray Class (Striped) | Row |
| 2 | Dark Gray Class | Row |
| 3 | Dark Gray Class (Striped) | Row |
| 4 | Dark Gray Class | Row |
| 5 | Dark Gray Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Black Class (Striped) | Row |
| 2 | Black Class | Row |
| 3 | Black Class (Striped) | Row |
| 4 | Black Class | Row |
| 5 | Black Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Red Class (Striped) | Row |
| 2 | Red Class | Row |
| 3 | Red Class (Striped) | Row |
| 4 | Red Class | Row |
| 5 | Red Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Rose Class (Striped) | Row |
| 2 | Rose Class | Row |
| 3 | Rose Class (Striped) | Row |
| 4 | Rose Class | Row |
| 5 | Rose Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Magenta Class (Striped) | Row |
| 2 | Magenta Class | Row |
| 3 | Magenta Class (Striped) | Row |
| 4 | Magenta Class | Row |
| 5 | Magenta Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Violet Class (Striped) | Row |
| 2 | Violet Class | Row |
| 3 | Violet Class (Striped) | Row |
| 4 | Violet Class | Row |
| 5 | Violet Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Blue Class (Striped) | Row |
| 2 | Blue Class | Row |
| 3 | Blue Class (Striped) | Row |
| 4 | Blue Class | Row |
| 5 | Blue Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Azure Class (Striped) | Row |
| 2 | Azure Class | Row |
| 3 | Azure Class (Striped) | Row |
| 4 | Azure Class | Row |
| 5 | Azure Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Cyan Class (Striped) | Row |
| 2 | Cyan Class | Row |
| 3 | Cyan Class (Striped) | Row |
| 4 | Cyan Class | Row |
| 5 | Cyan Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Spring Green Class (Striped) | Row |
| 2 | Spring Green Class | Row |
| 3 | Spring Green Class (Striped) | Row |
| 4 | Spring Green Class | Row |
| 5 | Spring Green Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Green Class (Striped) | Row |
| 2 | Green Class | Row |
| 3 | Green Class (Striped) | Row |
| 4 | Green Class | Row |
| 5 | Green Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Chartreuse Class (Striped) | Row |
| 2 | Chartreuse Class | Row |
| 3 | Chartreuse Class (Striped) | Row |
| 4 | Chartreuse Class | Row |
| 5 | Chartreuse Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Yellow Class (Striped) | Row |
| 2 | Yellow Class | Row |
| 3 | Yellow Class (Striped) | Row |
| 4 | Yellow Class | Row |
| 5 | Yellow Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Orange Class (Striped) | Row |
| 2 | Orange Class | Row |
| 3 | Orange Class (Striped) | Row |
| 4 | Orange Class | Row |
| 5 | Orange Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Orange Gray Class (Striped) | Row |
| 2 | Orange Gray Class | Row |
| 3 | Orange Gray Class (Striped) | Row |
| 4 | Orange Gray Class | Row |
| 5 | Orange Gray Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Dark Gray Orange Class (Striped) | Row |
| 2 | Dark Gray Orange Class | Row |
| 3 | Dark Gray Orange Class (Striped) | Row |
| 4 | Dark Gray Orange Class | Row |
| 5 | Dark Gray Orange Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Blue Gray Class (Striped) | Row |
| 2 | Blue Gray Class | Row |
| 3 | Blue Gray Class (Striped) | Row |
| 4 | Blue Gray Class | Row |
| 5 | Blue Gray Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Light Gray Azure Class (Striped) | Row |
| 2 | Light Gray Azure Class | Row |
| 3 | Light Gray Azure Class (Striped) | Row |
| 4 | Light Gray Azure Class | Row |
| 5 | Light Gray Azure Active Row | Row |
These are your standard dark table row/cell colors.
| # | Type | Element |
|---|---|---|
| 1 | Standard (Striped) | Row |
| 2 | Standard | Row |
| 3 | Standard (Striped) | Row |
| 4 | Standard | Row |
| 5 | Standard | Row |
| # | Type | Element |
|---|---|---|
| 1 | Primary Class | Row |
| 2 | Primary Class | Row |
| 3 | Primary Class | Row |
| 4 | Primary Class | Row |
| 5 | Primary Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Secondary Class | Row |
| 2 | Secondary Class | Row |
| 3 | Secondary Class | Row |
| 4 | Secondary Class | Row |
| 5 | Secondary Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Success Class | Row |
| 2 | Success Class | Row |
| 3 | Success Class | Row |
| 4 | Success Class | Row |
| 5 | Success Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Danger Class | Row |
| 2 | Danger Class | Row |
| 3 | Danger Class | Row |
| 4 | Danger Class | Row |
| 5 | Danger Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Warning Class | Row |
| 2 | Warning Class | Row |
| 3 | Warning Class | Row |
| 4 | Warning Class | Row |
| 5 | Warning Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Info Class | Row |
| 2 | Info Class | Row |
| 3 | Info Class | Row |
| 4 | Info Class | Row |
| 5 | Info Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Light Class | Row |
| 2 | Light Class | Row |
| 3 | Light Class | Row |
| 4 | Light Class | Row |
| 5 | Light Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Dark Class | Row |
| 2 | Dark Class | Row |
| 3 | Dark Class | Row |
| 4 | Dark Class | Row |
| 5 | Dark Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | White Class | Row |
| 2 | White Class | Row |
| 3 | White Class | Row |
| 4 | White Class | Row |
| 5 | White Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Light Gray Class | Row |
| 2 | Light Gray Class | Row |
| 3 | Light Gray Class | Row |
| 4 | Light Gray Class | Row |
| 5 | Light Gray Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Gray Class | Row |
| 2 | Gray Class | Row |
| 3 | Gray Class | Row |
| 4 | Gray Class | Row |
| 5 | Gray Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Dark Gray Class | Row |
| 2 | Dark Gray Class | Row |
| 3 | Dark Gray Class | Row |
| 4 | Dark Gray Class | Row |
| 5 | Dark Gray Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Black Class | Row |
| 2 | Black Class | Row |
| 3 | Black Class | Row |
| 4 | Black Class | Row |
| 5 | Black Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Red Class | Row |
| 2 | Red Class | Row |
| 3 | Red Class | Row |
| 4 | Red Class | Row |
| 5 | Red Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Rose Class | Row |
| 2 | Rose Class | Row |
| 3 | Rose Class | Row |
| 4 | Rose Class | Row |
| 5 | Rose Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Magenta Class | Row |
| 2 | Magenta Class | Row |
| 3 | Magenta Class | Row |
| 4 | Magenta Class | Row |
| 5 | Magenta Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Violet Class | Row |
| 2 | Violet Class | Row |
| 3 | Violet Class | Row |
| 4 | Violet Class | Row |
| 5 | Violet Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Blue Class | Row |
| 2 | Blue Class | Row |
| 3 | Blue Class | Row |
| 4 | Blue Class | Row |
| 5 | Blue Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Azure Class | Row |
| 2 | Azure Class | Row |
| 3 | Azure Class | Row |
| 4 | Azure Class | Row |
| 5 | Azure Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Cyan Class | Row |
| 2 | Cyan Class | Row |
| 3 | Cyan Class | Row |
| 4 | Cyan Class | Row |
| 5 | Cyan Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Spring Green Class | Row |
| 2 | Spring Green Class | Row |
| 3 | Spring Green Class | Row |
| 4 | Spring Green Class | Row |
| 5 | Spring Green Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Green Class | Row |
| 2 | Green Class | Row |
| 3 | Green Class | Row |
| 4 | Green Class | Row |
| 5 | Green Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Chartreuse Class | Row |
| 2 | Chartreuse Class | Row |
| 3 | Chartreuse Class | Row |
| 4 | Chartreuse Class | Row |
| 5 | Chartreuse Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Yellow Class | Row |
| 2 | Yellow Class | Row |
| 3 | Yellow Class | Row |
| 4 | Yellow Class | Row |
| 5 | Yellow Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Orange Class | Row |
| 2 | Orange Class | Row |
| 3 | Orange Class | Row |
| 4 | Orange Class | Row |
| 5 | Orange Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Orange Gray Class | Row |
| 2 | Orange Gray Class | Row |
| 3 | Orange Gray Class | Row |
| 4 | Orange Gray Class | Row |
| 5 | Orange Gray Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Dark Gray Orange Class | Row |
| 2 | Dark Gray Orange Class | Row |
| 3 | Dark Gray Orange Class | Row |
| 4 | Dark Gray Orange Class | Row |
| 5 | Dark Gray Orange Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Blue Gray Class | Row |
| 2 | Blue Gray Class | Row |
| 3 | Blue Gray Class | Row |
| 4 | Blue Gray Class | Row |
| 5 | Blue Gray Active Row | Row |
| # | Type | Element |
|---|---|---|
| 1 | Light Gray Azure Class | Row |
| 2 | Light Gray Azure Class | Row |
| 3 | Light Gray Azure Class | Row |
| 4 | Light Gray Azure Class | Row |
| 5 | Light Gray Azure Active Row | Row |
These are your list group color options.
These are your actionable list group color options.
These are your standard form input element colors.
These are your progress bar color options.
These are your card component color options.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
These are your card outline component color options.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.