<h2 class="toc">Round</h2>
<p>Add the <code>.round</code> class to round the corners of an element.</p>
{% apply view_source %}
<p>
  <button type="button" class="btn btn-primary round">
    <i class="fa fa-plus"></i>
  </button>
  <button type="button" class="btn btn-dark round">
    <i class="fa fa-home"></i> Button
  </button>
  <button type="button" class="btn btn-success round">
    Badge <span class="badge badge-light round">9</span>
  </button>
  <span class="badge badge-pill badge-primary round">Round pill</span>
  <a href="#" class="badge badge-primary round">Round pill link</a>
</p>
{% end %}

{% apply view_source %}
<p class="alert alert-warning round" role="alert">
  <strong>Round alert</strong> with an <a class="alert-link" href="#">alert link</a>.
</p>
<p>
  <ol class="breadcrumb round">
    <li class="breadcrumb-item"><a href="#">Round</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
  </ol>
</p>
<form>
  <div class="form-group">
    <input type="search" class="form-control round" placeholder="Round form-control">
  </div>
</form>
{% end %}

{% apply view_source %}
<ul class="nav nav-pills mb-3">
  <li class="nav-item">
    <a class="nav-link round active" href="#">Round</a>
  </li>
  <li class="nav-item">
    <a class="nav-link round" href="#">Pills</a>
  </li>
</ul>
<p class="navbar navbar-dark bg-dark round">
  <a class="navbar-brand" href="#">Round Navbar</a>
</p>
<div class="progress round mb-3">
  <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
{% end %}

{% apply view_source %}
<div class="mb-3">
  <img class="img w-25 bg-primary round" src="hdinsight.png" alt="Sample image">
</div>
{% end %}

<h3>Border radius sizes</h3>

{% apply view_source %}
<div class="row">
  <div class="col">
    <button type="button" class="btn btn-secondary round">.round</button>
    <button type="button" class="btn btn-secondary border-radius-xl">.border-radius-xl</button>
    <button type="button" class="btn btn-secondary border-radius-lg">.border-radius-lg</button>
    <button type="button" class="btn btn-secondary border-radius   ">.border-radius</button>
    <button type="button" class="btn btn-secondary border-radius-sm">.border-radius-sm</button>
    <button type="button" class="btn btn-secondary no-border-radius">.no-border-radius</button>
  </div>
</div>
{% end %}
