Bootstrap – horizontally centering input group within form group
I’m having trouble centering my input groups within my form. Any help would be appreciate. My best guess is it’s something with the input group div, not interacting with the form group as anticipated. The header and button center, just not the inputs, as seen in the codepen below. Thanks!
Codepen: https://codepen.io/Torymae/pen/OJMoYRM
<div class="col-8 change-password-view mx-auto"> <form id="change-password" class="form-group"> <h4>Change Password</h4> <br /> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroupPrepend2"> <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-key" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/> <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/> </svg> </span> <input type="password" name="passwords[old]" placeholder="Current Password" required> </div> </div> <br /> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroupPrepend2"> <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-key" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/> <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/> </svg> </span> <input type="password" name="passwords[new]" placeholder="New Password" required> </div> </div> <br /> <button class="btn primary-btn">Change Password</button> </form> </div> 
