I am facing an issue with my website that uses Bootstrap 4. The contact form in my design is beautifully aligned, but on my actual website, it appears misaligned. I have experimented with floats and tried organizing the form elements in rows and columns, but nothing seems to work.
Here is the snippet of CSS and HTML code I am using for the form:
footer input, textarea {
background: #fff;
border: none;
-webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
-moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
border-radius: 15px;
display: inline-block;
}
footer button.btn {
display: flex;
justify-self: flex-end;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
}<div class="col-md">
<form action="" method="post">
<div class="row">
<label for="name">Name</label>
<input type="text" name="name">
<label for="email">Email</label>
<input type="text" name="email"><br>
<div class="form-group row">
<label for="message">Subject</label>
<textarea name="message" id="" cols="30" rows="10"></textarea>
<button type="submit" class="btn btn-info">Send</button>
</div>
</div>
</form>
</div>If you want to see all of my code, you can check it out here.
Any help or suggestions would be greatly appreciated. Thank you.