how to centre label in container bootstrap 4 - html

Question

Need help on getting the labels to centre in the container, please.
I've added a URL link to the image because it's having issues uploading onto a website for some reason.
I've also made the width 50% as I don't want them to take up the full width of the container which is fluid.
I tried using text-center but when I changed the width to 50% the labels defaulted left.
image
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section>
<div class="container-fluid text-center">
<div class="newsletter p-5">
<form>
<h2>Sign up to our newsletter</h2>
<p>Recieve the lastest news and offers by signing up today.</p>
<div class="form-group text-center">
<label for="input-name" class="sr-only">Your Name:</label>
<input type="text" class="form-control text-center" placeholder="firstname lastname" id="input-name">
</div>
<div class="form-group text-center">
<label for="input-email" class="sr-only">Your Email:</label>
<input type="email" class="form-control text-center" placeholder="mail#example.com" id="input-email">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="input-terms" value="terms">
I have read and accept the terms and conditions.
</label>
</div>
<div>
<small class="form-text">You can unsubscribe from the mailing list at anytime</small>
<button type="submit" class="m-1 btn btn-dark">SIGN UP</button>
</div>
</form>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Terms and Conditions</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 1

Try this:
form-group {
width: 50%;
margin: 0 auto;
padding: 5px;
}

Answer 2

Try this:
<div class="newsletter p-5">
<div class="row">
<div class="col-12 col-sm-6 offset-sm-6">
<!-- Your form here --->
</div>
</div>
</div>
Also, remove the 50% width, bootstrap columns will take care of it.
Docs: https://getbootstrap.com/docs/4.1/layout/grid/#offsetting-columns

Answer 3

wrap your form content
<div class="d-flex justify-content-center">
<div class="col-md-6 col-lg-5 col-sm-8">
<form>Your Content Here
</form>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
<div class="container-fluid text-center">
<div class="newsletter p-5">
<div class="d-flex justify-content-center">
<div class="col-md-6 col-lg-5 col-sm-8">
<form>
<h2>Sign up to our newsletter</h2>
<p>Recieve the lastest news and offers by signing up today.</p>
<div class="form-group text-center">
<label for="input-name" class="sr-only">Your Name:</label>
<input type="text" class="form-control text-center" placeholder="firstname lastname" id="input-name">
</div>
<div class="form-group text-center">
<label for="input-email" class="sr-only">Your Email:</label>
<input type="email" class="form-control text-center" placeholder="mail#example.com" id="input-email">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="input-terms" value="terms">
I have read and accept the terms and conditions.
</label>
</div>
<div>
<small class="form-text">You can unsubscribe from the mailing list at anytime</small>
<button type="submit" class="m-1 btn btn-dark">SIGN UP</button>
</div>
</form>
</div>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Terms and Conditions</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 4

Just add CSS for placeholder like below
input::placeholder{text-align:center;}