<h2 class="toc">Custom Bootstrap</h2>

<p><a href="../ui/bootstraptheme.css"><code>ui/bootstraptheme.css</code></a> is a
  customized version of Bootstrap with additional features.</p>

<p>You can customize Bootstrap by modifying
  <a href="https://getbootstrap.com/docs/4.2/getting-started/theming/#variable-defaults">variable</a>
  from the URL. For example:
  <a href="../ui/bootstraptheme.css?primary=maroon" target="_blank"><code>ui/bootstraptheme.css?primary=maroon</code></a>
  creates a CSS that has the primary color as maroon.
  (<a class="urlfilter" href="?primary=maroon#custom-bootstrap">See the effect on this page</a>.)</p>

<p id="custom-vars">See the <a href="https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss">list of Bootstrap variables</a>
  you can change. Here are some examples:</p>

<ul>
  <li><a class="urlfilter" href="?body-bg=yellow#custom-bootstrap"><code>?body-bg=yellow</code></a></li>
  <li><a class="urlfilter" href="?link-color=black#custom-bootstrap"><code>?link-color=black</code></a></li>
  <li><a class="urlfilter" href="?paragraph-margin-bottom=5rem#custom-bootstrap"><code>?paragraph-margin-bottom=5rem</code></a></li>
  <li><a href=".#custom-bootstrap">Reset theme</a></li>
</ul>

<p>In addition, any variable beginning with <code>color</code> is added as a
  theme color. For example, initially <strong>these buttons have no color:</strong></p>

<p>
  <button class="btn btn-color1">.btn-color1</button>
  <button class="btn btn-color-abc">.btn-color-abc</button>
</p>

<p>But click on this link:
  <a href="?color1=purple&color-abc=teal#custom-vars"><code>?color1=purple&color-abc=teal</code></a>
  to add a new <code>color1</code> and <code>color-abc</code> to the theme.
  All color methods like <code>.bg-color1</code>, <code>.text-color-abc</code>,
  etc work.
</p>

<p>You can change some common variables from the <kbd>Change Theme</kbd>
  button on at the top of this page to colors, fonts and style. The styles include:</p>

<ul>
  {% for name, info in config.toggle.items() %}
    <li>
      <a class="urlfilter" href="?{{ name }}=true#custom-bootstrap"><code>?{{ name }}={{ 'false' if info.default == 'true' else 'true' }}</code></a>
      (default: {{ info.default }})
    </li>
  {% end %}
</ul>

<p>There are also additional components and utilities in the library. See the
sidebar for a full list.</p>
