Centering a form in bootstrap not working

Question

I'm trying to center my form inside a div but the methods I'm using are not working. I tried using the justify-content-center attribute as stated by the bootstrap documentation but it is not centering it. When I try to center it but applying display: flex and justify-content: center in my CSS on the box it's wrapped in the form losses its orientation and messes up. I can't figure out how to center it, where did I go wrong. Any help is appreciated. Thanks in advance.

.onlineRefilFormCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 90%;
}

.onlineRefillTitleCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 10%;
}

.onlineRefillForm {
  position: absolute;
  top: 20%;
  width: 40%;
  height: 80%;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.form-group {
  padding-top: 5%;
}

.col-form-label {
  font-weight: 600;
}

.form-check-input {
  border: 2px solid;
}

.form-control {
  width: 60%;
  border: 2px solid;
}

.textarea {
  margin-top: -10%;
  margin-left: 17%;
  border: 2px solid;
}

.radio1 {
  margin-top: 3%;
  margin-left: 20%;
}

.form-check-inline {
  padding: 0%;
}

.OnlineSubmitBtnCon {
  position: absolute;
  bottom: 7%;
  width: 100%;
  height: 10%;
}

.OnlineSubmitBtnCon button {
  margin-left: 35%;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div class="onlineRefilFormCon">
  <div class="onlineRefillTitleCon">
    <h2 class="onlineRefillTitle">Online Refill</h2>
  </div>
  <form class="onlineRefillForm" id="onlineRefillForm">
    <div class="form-group row justify-content-center">
      <label for="text-input" class="col-2 col-form-label">First Name</label>
      <div class="col-10">
        <input class="form-control" type="text" value="" id="text-input">
      </div>
    </div>
    <div class="form-group row justify-content-center">
      <label for="text-input" class="col-2 col-form-label">Last Name</label>
      <div class="col-10">
        <input class="form-control" type="text" value="" id="text-input">
      </div>
    </div>
    <div class="form-group row justify-content-center">
      <label for="date-input" class="col-2 col-form-label">Date</label>
      <div class="col-10">
        <input class="form-control" type="date" value="yyyy-mm-dd" id="date-input">
      </div>
    </div>
    <div class="form-group row justify-content-center">
      <label for="email-input" class="col-2 col-form-label">Email</label>
      <div class="col-10">
        <input class="form-control" type="email" value="" id="email-input">
      </div>
    </div>
    <div class="form-check-inline radio1">
      <label class="form-check-label">
                    <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1"
                        value="option1" checked>
                    Pickup
                </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
                    <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2"
                        value="option2">
                    Delivery
                </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
                    <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2"
                        value="option2">
                    Mail
                </label>
    </div>
    <div class="form-group justify-content-center">
      <label for="textarea" class="col-2 col-form-label">Refill Details</label>
      <textarea class="form-control textarea" rows="7" placeholder="Example: Lisinopril"></textarea>
    </div>
    <div class="OnlineSubmitBtnCon">
      <button type="button" class="btn btn-primary contactUsSubmitBtn" onclick="proccessContactMessage()">Submit</button>
    </div>
  </form>
</div>

Cardoso · Accepted Answer · 2021-06-18T02:14:17.010

2

If you want to align the form elements center, you should use text-align:center style. So you should add text-center bootstrap class into the elements which you want to align center.

Does it work for you?

edited Jun 18 '21 at 02:14

answered Jun 18 '21 at 01:33

Cardoso

962
1
12
30

no it didn't work – seriously Jun 18 '21 at 01:44
I've updated my answer, please have a try and let me know. – Cardoso Jun 18 '21 at 01:49
nope didn't work either – seriously Jun 18 '21 at 01:53
I tried it on my end, but it works. Would you like to tell me more detail about your problem? – Cardoso Jun 18 '21 at 02:04
Please show me a screen-shot of your looks. – Cardoso Jun 18 '21 at 02:06
i thinks you mis understood me the form needs to be centered – seriously Jun 18 '21 at 02:06
So, what you mean `form needs to be centered`? – Cardoso Jun 18 '21 at 02:07
yes the form inside the box – seriously Jun 18 '21 at 02:08
I've updated the answer. Please have a check if it works for you or not. – Cardoso Jun 18 '21 at 02:14
It's my pleasure. – Cardoso Jun 18 '21 at 02:22

Ross Moody · Answer 2 · 2021-06-18T01:29:29.490

Any chance it's because the link to the bootstrap styles is broken? When I tried the example code the url failed so I uploaded a new cdn link and the form appears centered.

.onlineRefilFormCon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  font-weight: 600;
}

.onlineRefillForm {
  display: flex;
  flex-direction: column;
  width: 40%;
  padding: 48px;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.form-group {
  padding-top: 5%;
}

.form-check-input {
  border: 2px solid;
}

.form-control {
  width: 60%;
  border: 2px solid;
}

.textarea {
  margin-top: -10%;
  margin-left: 17%;
  border: 2px solid;
}

.radio1 {
  margin-top: 3%;
  margin-left: 20%;
}

.form-check-inline {
  padding: 0%;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
<div class="onlineRefilFormCon">
  <form class="onlineRefillForm" id="onlineRefillForm">
    <label for="text-input">First Name </label>
    <input type="text" value="" id="text-input" />
    <br>
    <label for="text-input">Last Name</label>
    <input type="text" value="" id="text-input" />
    <br>
    <label for="date-input">Date</label>
    <input type="date" value="yyyy-mm-dd" id="date-input" />
    <br>
    <label for="email-input">Email</label>
    <input type="email" value="" id="email-input" />
    <br>
    <label>Pickup
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked /></label>
    <br>
    <label>Delivery
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /></label>
    <br>
    <label>Mail
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /></label>
    <br>
    <label for="textarea" class="col-2 col-form-label">Refill Details</label>
    <textarea rows="7" placeholder="Example: Lisinopril"></textarea>
    <br>
    <button type="button" class="btn btn-primary contactUsSubmitBtn" onclick="proccessContactMessage()">
      Submit
    </button>
  </form>
</div>

There is a lot going on there and I don't think the revisions I just made actually answer your question entirely, but might be worth checking out the simplified approach for pros and cons. Might be some benefit to simplifying the HTML structure for spotting conflicting css declarations. — Ross Moody, Jun 18 '21 at 01:30

score 1 · Answer 3 · answered Jun 18 '21 at 02:54

1

Applying the style

margin-left:auto;margin-right:auto;

Will also center anything for future reference

answered Jun 18 '21 at 02:54

WirelessTaco

36
7

Centering a form in bootstrap not working

3 Answers3

Does it work for you?

Linked