Bootstrap4 Form Example is Rendering Incorrectly - html

Question

I'm trying to build a simple email form like in the Bootstrap 4 docs but for some reason the formatting is wrong.
This is what the example looks like:
But for some reason this is what it compiles to in my project:
Clearly there's something in my codebase/environment that's messing with the layout. Why are my fields not in separate rows like the example? Why is there no spacing between elements? Why is the submit button not blue? It's a mess. Is my bootstrap 4 dependency not installed properly?
I'm using the exact html from the example. Code 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')

Answer 1

if you are looking for a simple solution for a static website or basic stuff
all you need to do is to add this cdn to your html
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
and this bootstrap javascript cdn for dropdowns and navbar
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
and the jQuery cdn
check this link for a live preview
https://stackblitz.com/edit/web-platform-ss4nvu?file=script.js
basicly this
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
at the head tag :)
but i see that you mentioned vue js in the tags you are looking for an answer so i also recommend on going throw the website of vueJS bootstrap which is amazing if you have any trouble i am available also in gmail :)
dolev146#gmail.com

Answer 2

You forgot to link css files from bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
copy paste it in the head of your html
also read the get started documentation: bootstrap get started doc