I'm currently utilizing bootstrap 4 in my react project, and while the bootstrap components seem to be functional, I am facing an issue where setting margins does not work as expected. Here is a snippet of code from one of my pages:
return (
<Fragment>
<h1 className="text-center mt-5"> Input Todo</h1>
<form classname="d-flex " onSubmit={
onSubmitForm
}>
<input type="text"
placeholder="add todo"
className = "form-control"
value={description}
onChange = {e => setDescription(e.target.value)}>
</input>
<button className="btn btn-success">Add</button>
</form>
</Fragment>
)
This particular code block yields the following output:
https://i.sstatic.net/LOD5N.png
Within my index.html file, here are the bootstrap components (css, javascript) that I've included:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </body>