How do I Align Form to center in BootStrap

Question

I've question how to make form align to center with bootstrap.
Here's my code:

    <body>

<div class="p-3 mb-2 bg-light text-dark container text-center">
<h2>Rezervacija Stanovanje Aljaz</h2>

<br>
<br>
<label><b>Ime: </b></label>
    <input type="text" class="form-control col-sm-6" disabled value="" >
<label><b>Priimek: </b></label>
    <input type="text" class="form-control col-sm-6" disabled value="" ><label><b>Telefon: </b></label>
    <input type="text" class="form-control col-sm-6" disabled value="">
</div>
</body>

Do you want to align a form, or elements of a this form? – s.kuznetsov May 23 '21 at 21:57 — s.kuznetsov, May 23 '21 at 21:57

score 1 · Answer 1 · answered May 23 '21 at 21:47

1

Add CSS link of bootstrap4-5 after your title tag else write custom CSS code. text-algin: center;

answered May 23 '21 at 21:47

AMRIT SHAHI

38
7

don't want to use CSS... im making email html template – BlueMilkyh May 23 '21 at 21:49
can you elaborate, please? don't want to use CSS means – AMRIT SHAHI May 23 '21 at 21:52
I just wanna use preset command like "justify-content-center" or something like that – BlueMilkyh May 23 '21 at 21:55
text-align: center also works, try (padding, margin, height, width) – AMRIT SHAHI May 23 '21 at 21:56
is it also okay for smaller screens etc? – BlueMilkyh May 23 '21 at 21:57

score 1 · Answer 2 · answered May 23 '21 at 21:52

You need to use the various Bootstrap 4 centering methods...

Use text-center for inline elements. Use justify-content-center for flexbox elements (ie; form-inline) https://codeply.com/go/Am5LvvjTxC

Also, to offset the column, the col-sm-* must be contained within a .row, and the .row must be in a container...

<section id="cover">
    <div id="cover-caption">
        <div id="container" class="container">
            <div class="row">
                <div class="col-sm-10 offset-sm-1 text-center">
                    <h1 class="display-3">Welcome to Bootstrap 4</h1>
                    <div class="info-form">
                        <form action="" class="form-inline justify-content-center">
                            <div class="form-group">
                                <label class="sr-only">Name</label>
                                <input type="text" class="form-control" placeholder="Jane Doe">
                            </div>
                            <div class="form-group">
                                <label class="sr-only">Email</label>
                                <input type="text" class="form-control" placeholder="jane.doe@example.com">
                            </div>
                            <button type="submit" class="btn btn-success ">okay, go!</button>
                        </form>
                    </div>
                    <br>

                    <a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">↓</a>
                </div>
            </div>
        </div>
    </div>
</section>

score 1 · Accepted Answer · answered May 23 '21 at 22:07

1

If you are making HTML email template as you said in one of your comment.. you should use table layout or you will have problems with that template in many clients.

I don't suggest using flex in emails templates too.. but to answer your question add these classes to your first div d-flex flex-column align-items-center.

answered May 23 '21 at 22:07

Jakub Stibůrek

63
12

No problem. Also be aware that it won't be possible to send POST request (send form data somewhere) from email.. For that the best thing is to use CTA which will redirect user to website where that form will be available. – Jakub Stibůrek May 23 '21 at 22:12
It's not meant for that... I'll just use it as recepit or bill.... – BlueMilkyh May 23 '21 at 22:15

How do I Align Form to center in BootStrap

3 Answers3