Center form with Bootstrap

Question

Center form with Bootstrap

Navigation

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

0

I have a form here, I am trying to center the input and everything in general. I'm not getting results because I'm still a newbie in the tool. How should I do to focus the content?

This is my code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Registro Usuario con BootStrap + NodeJS</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

  <!-- NodeJS sirve para usar JavaScript en el servidor -->
</head>

<style>
  img {
    max-width: 300px;
    max-height: 300px;
  }
</style>

<body>
  <form class="form-horizontal">

  </form>
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <img src="https://seeklogo.com/images/M/MSN_Messenger-logo-000410C523-seeklogo.com.png" alt="">
      </div>
    </div>

    <div class="row">
      <div class="col-md-12 text-center">
        <h1>Registro</h1>
      </div>
    </div>
    <div class="row">

      <div class="form-group">
        <div class="col-md">
          <label class="col-md-1 control-label">Nombre</label>
          <div class="col-md-6">
            <input type="text" class="form-control" name="nombre" />
          </div>
        </div>

      </div>

    </div>
  </div>

</body>

</html>

html css bootstrap

asked by josanangel 30.04.2018 в 21:39

source

2 answers

TCPDF print results of a MySQL PHP query Why does CompareTo work in Boolean values? (Arduino)

score 0 · Answer 1

I found an answer to my question, the key was to add col-md-offset and fiiiiin. Then I leave the solution:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Registro Usuario con BootStrap + NodeJS</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

     <!-- NodeJS sirve para usar JavaScript en el servidor -->
</head>

<style>
    img{
        max-width: 300px;
        max-height: 300px;
    }

</style>
<body>
    <form class="form-horizontal">

    </form>
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <img src="https://seeklogo.com/images/M/MSN_Messenger-logo-000410C523-seeklogo.com.png" alt="">
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 text-center">
                <h1>Registro</h1>
            </div>
        </div>
        <div class="row">

            <div class="col-md-6 col-md-offset-3">
                <label class="col-md-1 control-label">Nombre</label>
                <input type="text" class="form-control" name="nombre" />
            </div>

        </div>

        </div>
    </div>

</body>
</html>

score 0 · Answer 2

You can solve your problem using Flexbox :
Here is an example of how to position several elements contained within a <div> :

 
.container{
  display: flex;
  border: 1px solid black;
  height: 400px;
  width: 400px;
  justify-content: center;
  align-items: center
}

.item{
  background: blue;
  height: 40px;
  width: 40px
}

.item:nth-child(even){
  background: red;
}

<div class="container">
  <div class="item"> 1 </div> 
  <div class="item"> 2 </div> 
  <div class="item"> 3 </div> 
  <div class="item"> 4 </div> 
  <div class="item"> 5 </div> 
</div>

You can find everything about working with Flexbox HERE :