I'm attempting to create a basic email form similar to the one shown in the Bootstrap 4 documentation. However, I am facing an issue where the formatting is not displaying correctly.
Here is what the example should look like: https://i.sstatic.net/qxm5f.png
But this is how it appears in my project: https://i.sstatic.net/ux3p6.png
It seems that there might be something within my codebase or environment causing the layout to distort. Why are my fields not appearing on separate rows as in the example? Why is there no spacing between elements? And why isn't the submit button blue? It's quite chaotic. Could it be an issue with my Bootstrap 4 installation?
I have copied the exact HTML from the example. The code is provided below:
<template>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</template>
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// @ts-ignore
createApp(App).use(store).use(router).mount('#app')