Center Section Boostrap

Question

Center Section Boostrap

Navigation

#1 by (2 votes)
#2 by (1 votes)

5

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

Try with <div class="center-block"></div> but without success

Boostrap Version * Bootstrap v4.0.0 ( link ) Thank you very much

html css3 css bootstrap

asked by Bruno Sosa Fast Tag 14.03.2018 в 18:33

source

2 answers

1

Look at this is a focused 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>

That's where the col-sm-* should be within .row and the row within a .container should not be inside the form tag. Here is the example so you can see it in full screen. Greetings, I hope it serves you.

answered by 14.03.2018 в 18:58

How to fix Angular 2 error in Eclipse? Is it correct to save an object in a binary?

score 2 · Accepted Answer

If what you want is to center the form, then you can use the class mx-auto in 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>

This 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;
}