Color
Color customizes Bootstrap’s default color classes to implement CentOS Colors consistently.
light
primary
secondary
dark
danger
warning
success
info
Presentation template
Color presentation template is the following:
<div class="bg-light py-4 text-center"><div class="h4 text-bg-light">light</div></div>
<div class="d-flex justify-content-between">
<div class="bg-primary py-4 w-50 text-center"><div class="h4 text-bg-primary">primary</div></div>
<div class="bg-secondary py-4 w-50 text-center"><div class="h4 text-bg-secondary">secondary</div></div>
</div>
<div class="bg-dark py-4 text-center"><div class="h4 text-bg-dark">dark</div></div>
<div class="d-flex justify-content-between">
<div class="bg-danger py-2 text-center w-25"><div class="text-bg-danger">danger</div></div>
<div class="bg-warning py-2 text-center w-25"><div class="text-bg-warning">warning</div></div>
<div class="bg-success py-2 text-center w-25"><div class="text-bg-success">success</div></div>
<div class="bg-info py-2 text-center w-25"><div class="text-bg-info">info</div></div>
</div>
Configuration file
Color configuration is in the src/SASS/_variables.css file.
Configuration variables
Color configuration variables are the following:
// --------------------------------------------------------------------------------
// CentOS Colors
// --------------------------------------------------------------------------------
$centos-purple: #a14f8c;
$centos-orange: #efa724;
$centos-blue: #262577;
$centos-green: #9ccd2a;
// --------------------------------------------------------------------------------
// Bootstrap Colors' Customization
// --------------------------------------------------------------------------------
$primary: $centos-purple;
$secondary: $centos-orange;
$dark: #200735;
$success: $centos-green;
$info: $centos-blue;
$warning: $centos-orange;
$danger: #dc3545;
$light: #f8f9fa;