{{ include('partials/main.html.twig') }} <head> {{ include('partials/title-meta.html.twig', {title: 'Colors'}) }} {{ include('partials/head-css.html.twig') }} </head> {{ include('partials/body.html.twig') }} <!-- Begin page --> <div id="layout-wrapper"> {{ include('partials/menu.html.twig') }} <!-- ============================================================== --> <!-- Start right Content here --> <!-- ============================================================== --> <div class="main-content"> <div class="page-content"> <div class="container-fluid"> {{ include('partials/page-title.html.twig', {pagetitle: 'Components', title: 'Colors'}) }} <div class="row"> <div class="col-12"> <div class="card"> <div class="card-header"> <h4 class="card-title">Grid options</h4> <p class="card-title-desc">See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p> </div><!-- end card header --> <div class="card-body"> <div class="table-responsive"> <table class="table table-bordered table-striped table-nowrap align-middle mb-0"> <thead> <tr> <th scope="col"> Colors </th> <th scope="col" colspan="2" class="text-center"> Background <br> Gradient </th> <th scope="col" colspan="2" class="text-center"> Background <br> Color </th> <th scope="col" colspan="2" class="text-center"> Background <br> Soft </th> <th scope="col" colspan="2" class="text-center"> Border <br> Colors </th> <th scope="col" colspan="2" class="text-center"> Text <br> Colors </th> </tr> </thead> <tbody> <tr> <th class="" scope="row"> Primary </th> <td style="width: 100px;"> <code>.bg-gradient</code> </td> <td style="width: 180px;"> <div class="bg-primary bg-gradient p-2"></div> </td> <td style="width: 100px;"> <code>.bg-primary</code> </td> <td style="width: 180px;"> <div class="bg-primary p-2"></div> </td> <td style="width: 100px;"> <code>.bg-soft-primary</code> </td> <td style="width: 180px;"> <div class="bg-soft-primary p-2"></div> </td> <td style="width: 100px;"> <code>.border-primary</code> </td> <td style="width: 180px;"> <div class="border border-primary p-2"></div> </td> <td style="width: 100px;"> <code>.text-primary</code> </td> <td style="width: 100px;"> <div class="text-primary">text-primary</div> </td> </tr> <tr> <th class="" scope="row"> Secondary </th> <td> <code>.bg-gradient</code> </td> <td> <div class="bg-secondary bg-gradient p-2"></div> </td> <td> <code>.bg-secondary</code> </td> <td> <div class="bg-secondary p-2"></div> </td> <td> <code>.bg-soft-secondary</code> </td> <td> <div class="bg-soft-secondary p-2"></div> </td> <td> <code>.border-secondary</code> </td> <td> <div class="border border-secondary p-2"></div> </td> <td> <code>.text-secondary</code> </td> <td> <div class="text-secondary">text-secondary</div> </td> </tr> <tr> <th class="" scope="row"> Success </th> <td> <code>.bg-gradient</code> </td> <td> <div class="bg-success bg-gradient p-2 align-self-center"></div> </td> <td> <code>.bg-success</code> </td> <td> <div class="bg-success p-2"></div> </td> <td> <code>.bg-soft-success</code> </td> <td> <div class="bg-soft-success p-2"></div> </td> <td> <code>.border-success</code> </td> <td> <div class="border border-success p-2"></div> </td> <td> <code>.text-success</code> </td> <td> <div class="text-success">text-success</div> </td> </tr> <tr> <th class="" scope="row"> Info </th> <td> <code>.bg-gradient</code> </td> <td> <div class="bg-info bg-gradient p-2"></div> </td> <td> <code>.bg-info</code> </td> <td> <div class="bg-info p-2"></div> </td> <td> <code>.bg-soft-info</code> </td> <td> <div class="bg-soft-info p-2"></div> </td> <td> <code>.border-info</code> </td> <td> <div class="border border-info p-2"></div> </td> <td> <code>.text-info</code> </td> <td> <div class="text-info">text-info</div> </td> </tr> <tr> <th class="" scope="row"> Warning </th> <td> <code>.bg-gradient</code> </td> <td> <div class="bg-warning bg-gradient p-2"></div> </td> <td> <code>.bg-warning</code> </td> <td> <div class="bg-warning p-2"></div> </td> <td> <code>.bg-soft-warning</code> </td> <td> <div class="bg-soft-warning p-2"></div> </td> <td> <code>.border-warning</code> </td> <td> <div class="border border-warning p-2"></div> </td> <td> <code>.text-warning</code> </td> <td> <div class="text-warning">text-warning</div> </td> </tr> <tr> <th class="" scope="row"> Danger </th> <td> <code>.bg-gradient</code> </td> <td> <div class="bg-danger bg-gradient p-2"></div> </td> <td> <code>.bg-danger</code> </td> <td> <div class="bg-danger p-2"></div> </td> <td> <code>.bg-soft-danger</code> </td> <td> <div class="bg-soft-danger p-2"></div> </td> <td> <code>.border-danger</code> </td> <td> <div class="border border-danger p-2"></div> </td> <td> <code>.text-danger</code> </td> <td> <div class="text-danger">text-danger</div> </td> </tr> <tr> <th class="" scope="row"> Dark </th> <td> <code>.bg-gradient</code> </td> <td> <div class="bg-dark bg-gradient p-2"></div> </td> <td> <code>.bg-dark</code> </td> <td> <div class="bg-dark p-2"></div> </td> <td> <code>.bg-soft-dark</code> </td> <td> <div class="bg-soft-dark p-2"></div> </td> <td> <code>.border-dark</code> </td> <td> <div class="border border-dark p-2"></div> </td> <td> <code>.text-dark</code> </td> <td> <div class="text-dark">text-dark</div> </td> </tr> <tr> <th class="" scope="row"> Light </th> <td> <code>.bg-gradient</code> </td> <td> <div class="bg-light bg-gradient p-2"></div> </td> <td> <code>.bg-light</code> </td> <td> <div class="bg-light p-2"></div> </td> <td> <code>.bg-soft-light</code> </td> <td> <div class="bg-soft-light p-2"></div> </td> <td> <code>.border-light</code> </td> <td> <div class="border border-light p-2"></div> </td> <td> <code>.text-light</code> </td> <td> <div class="text-light bg-dark">text-light</div> </td> </tr> <tr> <th class="" scope="row"> Body </th> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <code>.text-body</code> </td> <td> <div class="text-body">text-body</div> </td> </tr> <tr> <th class="" scope="row"> Muted </th> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <code>.text-muted</code> </td> <td> <div class="text-muted">text-muted</div> </td> </tr> <tr> <th class="" scope="row"> White </th> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <code>.text-white</code> </td> <td> <div class="text-white bg-dark">text-white</div> </td> </tr> <tr> <th class="" scope="row"> White-50 </th> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <code>.text-white-50</code> </td> <td> <div class="text-white-50 bg-dark">text-white-50</div> </td> </tr> <tr> <th class="" scope="row"> Black-50 </th> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <code>.text-black-50</code> </td> <td> <div class="text-black-50">text-black-50</div> </td> </tr> <tr> <th class="" scope="row"> Opacity-25 </th> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center"><code>.opacity-25</code></div> </td> <td> <div class="text-center"> <div class="bg-primary opacity-25 p-2"></div> </div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <code>.text-opacity-25</code> </td> <td> <div class="text-opacity-25 text-primary">text-opacity-25</div> </td> </tr> <tr> <th class="" scope="row"> Opacity-50 </th> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center"><code>.opacity-50</code></div> </td> <td> <div class="text-center"> <div class="bg-primary opacity-50 p-2"></div> </div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <code>.text-opacity-50</code> </td> <td> <div class="text-opacity-50 text-primary">text-opacity-50</div> </td> </tr> <tr> <th class="" scope="row"> Opacity-75 </th> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center"><code>.opacity-75</code></div> </td> <td> <div class="text-center"> <div class="bg-primary opacity-75 p-2"></div> </div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <code>.text-opacity-75</code> </td> <td> <div class="text-opacity-75 text-primary">text-opacity-75</div> </td> </tr> <tr> <th class="" scope="row"> Opacity-100 </th> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center"><code>.opacity-100</code></div> </td> <td> <div class="text-center"> <div class="bg-primary opacity-100 p-2"></div> </div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <div class="text-center">-</div> </td> <td> <code>.text-opacity-100</code> </td> <td> <div class="text-opacity-100 text-primary">text-opacity-100</div> </td> </tr> </tbody> </table> </div> </div><!-- end card body --> </div><!-- end card --> </div> <!-- end col --> </div> <!-- end row --> </div> <!-- container-fluid --> </div> <!-- End Page-content --> {{ include('partials/footer.html.twig') }} </div> <!-- end main content--> </div> <!-- END layout-wrapper --> {{ include('partials/right-sidebar.html.twig') }} {{ include('partials/vendor-scripts.html.twig') }} <script src="/js/app.js"></script> </body></html>