CODEWITHSUNDEEP
htmlbuttoninputbootstrap-4center
JohnP
JohnP

Reputation: 33

Center fields using Bootstrap

I'm newbie using bootstrap, so I would like you help to center these couple of textBoxes and the button. I appreciate if there any other enhancement I can do with the code

This is part of the code I did and I'm using this as template: https://github.com/BlackrockDigital/startbootstrap-agency

<div class="row">
    <div class="col-lg-12 text-center">
        <form method="post" action="">
            <div class="col-md-6">
                <div class="form-group">
                    <input class="form-control" type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" />
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <input class="form-control" type="password" class="textbox" id="txt_uname" name="txt_pwd" placeholder="Password"/>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <input class="btn btn-primary btn-xl text-uppercase"  type="submit" value="Submit" name="but_submit" id="but_submit" />
                </div>
            </div>
        </form>
    </div>
</div>

The final idea is to have something like this:

login

Upvotes: 0

Views: 181

Answers (3)

EduMarques29
EduMarques29

Reputation: 93

You can use Flex too, see this link to more information: https://getbootstrap.com/docs/4.0/utilities/flex/

Basically, you can use <div class="d-flex justify-content-center">...</div> to center your div. In my opnion you can use grid to define the macro layout of your view, for example, use grid to define the number of columns in one component of your view and inside this component you can use flexbox. This approach make the view more responsive. And if you understand flexbox you can do anything. I hope this help you. Good luck.

Upvotes: 2

Khanh
Khanh

Reputation: 72

Hope this can help you. Just add "m-auto" class to col-md-6

<div class="row">
  <div class="col-lg-12 text-center">
      <form method="post" action="">
          <div class="col-md-6 m-auto">
              <div class="form-group">
                  <input class="form-control" type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" />
              </div>
          </div>
          <div class="col-md-6 m-auto">
              <div class="form-group">
                  <input class="form-control" type="password" class="textbox" id="txt_uname" name="txt_pwd" placeholder="Password"/>
              </div>
          </div>
          <div class="col-md-6 m-auto">
              <div class="form-group">
                  <input class="btn btn-primary btn-xl text-uppercase"  type="submit" value="Submit" name="but_submit" id="but_submit" />
              </div>
          </div>
      </form>
  </div>

Upvotes: 1

user10156441
user10156441

Reputation: 

<div class="text-center"><!-- Code goes here --></div>

Upvotes: 0

Related Questions