How to get the bootstrap inline form to center of the web page

Question

when I get center align my form with this below code segment, the input box and button will not appear in same row. I need to get them inline. I can't understand why. please help with any code sample. Thank you very much for your help

index.html code

  <section class="sec1 container-fluid mt-3 pd-5 ">
  <h2 class="mt-5">Newsletter</h2>
  <p>Subscribe to this news letter to get the latest news about us</p>
    <form class="form-inline mt-2" action="/actionPage.php">
      
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      
      <button type="submit" class="btn btn-dark btn-sm">submit</button>
    </form>
</section>

style.css code

.sec1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: #faf8fb;

}

Output Image

Please help me to get the input box and button in to same row(inline) when I get the form in to center

Answer 1

In order to get the input box and button in to same row(inline)

you can use display:flex in the form, try below code

.sec1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: #faf8fb; 
padding: 20px;
}

.formHolder  {
  display: flex;
  width: 100%;
  max-width: 270px;
}

.formHolder .form-control {
  flex: 0 0 calc(100% - 80px);
  max-width: calc(100% - 80px);
}

.formHolder .btn { 
   flex: 0 0  80px;
   max-width:  80px;
}

<section class="sec1 container-fluid mt-3 pd-5 ">
  <h2 class="mt-5">Newsletter</h2>
  <p>Subscribe to this news letter to get the latest news about us</p>
    <form class="formHolder form-inline mt-2" action="/actionPage.php">
      
        <input type="email" class="form-control" id="email" placeholder="Enter email">      
         <button type="submit" class="btn btn-dark btn-sm">submit</button>
    </form>
</section>