Начальная загрузка контейнера

Question

Моя форма не центрирована на моей странице.Смотрите ниже мой HTML-файл и вывод.Как мне отцентрировать мой взгляд?

При этом мой html:

<div class="container">
<div class='row justify-content-center'>
    <div class='col'>
    <p></p>

        <h1>Member Details: </h1>
            <p>Name: JP</p>
            <p>Surname: Roux</p>
            <p>ID Nr: 7604195133089</p>
            <p>Mobile Nr: 0741115552</p>
            <p>Email: jp@test.com</p>
            <p>D.O.B: 1976-04-19</p>
            <p>Language: Afrikaans</p> 
            <p>Interests:
                <ul>
                    <li>Tennis</li>
                    <li>Squash</li>
                </ul>
            </p>
            <p>Created At: 2018-06-06 09:31:31</p>
        <div class="page-header">
        <a href="http://tomcrud.test:8080/members/14/edit" class="btn btn-info">Edit</a>
        </div>
    </div>
</div>

Answer 1

Никогда не используйте justify-content-center для строки.Если вы хотите выровнять содержимое центра столбца, используйте d-flex и justify-content-center для column и оберните его содержимое с помощью w-auto div.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class='row'>
    <div class='col d-flex justify-content-center'>
      <div class="w-auto">
        <p></p>

        <h1>Member Details: </h1>
        <p>Name: JP</p>
        <p>Surname: Roux</p>
        <p>ID Nr: 7604195133089</p>
        <p>Mobile Nr: 0741115552</p>
        <p>Email: jp@test.com</p>
        <p>D.O.B: 1976-04-19</p>
        <p>Language: Afrikaans</p> 
        <p>Interests:
        <ul>
          <li>Tennis</li>
          <li>Squash</li>
        </ul>
        </p>
      <p>Created At: 2018-06-06 09:31:31</p>
      <div class="page-header">
        <a href="http://tomcrud.test:8080/members/14/edit" class="btn btn-info">Edit</a>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/eKBNKY

---

Центрированная форма

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class='row'>
    <div class='col d-flex justify-content-center'>
      <form class="w-auto">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>

https://codepen.io/anon/pen/rKWVqV

---

Использование w-auto не требуется.Если вы хотите, вы можете опустить.

Answer 2

Вы можете разместить свою форму, как показано ниже:

<div class="container">
  <div class='row justify-content-center'>
    <div class='col-6 border border-primary'>
      <form action="/action_page.php">
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br> Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
      </form>
    </div>
  </div>
</div>

jsfiddle .