Campo de telefone bootstrap

estou aprendendo bootstrap, e queria saber como faço para colocar um campo de telefone com seu validador do meu formulário do meu HTML.

Pega o id do input e coloca uma regex por ex

E uso particularmente esse:

http://1000hz.github.io/bootstrap-validator/

DEMO

Exemplo:


  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
<div class="row">
  <div class="col-md-4">
     <form data-toggle="validator" role="form" id="myForm" name="myForm">
        <div class="form-group">
          <label for="inputName" class="control-label">Name</label>
          <input type="text" class="form-control" id="inputName" placeholder="Guj" required>
        <div class="help-block with-errors"></div>
        </div>        
        <div class="form-group">
          <label for="inputFone" class="control-label">Telefone</label>
          <input type="text" class="form-control" id="inputFone" placeholder="Telefone" pattern="\([0-9]{2}\)[0-9]{4,6}-[0-9]{3,4}$" required>
        <div class="help-block with-errors"></div>
        </div>
        <button type="submit" class="btn btn-primary">Enviar</button>
     </form>
  </div>
  <div class="col-md-4"></div>
</div>

DEMO