Home / Questions / 146275
Accepted
Bruno Sosa Fast Tag
Asked: 2020-03-15 09:33:41 +0800 CST 2020-03-15 09:33:41 +0800 CST

Center Section Bootstrap

  • 772

Currently I have the following Form

  <section class="contact bg-primary" id="contact">
     <form id="main-contact-form" class="contact-form" name="contact-form" action="enviar.php" method="POST">
      <div class="col-sm-5 col-sm-offset-1">
          <div class="form-group">
             <label>Nombre *</label>
             <input type="text" id="nombre" name="nombre" class="form-control" required="required">
           </div>

           <div class="form-group">
              <label>Email *</label>
              <input type="email" id="email" name="email" class="form-control" required="required">
           </div> 

           <div class="form-group">
               <label>Asunto *</label>
               <input type="text" id="subject" name="subject" class="form-control" required="required">
           </div>

           <div class="form-group">
                <label>Mensaje *</label>
                <textarea name="mensaje" id="mensaje" required="required" class="form-control" rows="8"></textarea>
           </div>                        

           <div class="form-group">
                <input type="submit" id="submit" name="submit" class="btn btn-primary btn-lg" value="Enviar" />
           </div>                      
      </div> 
</form>
    </section>

but it looks like this

enter image description here

I tried <div class="center-block"></div>but without success

Bootstrap version * Bootstrap v4.0.0 ( https://getbootstrap.com ) Thanks in advance

html

3 Answers

  1. Best Answer

    If you just want to center the form, then you can use the class mx-autoon the container of its elements:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<section class="contact bg-primary" id="contact">
     <form id="main-contact-form" class="contact-form" name="contact-form" action="enviar.php" method="POST">
      <div class="col-sm-5 col-sm-offset-1 mx-auto">
          <div class="form-group">
             <label>Nombre *</label>
             <input type="text" id="nombre" name="nombre" class="form-control" required="required">
           </div>

           <div class="form-group">
              <label>Email *</label>
              <input type="email" id="email" name="email" class="form-control" required="required">
           </div> 

           <div class="form-group">
               <label>Asunto *</label>
               <input type="text" id="subject" name="subject" class="form-control" required="required">
           </div>

           <div class="form-group">
                <label>Mensaje *</label>
                <textarea name="mensaje" id="mensaje" required="required" class="form-control" rows="8"></textarea>
           </div>                        

           <div class="form-group">
                <input type="submit" id="submit" name="submit" class="btn btn-primary btn-lg" value="Enviar" />
           </div>                      
      </div> 
</form>
    </section>

    That class adds the following CSS code that basically centers it horizontally:

    .ml-auto, .mx-auto {
    margin-left: auto!important;
}

.mr-auto, .mx-auto {
    margin-right: auto!important;
}
    • 5

  2. You can center it without using css with d-flex justify-content-center

    Form centering with d-flex bootstrap

    <section class="contact bg-light pt-5 pb-5" id="contact">
 <form id="main-contact-form" class="bg-primary contact-form d-flex justify- 
  content-center" name="contact-form" action="enviar.php" method="POST">
  <div class="col-sm-5 col-sm-offset-1">
      <div class="form-group">
         <label>Nombre *</label>
         <input type="text" id="nombre" name="nombre" class="form-control" 
        required="required">
       </div>

       <div class="form-group">
          <label>Email *</label>
          <input type="email" id="email" name="email" class="form-control" 
       required="required">
       </div> 

       <div class="form-group">
           <label>Asunto *</label>
           <input type="text" id="subject" name="subject" class="form-control" 
        required="required">
       </div>

       <div class="form-group">
            <label>Mensaje *</label>
            <textarea name="mensaje" id="mensaje" required="required" 
       class="form-control" rows="8"></textarea>
       </div>                        

       <div class="form-group">
            <input type="submit" id="submit" name="submit" class="btn btn- 
       primary btn-lg" value="Enviar" />
       </div>                      
  </div> 
  </form>
   </section>

    Put d-flex justify-content-center in the form tag

    • 2

  3. Look this is a centered form with bootstrap 4

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section class="bg-primary" id="contact">
    <div id="container" class="container">
      <div class="row text-white">
        <div class="col-sm-10 offset-sm-1">
          <form id="main-contact-form" class="contact-form" name="contact-form" action="enviar.php" method="POST">

            <div class="form-group">
              <label>Nombre *</label>
              <input type="text" id="nombre" name="nombre" class="form-control" required="required">
            </div>

            <div class="form-group">
              <label>Email *</label>
              <input type="email" id="email" name="email" class="form-control" required="required">
            </div> 

            <div class="form-group">
              <label>Asunto *</label>
              <input type="text" id="subject" name="subject" class="form-control" required="required">
            </div>

            <div class="form-group">
              <label>Mensaje *</label>
              <textarea name="mensaje" id="mensaje" required="required" class="form-control" rows="8"></textarea>
            </div>                        

            <div class="form-group">
              <input type="submit" id="submit" name="submit" class="btn btn-primary btn-lg" value="Enviar" />
            </div>                      

          </form>
        </div>
      </div>
  </div>
</section>

    There it is. The col-sm-*must be inside a .rowand the row inside a .containermust not be inside the form tag. There is the example so you can see it in full screen. Greetings, I hope it helps you.

    • -1