Expected behavior

Using a contact form template from the bootstrap website and applying the necessary references for core bootstrap, css etc the form should perform as it does in the template where clicking a text field should push the label above the input field and allow you to type.\

https://mdbootstrap.com/docs/jquery/forms/contact/

Actual behavior

What actually happens is that the floating label will only move if it is using a saved form input stored in my browser e.g. my email address but if I tried to type an email address in manually the label does not move so the text overlaps each other.As a workaround I am using a placeholder which disappears once you begin to type instead of a label but would prefer if I could have the label working as it looks much nicer.

Resources (screenshots, code snippets etc.)

This is what the input fields look like using a placeholder for the name field and floating label for the email field with my email being selected from a saved form template in my browser.1

https://imgur.com/a/ZYVQjvU - Here is the floating label field not working on a manual input

This is what the label code looks like - I added the offset-4 myself for page placement but have tried without and makes no difference.

<div class="col-md-8 offset-4">
   <div class="md-form mb-0">
      <input type="text" id="email" name="email" class="form-control">
      <label for="email" class="">Your email</label>
   </div>

If anyone has any insight much appreciated.