Align the Form to the Center in Bootstrap 4

Align the form to the center in Bootstrap 4

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>

How do I center a form which is wrapped in a flex container?

Your form is a flex container and flex can be horizontally center with
justify-content: center; and vertically with align-items: center (If height is enough available)

Add below css and this will center the form

.form-inline {
 justify-content: center;
}

How to center align a form in Bootstrap 4?

if i understand you correctly, you want your form in the center of the div. i believe you have tried entering the bootstrap center class or even the html <center></center> tag but didn't do much. this is probably because you have your form in a <div class="row"> and then a <div class="col-md-6">. what this does already is keep the form to the left side of your page. if you wish to retain the row class , write it as

<div class="row justify-content-center">
        <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-12">
            <!-- START CONTACT FROM -->
            <div class="contact-from">
                <form action="assets/php/contact.php" method="post">
                    <div class="form-group col-md-12">
                        <div class="row">
                            <div class="col-md-6">
                            <input type="text" name="name" class="form-control" id="name" placeholder="Enter Your Name" required />
                            </div>
                            <div class="col-md-6">
                                <input type="email" name="email" class="form-control" id="email" placeholder="Enter Your Email" required />
                                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-md-12">
                        <input type="text" name="subject" class="form-control" id="subject" placeholder="Enter Your Subject">
                    </div>
                    <div class="form-group col-md-12">
                        <textarea rows="6" name="message" class="form-control" id="message" placeholder="Enter Your Message" required></textarea>
                    </div>
                    <div class="col-md-12">
                        <button>send message</button>
                    </div>
                </form>
            </div>
            <!-- END CONTACT FROM -->
        </div>
    </div>

How to center this form in Bootstrap 4?

Get rid of all the row and col classes, drop the login box in a flex container that takes up the entire screen (h-100), and set the margins using m-auto:

html, body { height: 100%; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /><!-- flex container --><div class="d-flex h-100">  <!-- login box -->  <div class="m-auto">    <form method="post" action="">      <div class="form-group">        <h2 class="login-header">Login</h2>      </div>      <div class="form-group">        <input type="text" name="username" placeholder="Username" class="username-input">      </div>      <div class="form-group">        <input type="password" name="password" placeholder="Password" class="password-input">      </div>      <div class="form-group">        <input type="checkbox" name="remember"><span>Remember Me Next Time</span>      </div>      <div class="form-group">        <input type="submit" name="login-button" value="GO" class="submit-button">      </div>    </form>  </div>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>    <div class="sticky-top text-center justify-content-center">       <form action="" method="post" class="my-2 form-inline">          <input type="hidden" name="timeEnd" value="{ts '2019-07-16 13:56:34'}">          <div class="form-row w-100 text-center">             <div class="col-xl-4 form-group flex-nowrap align-middle">                <div>                   <h3>Shop Monitor</h3>                </div>                <div class="form-check ml-auto">                   <input class="form-check-input" type="checkbox" id="showAll" name="showAll" onchange="toggleData();">                   <label class="form-check-label" for="showAll">                   Show all                    </label>                </div>             </div>

<!-- CHANGES IN THE FOLLOWING TWO LINES IN THE CLASSES! --->             <div class="col-xl-4 form-group d-flex justify-content-center align-items-center flex-nowrap">                <div class="row flex-nowrap d-flex align-items-center">                   <div class="col text-center align-middle"><input type="submit" class="btn btn-outline-secondary btn-sm mx-2" name="back" value="<<<"></div>                   <div class="col text-center px-2">7/16/19 01:56</div>                   <div class="col text-center px-2">==></div>                   <div class="col text-center px-2">7/16/19 13:56</div>                   <div class="col text-center align-middle"><input type="submit" class="btn btn-outline-secondary btn-sm mx-2" name="fwd" value=">>>" disabled=""></div>                </div>             </div>             <div class="col-xl-4">                <div class="text-xl-right text-center align-middle">                   <select class="form-control" id="sampleRate" name="sampleRate" onchange="this.form.submit();">                      <option value="4"> 4 hours (Sample rate: 3m)</option>                      <option value="10" selected=""> 12 hours (Sample rate: 10m)</option>                      <option value="20"> 24 hours (Sample rate: 20m)</option>                      <option value="60"> 3 days (Sample rate: 1hr)</option>                      <option value="140"> 1 week (Sample rate: 2hr)</option>                      <option value="280"> 2 weeks (Sample rate: 4hr)</option>                      <option value="360"> 1 month (Sample rate: 6hr)</option>                   </select>                </div>             </div>          </div>       </form>    </div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <form class="col-lg-6 offset-lg-3 ">   <div class="row justify-content-center">     <input type="text" placeholder="Example input">     <span class="input-group-btn">       <button class="btn btn-primary">Download</button>     </span>   </div> </form>

button.standard {
height: 40px;
border: none;
color: #fff;
background: #4d9b84;
padding: 0 22px;
cursor: pointer;
border-radius: 30px;
top: 5px;
right: 5px;
font-size: 13px;
font-weight: 500;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group text-center">
<button type="submit" id="getmyestimate" disabled class="standard">
Get My Estimate
</button>
</div>
</form>

block content
  div(class="row h-100 justify-content-center align-items-center") /*add align-items-center here*/
    div(class="d-flex flex-column align-items-center shadow-lg p-3 mb-5 bg-white rounded")
      div
        h3(class="text-center") Submit Your Attendance
        form
          div(class="form-group")
            label(for="firstname") First Name
            input(class="form-control", type="text", id="firstname", placeholder="John", name="firstname")
          div(class="form-group")
            label(for="lastname") Last Name
            input(class="form-control", type="text", id="lastname", placeholder="Doe", name="lastname")
          div(class="form-group")
            label(for="email") Email Address
            input(class="form-control", type="text", id="email", placeholder="johndoe@email.com", name="email")
          div(class="text-center")
            button(class="btn btn-primary", type="submit") Submit

<!DOCTYPE html><html lang="en" style="height:100%;">
<head>  <title>Bootstrap Example</title>  <meta charset=" utf-8 ">  <meta name="viewport " content="width=device-width, initial-scale=1 ">  <link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css ">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js "></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js "></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js "></script></head>
<body style="height:100% ">  <div class="row h-100 justify-content-center align-items-center ">
    <div class="d-flex flex-column align-items-center shadow-lg p-3 mb-5 bg-white rounded ">      <h3 class="text-center ">Submit Your Attendance form      </h3>      <form>        <div class="form-group ">          <label for="firstname ">First Name</label>          <input class="form-control " type="text " id="firstname " , placeholder="John " name="firstname "><br>        </div>        <div class="form-group ">          <label for="lastname ">Last Name</label>          <input class="form-control " type="text " id="firstname " , placeholder="John " name="firstname "><br> </div>        <div class="form-group ">          <label for="email ">Email</label>          <input class="form-control " type="text " id="email " placeholder="johndoe@email.com " name="email "><br>        </div>        <div class="text-center ">          <button type="submit " value="Submit ">submit</button>        </div>      </form>    </div>  </div></body>
</html>