How to add phone number field with extension to webform component Theme:
Bootstrap subtheme
Modules:
https://www.drupal.org/project/webform_bt_layout,
https://www.drupal.org/project/webform,
https://www.drupal.org/project/phone,
https://www.drupal.org/project/webform_phone.
Steps:
Enter 'Phone No' in component field.
Selected 'Phone Number' as   field type.
Clicked 'Add'
Country was selected as 'US/Canada' (I am accepting only US/Canada 10 digits)
Separator field has dash(-)
Problem:
When I visit my form, I see a one field which allows to enter more than 10 digits.
How can I make sure I can enter 10 digits numbers (separated with dashes) with upto 4 digits extension?
You could add a phone field as you described for the phone number.

And add another field of type number for the phone extension, you can limit this field to be only numeric and 4 digits.  

And even to make sure that the phone number is introduced and not only the 'phone extension', you can add a Webform conditional to display the 'phone extension' field only if the 'phone' field has been filled.