Background, Borders, and Colors

Use border utilities to quickly style the border and border-radius of an element and convey meaning through color and background-color with a handful of color utility classes.

<ph outputclass="border">...</ph>
<ph outputclass="border-top">...</ph>
<ph outputclass="border-end">...</ph>
<ph outputclass="border-bottom">...</ph>
<ph outputclass="border-start">...</ph>

// Simple C++ program to display "Hello World"

// Header file for input output functions
#include<iostream>

using namespace std;

// main function -
// where the execution of program begins
int main()
{
    // prints hello world
    cout<<"Hello World";
    return 0;
} 

<codeblock frame="sides">...</codeblock>
<lines frame="topbot" outputclass="bg-secondary-subtle p-3 border rounded">...</lines>
<table frame="all">...</table>

<section outputclass="text-primary">.text-primary</section>
<section outputclass="text-primary-emphasis">.text-primary-emphasis</section>
<section outputclass="text-secondary">.text-secondary</section>
<section outputclass="text-secondary-emphasis">.text-secondary-emphasis</section>
<section outputclass="text-success">.text-success</section>
<section outputclass="text-success-emphasis">.text-success-emphasis</section>
<section outputclass="text-danger">.text-danger</section>
<section outputclass="text-danger-emphasis">.text-danger-emphasis</section>
<section outputclass="text-warning bg-dark">.text-warning</section>
<section outputclass="text-warning-emphasis">.text-warning-emphasis</section>
<section outputclass="text-info bg-dark">.text-info</section>
<section outputclass="text-info-emphasis">.text-info-emphasis</section>
<section outputclass="text-light bg-dark">.text-light</section>
<section outputclass="text-light-emphasis">.text-light-emphasis</section>
<section outputclass="text-dark bg-white">.text-dark</section>
<section outputclass="text-dark-emphasis">.text-dark-emphasis</section>
<section outputclass="text-body">.text-body</section>
<section outputclass="text-muted">.text-muted</section>

<section outputclass="text-body-emphasis">.text-body-emphasis</section>
<section outputclass="text-body-secondary">.text-body-secondary</section>
<section outputclass="text-body-tertiary">.text-body-tertiary</section>

<section outputclass="text-black bg-white">.text-black</section>
<section outputclass="text-white bg-dark">.text-white</section>
<section outputclass="text-black-50 bg-white">.text-black-50</section>
<section outputclass="text-white-50 bg-dark">.text-white-50</section>

<section outputclass="p-3 mb-2 bg-primary text-white">.bg-primary</section>
<section outputclass="p-3 mb-2 bg-primary-subtle text-emphasis-primary">.bg-primary-subtle</section>
<section outputclass="p-3 mb-2 bg-secondary text-white">.bg-secondary</section>
<section outputclass="p-3 mb-2 bg-secondary-subtle text-emphasis-secondary">.bg-secondary-subtle</section>
<section outputclass="p-3 mb-2 bg-success text-white">.bg-success</section>
<section outputclass="p-3 mb-2 bg-success-subtle text-emphasis-success">.bg-success-subtle</section>
<section outputclass="p-3 mb-2 bg-danger text-white">.bg-danger</section>
<section outputclass="p-3 mb-2 bg-danger-subtle text-emphasis-danger">.bg-danger-subtle</section>
<section outputclass="p-3 mb-2 bg-warning text-dark">.bg-warning</section>
<section outputclass="p-3 mb-2 bg-warning-subtle text-emphasis-warning">.bg-warning-subtle</section>
<section outputclass="p-3 mb-2 bg-info text-dark">.bg-info</section>
<section outputclass="p-3 mb-2 bg-info-subtle text-emphasis-info">.bg-info-subtle</section>
<section outputclass="p-3 mb-2 bg-light text-dark">.bg-light</section>
<section outputclass="p-3 mb-2 bg-light-subtle text-emphasis-light">.bg-light-subtle</section>
<section outputclass="p-3 mb-2 bg-dark text-white">.bg-dark</section>
<section outputclass="p-3 mb-2 bg-dark-subtle text-emphasis-dark">.bg-dark-subtle</section>
<section outputclass="p-3 mb-2 bg-body-secondary">.bg-body-secondary</section>
<section outputclass="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</section>

<section outputclass="p-3 mb-2 bg-body text-body">.bg-body</section>
<section outputclass="p-3 mb-2 bg-black text-white">.bg-black</section>
<section outputclass="p-3 mb-2 bg-white text-dark">.bg-white</section>
<section outputclass="p-3 mb-2 bg-transparent text-body">.bg-transparent</section>

<!-- Add a border to codeblocks -->
<xsl:template match="*[contains(@class, ' topic/pre ')]" mode="get-output-class">
  border rounded
</xsl:template>
<!-- Enhance the short desc with a lead class -->
<xsl:template match="*[contains(@class, ' topic/shortdesc ')]" mode="get-output-class">
  text-body-secondary lead
</xsl:template>
<!-- Change the text color of the headers -->
<xsl:template match="*[contains(@class, ' topic/title ')]" mode="get-output-class">
  text-dark
</xsl:template>
<!-- Amend the text and background of Figure Captions -->
<xsl:template match="*[contains(@class, ' topic/fig ')]/*[contains(@class, ' topic/title ')]"
  mode="get-output-class" priority="5">
  text-white bg-dark
</xsl:template>