index.html

---
layout: default
---

<section class="row">
  <div class="col-md-12 col-lg-12 col-lg-offset-3">
    <h5>Forms</h5>
    <form class="form-inline mb-2">
      <label for="exampleInputEmail" class="text-uppercase font-secondary sr-only">username or E-mail</label>
      <input type="email" id="exampleInputEmail" class="form-control form-control-sm mb-2 mr-2" placeholder="User name">

      <label for="exampleInputPassword" class="text-uppercase font-secondary sr-only">Password</label>
      <input type="password" id="exampleInputPassword" class="form-control form-control-sm mb-2 mr-2" placeholder="Password">

      <div class="input-group mb-2 mr-2">
        <button type="submit" class="btn btn-primary btn-round-xl btn-block btn-sm">Sign In</button>
      </div>
    </form>

    <hr />

    <form class="form-inline mb-2">
      <label for="exampleInputEmail2" class="text-uppercase font-secondary sr-only">username or E-mail</label>
      <input type="email" id="exampleInputEmail2" class="form-control mb-2 mr-2" placeholder="User name">

      <label for="exampleInputPassword2" class="text-uppercase font-secondary sr-only">Password</label>
      <input type="password" id="exampleInputPassword2" class="form-control mb-2 mr-2" placeholder="Password">

      <div class="input-group mb-2 mr-2">
        <button type="submit" class="btn btn-primary btn-round-xl btn-block">Sign In</button>
      </div>
    </form>

    <hr />

    <form class="form-inline mb-2">
      <label for="exampleInputEmail3" class="text-uppercase font-secondary sr-only">username or E-mail</label>
      <input type="email" id="exampleInputEmail3" class="form-control form-control-lg mb-2 mr-2" placeholder="User name">

      <label for="exampleInputPassword3" class="text-uppercase font-secondary sr-only">Password</label>
      <input type="password" id="exampleInputPassword3" class="form-control form-control-lg mb-2 mr-2" placeholder="Password">

      <div class="input-group mb-2 mr-2">
        <button type="submit" class="btn btn-primary btn-round-xl btn-block btn-lg">Sign In</button>
      </div>
    </form>

    <hr />

    <form class="mb-2">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>

      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>

    <hr />

    <form class="mb-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
        <label class="form-check-label" for="defaultCheck1">Default checkbox</label>
      </div>

      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
        <label class="form-check-label" for="defaultCheck2">Disabled checkbox</label>
      </div>
    </form>

    <hr />

    <form class="mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
        <label class="form-check-label" for="exampleRadios1">Default radio</label>
      </div>

      <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
        <label class="form-check-label" for="exampleRadios2">Second default radio</label>
      </div>

      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
        <label class="form-check-label" for="exampleRadios3">Disabled radio</label>
      </div>
    </form>

    <hr />

    <form class="mb-2">
      <div class="form-group mb-2">
        <input class="form-control form-control-lg" type="text" placeholder="Large input">
      </div>

      <div class="form-group mb-2">
        <input class="form-control" type="text" placeholder="Default input">
      </div>

      <div class="form-group mb-2">
        <input class="form-control form-control-sm" type="text" placeholder="Small input">
      </div>
    </form>

    <hr />

    <form class="mb-2">
      <div class="form-group row">
        <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
      </div>

      <div class="form-group row">
        <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
      </div>

      <div class="form-group row">
        <div class="col-sm-10">
          <button type="submit" class="btn btn-primary">Sign In</button>
        </div>
      </div>
    </form>

    <hr />

    <form class="mb-2">
      <div class="form-group">
        <label for="inputAddress">Address</label>
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
      </div>

      <div class="form-group">
        <label for="inputAddress2">Address 2</label>
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>

      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputCity">City</label>
          <input type="text" class="form-control" id="inputCity" placeholder="City">
        </div>

        <div class="form-group col-md-4">
          <label for="inputState">State</label>
          <select id="inputState" class="form-control">
            <option selected>Choose...</option>
            <option>...</option>
          </select>
        </div>

        <div class="form-group col-md-2">
          <label for="inputZip">Zip Code</label>
          <input type="text" class="form-control" id="inputZip" placeholder="Zip Code">
        </div>
      </div>

      <div class="form-group">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="gridCheck">
          <label class="form-check-label" for="gridCheck">Check me out</label>
        </div>
      </div>

      <div class="form-group row">
        <div class="col-sm-10">
          <button type="submit" class="btn btn-primary">Save</button>
          <button type="button" class="btn btn-secondary">Cancel</button>
        </div>
      </div>
    </form>
  </div>
</section>

<hr />

<section>
  <form class="mb-2">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-link">Link</button>
  </form>
  <form class="mb-2">
    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-outline-default">Default</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-light">Light</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>
  </form>
  <form class="mb-2">
    <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
    <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
  </form>
  <div class="btn-group btn-group-toggle mb-2" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
    </label>
    <label class="btn btn-secondary">
      <input type="radio" name="options" id="option2" autocomplete="off"> Radio
    </label>
    <label class="btn btn-secondary">
      <input type="radio" name="options" id="option3" autocomplete="off"> Radio
    </label>
  </div>
</section>

<hr />

<section>
  <form class="mb-2">
    <button type="button" class="btn btn-primary btn-xs">X-Small button</button>
    <button type="button" class="btn btn-primary btn-sm">Small button</button>
    <button type="button" class="btn btn-primary">Normal button</button>
    <button type="button" class="btn btn-primary btn-lg">Large button</button>
    <button type="button" class="btn btn-primary btn-xl">X-Large button</button>
  </form>
  <form class="mb-2">
    <button type="button" class="btn btn-primary btn-sm btn-square">Square</button>
    <button type="button" class="btn btn-primary btn-sm btn-round-sm">Round Small</button>
    <button type="button" class="btn btn-primary btn-sm btn-round-lg">Round Large</button>
    <button type="button" class="btn btn-primary btn-sm btn-round-xl">Round X-Large</button>
    <button type="button" class="btn btn-primary btn-sm btn-circle">Circle</button>
  </form>
  <form class="mb-2">
    <button type="button" class="btn btn-primary btn-square">Square</button>
    <button type="button" class="btn btn-primary btn-round-sm">Round Small</button>
    <button type="button" class="btn btn-primary btn-round-lg">Round Large</button>
    <button type="button" class="btn btn-primary btn-round-xl">Round X-Large</button>
    <button type="button" class="btn btn-primary btn-circle">Circle</button>
  </form>
  <form class="mb-2">
    <button type="button" class="btn btn-primary btn-lg btn-square">Square</button>
    <button type="button" class="btn btn-primary btn-lg btn-round-sm">Round Small</button>
    <button type="button" class="btn btn-primary btn-lg btn-round-lg">Round Large</button>
    <button type="button" class="btn btn-primary btn-lg btn-round-xl">Round X-Large</button>
    <button type="button" class="btn btn-primary btn-lg btn-circle">Circle</button>
  </form>
</section>

<hr />

<section>
  <form class="mb-2">
    <a href="#" class="btn btn-primary active" role="button" aria-pressed="true">Primary link</a>
    <a href="#" class="btn btn-secondary active" role="button" aria-pressed="true">Link</a>
    <button type="button" class="btn btn-primary" disabled>Disabled button</button>
    <button type="button" class="btn btn-secondary" disabled>Button</button>
    <button type="button" class="btn btn-outline-primary" disabled>Disabled button</button>
    <button type="button" class="btn btn-outline-secondary" disabled>Button</button>
    <button type="button" class="btn btn-primary btn-shadow">Shadow button</button>
    <button type="button" class="btn btn-outline-primary btn-shadow">Button</button>
  </form>
  <div class="mb-2">
    <a href="#" class="btn btn-primary btn-round-sm btn-icon-right">
      icon right
      <span class="icon material-icons-person_outline"></span>
    </a>
    <a href="#" class="btn btn-primary btn-round-sm btn-icon-left">
      <span class="icon material-icons-info_outline"></span>
      icon left
    </a>
    <a href="#" class="btn btn-outline-secondary btn-round-sm btn-icon-right">
      icon right
      <span class="icon material-icons-favorite_border"></span>
    </a>
    <a href="#" class="btn btn-outline-secondary btn-round-sm btn-icon-left">
      <span class="icon material-icons-info_outline"></span>
      icon left
    </a>
  </div>
</section>

<hr />

<section>
  <nav aria-label="Pagination">
    <ul class="pagination pagination-sm">
      <li class="page-item disabled">
        <span class="page-link">
          &lt;
          <span class="sr-only">(previous)</span>
        </span>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#">
          &gt;
          <span class="sr-only">(next)</span>
        </a>
      </li>
    </ul>
  </nav>
  <nav aria-label="Pagination">
    <ul class="pagination">
      <li class="page-item disabled">
        <span class="page-link">
          &lt;
          <span class="sr-only">(previous)</span>
        </span>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#">
          &gt;
          <span class="sr-only">(next)</span>
        </a>
      </li>
    </ul>
  </nav>
  <nav aria-label="Pagination">
    <ul class="pagination pagination-lg">
      <li class="page-item disabled">
        <span class="page-link">
          &lt;
          <span class="sr-only">(previous)</span>
        </span>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#">
          &gt;&gt;
          <span class="sr-only">(next)</span>
        </a>
      </li>
    </ul>
  </nav>
</section>

<hr />

<section class="row">
  <div class="col-md-12">
    <h5>Typography</h5>
  </div>
  <div class="col-md-12">
    <h1>H1 Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, uis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum  olore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col-md-10">
    <h2>H2 Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, uis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum  olore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col-md-8">
    <h3>H3 Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, uis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum  olore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col-md-7">
    <h4>H4 Heading</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, uis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum  olore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col-md-7">
    <h5>H5 Heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, uis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum  olore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col-md-7">
    <h6>H6 Heading</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, uis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum  olore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <div class="col-md-12">
    <h5>Blockquote</h5>
    <hr />
    <div class="row">
      <div class="col-md-8">
        <blockquote>
          <p>Talented people with widely diverse experience enable us to coordinate effectively with any project team on all phases of a construction program. They offer dynamic growth opportunities, greater financial strength, increased bonding capabilities, and global procurement. Remain at the forefront of building the most exciting, highly desirable and notable spaces in the country.</p>
          <footer>
            <cite title="Source Title">Tom Brown</cite>
          </footer>
        </blockquote>
      </div>
    </div>
  </div>
</section>

<hr />

<section>
  <h5>HTML Text Elements</h5>
  <p><a href="#">This is a link text</a> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <strong> This is a bold text</strong>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, consequatur culpa cumque dolore dolorem dolores eligendi est in incidunt iusto magni molestias nisi</p>
  <p><mark>This is a highlighted text</mark> ipsum dolor sit amet, consectetur adipisicing elit. A accusamus ad alias amet, at consectetur consequatur consequuntur <em>This is an italic Text</em> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus <span data-toggle="tooltip" data-placement="top" title="Lorem ipsum dolor sit" class="text-light-clr">Tooltips</span>, consectetur adipisicing elit. A accusamus ad alias amet, at consectetur provident quaerat quos</p>
  <p>
    <del>This is a strike-through text</del> sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    <u>This is an underlined text</u> nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  </p>
  <div class="row mt-2">
    <div class="col-sm-6 col-lg-3">
      <h5>Unordered List</h5>
      <ul class="txt-dark marked-list max-width-xs">
        <li><a href="#">Highly Customizable</a></li>
        <li><a href="#">Pre-Built Pages</a></li>
        <li><a href="#">Clean Design</a></li>
        <li><a href="#">Extensive Options</a></li>
        <li><a href="#">Top Notch Quality</a></li>
        <li><a href="#">Responsive Design</a></li>
        <li><a href="#">Powered Page Builder</a></li>
        <li><a href="#">SEO Optimized</a></li>
        <li><a href="#">Outstanding Support</a></li>
      </ul>
    </div>
    <div class="col-sm-6 col-lg-3">
      <h5>Ordered List</h5>
      <ol class="txt-dark ordered-list max-width-xs">
        <li><a href="#">Highly Customizable</a></li>
        <li><a href="#">Pre-Built Pages</a></li>
        <li><a href="#">Clean Design</a></li>
        <li><a href="#">Extensive Options</a></li>
        <li><a href="#">Top Notch Quality</a></li>
        <li><a href="#">Responsive Design</a></li>
        <li><a href="#">Powered Page Builder</a></li>
        <li><a href="#">SEO Optimized</a></li>
        <li><a href="#">Outstanding Support</a></li>
      </ol>
    </div>
  </div>
</section>