<div class="hero py-5">
  <div class="container">
    <h1 class="f0">Bootstrap Icons</h1>
    <p class="mb-4 f3 font-weight-normal">For the first time ever, Bootstrap has its own icon library, custom designed and built for our components and documentation.</p>

    <div class="row text-muted">
      <div class="col-sm">
        <p>Bootstrap Icons are designed to work with <a href="{{ .Site.Params.main }}/">Bootstrap</a> components, from form controls to navigation. Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS. While they're built for Bootstrap, they'll work in any project.</p>
      </div>
      <div class="col-sm">
        <p>They're open sourced (MIT), so you're free to download, use, and extend. Heads up though, <strong>they're in alpha right now</strong> and subject to sweeping changes.</p>
      </div>
      <div class="col-md-3 col-lg-4">
        <script async src="https://cdn.carbonads.com/carbon.js?serve=CE7D4277&placement=iconsgetbootstrapcom" id="_carbonads_js"></script>
      </div>
    </div>

    <hr class="my-4">

    <p class="text-muted">
      Currently v{{ .Site.Params.version }}
      <span class="px-1">&#8226;</span>
      <a href="#icons">Icons</a>
      <span class="px-1">&#8226;</span>
      <a href="#install">Install</a>
      <span class="px-1">&#8226;</span>
      <a href="#usage">Usage</a>
      <span class="px-1">&#8226;</span>
      <a href="#styling">Styling</a>
      <span class="px-1">&#8226;</span>
      <a href="{{ .Site.Params.repo }}">GitHub repo</a>
    </p>
  </div>
</div>
