<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this
    important alert message.
</div>

<div class="alert alert-info" role="alert">
    <strong>Heads up!</strong> This alert needs your attention,
    but it's not super important.
</div>

<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong>
  <a href="#" class="alert-link">Change a few things up</a>
  and try submitting again.
</div>

<div class="alert alert-warning alert-dismissible fade in" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-link">Link</button>

<button type="button" class="btn btn-primary-outline">Primary</button>

<button type="button" class="btn btn-secondary-outline">Secondary</button>

<button type="button" class="btn btn-success-outline">Success</button>

<button type="button" class="btn btn-info-outline">Info</button>

<button type="button" class="btn btn-warning-outline">Warning</button>

<button type="button" class="btn btn-danger-outline">Danger</button>

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

<div class="btn-group-vertical" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button"
            class="btn btn-secondary dropdown-toggle"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-secondary">Action</button>
  <button type="button" class="btn btn-secondary dropdown-toggle"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">Dropup</button>
  <button type="button" class="btn btn-secondary dropdown-toggle"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

<button type="button" class="btn btn-primary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>

<button type="button" class="btn btn-primary"
        data-toggle="button" aria-pressed="false">
  Single toggle
</button>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio 2
  </label>
</div>

<div class="card">
  <img class="card-img-top" src="/images/pathToYourImage.png"
       alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on
    the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card">
  <div class="card-block">
    <p class="card-text">Some quick example text to build on
    the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<div class="card">
  <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
  <div class="card-block"> Some more card content </div>
</div>

<div class="card">
  <div class="card-block">
    <p class="card-text">This image is in the middle</p>
  </div>
  <img src="/images/pathToYourImage.png" alt="Card image">
  <div class="card-block">
    <p class="card-text">of a card.</p>
  </div>
</div>

<div class="card">
  <div class="card-block"> Some more card content </div>
  <img class="card-img-bottom" src="/images/pathToYourImage.png" alt="Card image cap">
</div>

<div class="card">
  <img class="card-img" src="/images/pathToYourImage.png" alt="Card image">
  <div class="card-img-overlay">
    <p class="card-text">I'm text that has a background image!</p>
  </div>
</div>

<div class="card card-inverse">
  <img class="card-img" src="/images/pathToYourImage.png" alt="Card image">
  <div class="card-img-overlay">
    <p class="card-text">I'm INVERTED text that has a background image!</p>
  </div>
</div>

<div class="card">
  <div class="card-block">
    <h3 class="card-title">Card title</h3>
  </div>
</div>

<div class="card">
  <div class="card-block">
    <h6 class="card-subtitle">Card subtitle</h6>
  </div>
</div>

<div class="card">
  <div class="card-block">
    <a href="#" class="card-link">Card link</a>
  </div>
</div>

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <p class="card-text">Some more card content</p>
  </div>
</div>

<div class="card">
  <div class="card-block">
    <p class="card-text">Some more card content</p>
  </div>
  <div class="card-footer">
    2 days ago
  </div>
</div>

<div class="card card-inverse card-primary text-xs-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

<div class="card card-inverse card-success text-xs-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

<div class="card card-inverse card-info text-xs-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

<div class="card card-inverse card-warning text-xs-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

<div class="card card-inverse card-danger text-xs-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

<div class="card-group">
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
  </div>
</div>

<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
    </div>
  </div>
</div>

<div class="card-columns">
  <div class="card">
    <div class="card-block">
      <!-- Card content -->
    </div>
  </div>
  <div class="card card-block">
      <!-- Card content -->
  </div>
  <div class="card card-block">
      <!-- Card content -->
  </div>
  <div class="card card-block">
      <!-- Card content -->
  </div>
</div>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="/images/pathToYourImage.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="/images/pathToYourImage.png" alt="Second slide">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<div id="carousel-example-with-caption" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-with-caption" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-with-caption" data-slide-to="1"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="/images/pathToYourImage.png" alt="First slide">
      <div class="carousel-caption">
          <h3>Image caption</h3>
          <p>Image description</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="/images/pathToYourImage.png" alt="Second slide">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-with-caption" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-with-caption" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-block">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
           aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
           aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
    </div>
  </div>
</div>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle"
          type="button" id="dropdownMenu1" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle"
          type="button" id="dropdownMenu2" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle"
          type="button" id="dropdownMenu3" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <h6 class="dropdown-header">Dropdown header</h6>
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle"
          type="button" id="dropdownMenu4" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Separated link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle"
          type="button" id="dropdownMenu5" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item disabled" href="#">Disabled action</a>
  </div>
</div>

<form>
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-primary">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName3">Name</label>
    <input type="text" class="form-control" id="exampleInputName3" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail3">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-primary">Send invitation</button>
</form>

<form>
  <div class="row">
    <div class="col-xs-2">
      <input type="text" class="form-control" placeholder=".col-xs-2">
    </div>
    <div class="col-xs-3">
      <input type="text" class="form-control" placeholder=".col-xs-3">
    </div>
    <div class="col-xs-4">
      <input type="text" class="form-control" placeholder=".col-xs-4">
    </div>
  </div>
</form>

<fieldset class="form-group">
  <label for="exampleInputEmail1">Email address</label>
  <input type="email" class="form-control"
         id="exampleInputEmail1" placeholder="Enter email">
  <small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>

<input type="text" class="form-control" id="exampleField" placeholder="Type here">

<input type="file" class="form-control-file" id="exampleInputFile">

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else
  </label>
</div>

<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

<div class="radio-inline">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios4" value="option1" checked>
    Option one is this
  </label>
</div>
<div class="radio-inline">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios5" value="option2">
    Option two can be something else
  </label>
</div>

<div class="checkbox">
  <label>
    <input type="checkbox"> Check me out
  </label>
</div>

<div class="checkbox-inline">
  <label>
    <input type="checkbox"> Check me out
  </label>
</div>
<div class="checkbox-inline">
  <label>
    <input type="checkbox"> Check me out
  </label>
</div>

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">

<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<div class="form-group has-success">
  <label class="form-control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control form-control-success" id="inputSuccess1">
</div>
<div class="checkbox has-success">
  <label>
    <input type="checkbox" id="checkboxSuccess" value="option1">
    Checkbox with success
  </label>
</div>

<div class="form-group has-warning">
  <label class="form-control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control form-control-warning" id="inputWarning1">
</div>
<div class="checkbox has-warning">
  <label>
    <input type="checkbox" id="checkboxWarning" value="option1">
    Checkbox with warning
  </label>
</div>

<div class="form-group has-danger">
  <label class="form-control-label" for="inputDanger1">Input with danger</label>
  <input type="text" class="form-control form-control-danger" id="inputDanger1">
</div>
<div class="checkbox has-danger">
  <label>
    <input type="checkbox" id="checkboxDanger" value="option1">
    Checkbox with danger
  </label>
</div>

<div class="input-group">
  <span class="input-group-addon">Left addon</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">Right addon</span>
</div>

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">Left addon</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon2">Left addon</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox" aria-label="Checkbox for following text input">
  </span>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="input-group">
  <span class="input-group-addon">
    <input type="radio" aria-label="Radio button for following text input">
  </span>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-danger" type="button">Hate it</button>
  </span>
  <input type="text" class="form-control" placeholder="Product name">
  <span class="input-group-btn">
    <button class="btn btn-success" type="button">Love it</button>
  </span>
</div>

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-secondary dropdown-toggle"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-secondary">Action</button>
    <button type="button" class="btn btn-secondary dropdown-toggle"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
</div>

<label class="c-input c-checkbox">
  <input type="checkbox">
  <span class="c-indicator"></span>
  Check this custom checkbox
</label>

<label class="c-input c-radio">
  <input id="radio1" name="radio" type="radio">
  <span class="c-indicator"></span>
  Toggle this custom radio
</label>

<div class="c-inputs-stacked">
  <label class="c-input c-radio">
    <input id="radioStacked1" name="radio-stacked" type="radio">
    <span class="c-indicator"></span>
    Toggle this custom radio
  </label>
  <label class="c-input c-radio">
    <input id="radioStacked2" name="radio-stacked" type="radio">
    <span class="c-indicator"></span>
    Or toggle this other custom radio
  </label>
</div>

<select class="c-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<label class="file">
  <input type="file" id="file">
  <span class="file-custom"></span>
</label>

<div class="container">
  <!-- Content here -->
</div>

<div class="container-fluid">
  <!-- A fluid container that uses the full witdh -->
</div>

<div class="container">
  <div class="row">
  <!-- col- elements here -->
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-xs-2">
      <!-- Content -->
    </div>
    <div class="col-xs-2">
      <!-- Content -->
    </div>
    <div class="col-xs-8">
      <!-- Content -->
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-2">
      <!-- Content -->
    </div>
    <div class="col-sm-2">
      <!-- Content -->
    </div>
    <div class="col-sm-8">
      <!-- Content -->
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-2">
      <!-- Content -->
    </div>
    <div class="col-md-2">
      <!-- Content -->
    </div>
    <div class="col-md-8">
      <!-- Content -->
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-lg-2">
      <!-- Content -->
    </div>
    <div class="col-lg-2">
      <!-- Content -->
    </div>
    <div class="col-lg-8">
      <!-- Content -->
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-xl-2">
      <!-- Content -->
    </div>
    <div class="col-xl-2">
      <!-- Content -->
    </div>
    <div class="col-xl-8">
      <!-- Content -->
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-xs-3 col-xs-offset-6">
      <!-- Content -->
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-9 col-md-push-3">
     <!-- Content -->
  </div>
  <div class="col-md-3 col-md-pull-9">
     <!-- Content -->
  </div>
</div>

<div class="row">
  <div class="col-md-9 col-md-push-3">
     <!-- Content -->
  </div>
  <div class="col-md-3 col-md-pull-9">
     <!-- Content -->
  </div>
</div>

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

<img src="/images/pathToYourImage.png" class="img-fluid" alt="Responsive image">

<img class="img-rounded" src="/images/pathToYourImage.png" alt="Rounded image">

<img class="img-circle" src="/images/pathToYourImage.png" alt="Circle image">

<img class="img-thumbnail" src="/images/pathToYourImage.png" alt="Thumbnail image">

<div class="jumbotron">
  <h1 class="display-3">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for
                  calling extra attention to featured content or information.</p>
  <hr class="m-y-2">
  <p>It uses utility classes for typography and
     spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Some action</a>
  </p>
</div>

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-3">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies
                    the entire horizontal space of its parent.</p>
  </div>
</div>

<h1>Example heading <span class="label label-default">New</span></h1>
<h2>Example heading <span class="label label-default">New</span></h2>
<h3>Example heading <span class="label label-default">New</span></h3>
<h4>Example heading <span class="label label-default">New</span></h4>
<h5>Example heading <span class="label label-default">New</span></h5>
<h6>Example heading <span class="label label-default">New</span></h6>

<span class="label label-pill label-default">Default</span>

<span class="label label-primary">Primary</span>

<span class="label label-success">Success</span>

<span class="label label-info">Info</span>

<span class="label label-warning">Warning</span>

<span class="label label-danger">Danger</span>

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

<!-- This uses <a> elements instead of <li> elements -->
<div class="list-group">
  <a href="#" class="list-group-item"> Cras justo odio </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item active"> Cras justo odio </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item disabled"> Cras justo odio </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success"> Cras justo odio </a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-info"> Cras justo odio </a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-warning"> Cras justo odio </a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-danger"> Cras justo odio </a>
</div>

<ul class="list-group">
  <li class="list-group-item">
    <span class="label label-default label-pill pull-xs-right">14</span>
    Cras justo odio
  </li>
  <li class="list-group-item">
    <span class="label label-default label-pill pull-xs-right">2</span>
    Dapibus ac facilisis in
  </li>
  <li class="list-group-item">
    <span class="label label-default label-pill pull-xs-right">1</span>
    Morbi leo risus
  </li>
</ul>

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
</div>

<div class="media">
  <a class="media-left" href="#">
    <img class="media-object" src="/images/pathToYourImage.png"
         alt="Generic placeholder image">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla.<br>
    Nulla vel metus scelerisque ante sollicitudin commodo.<br>
    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.<br>
  </div>
</div>

<div class="media">
  <a class="media-left media-middle" href="#">
    <img class="media-object" src="/images/pathToYourImage.png"
         alt="Generic placeholder image">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla.<br>
    Nulla vel metus scelerisque ante sollicitudin commodo.<br>
    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.<br>
  </div>
</div>

<div class="media">
  <a class="media-left media-bottom" href="#">
    <img class="media-object" src="/images/pathToYourImage.png"
         alt="Generic placeholder image">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla.<br>
    Nulla vel metus scelerisque ante sollicitudin commodo.<br>
    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.<br>
  </div>
</div>

<div class="media">
  <a class="media-left" href="#">
    <img class="media-object" src="/images/pathToYourImage.png"
         alt="Generic placeholder image">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla.<br>
    Nulla vel metus scelerisque ante sollicitudin commodo.<br>
    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.<br>
  </div>
</div>

<div class="media">
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla.<br>
    Nulla vel metus scelerisque ante sollicitudin commodo.<br>
    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.<br>
  </div>
  <a class="media-right" href="#">
    <img class="media-object" src="/images/pathToYourImage.png"
         alt="Generic placeholder image">
  </a>
</div>

<ul class="media-list">
  <li class="media">
    <a class="media-left" href="#">
      <img class="media-object" src="/images/pathToYourImage.png" alt="Generic placeholder image">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      <p>A short sentence to save some space in the code sample</p>
    </div>
  </li>
  <li class="media">
    <a class="media-left" href="#">
      <img class="media-object" src="/images/pathToYourImage.png" alt="Generic placeholder image">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      <p>A short sentence to save some space in the code sample</p>
    </div>
  </li>
</ul>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="/images/pathToYourImage.png" alt="Generic placeholder image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla.
    <div class="media">
      <a class="media-left" href="#">
        <img class="media-object" src="/images/pathToYourImage.png" alt="Generic placeholder image">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Nested media heading</h4>
        Cras sit amet nibh libero, in gravida nulla.</div>
    </div>
  </div>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel1">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal7">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal7" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel3" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal3">
  Launch large modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel5" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal5">
  Launch small modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal5" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel7" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>