how to center a row vertically?

Question

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-reboot.min.css">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-grid.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col col-lg-3"></div>
        <div class="col">
            <div class="row">
                <div class="left col-lg-5"></div>
                <div class="right col-lg-6">
                    <form>
                        <div class="form-group">
                            <label for="FIO">ФИО</label>
                            <input type="text" class="form-control" id="FIO">
                        </div>
                        <div class="form-group">
                            <label for="inputTelephone">Телефон</label>
                            <input type="text" class="form-control" id="inputTelephone">
                        </div>
                        <div class="form-group">
                            <label for="inputAddress">Адрес</label>
                            <input type="text" class="form-control" id="inputAddress">
                        </div>
                        <button type="submit" class="btn btn-secondary">Secondary</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col col-lg-3"></div>
    </div>
</div>

</body>
</html>

Tried all the methods that are listed in the documentation, even the examples do not work. Tried all the methods that are listed in the documentation, even the examples do not work.

Even the examples do not work? .. Check if library is loaded. — Daniel, Oct 04 '18 at 14:15
Please clarify what do you want to achieve, it is quite difficult for us to know what do you want to center. Try to provide a Plunker that reproduces your problem as well. — Ryan Tsui, Oct 04 '18 at 14:16
Some more examples here as well https://stackoverflow.com/questions/44389464/align-the-form-to-the-center-in-bootstrap-4/52628461#52628461 — Anjana Silva, Oct 04 '18 at 14:16
Can you send a picture or a website showing what you want it to look like? — Void Spirit, Oct 04 '18 at 14:44

gsimo83 · Answer 1 · 2018-10-04T15:04:15.300

If I correctly understand:

.my-auto{
  margin-top: auto;
  margin-bottom: auto;
}
html, body {
    height: 100%;
}
.container {
    height: 100%;
}
.h-100 {
    border: 1px dotted #cc2222;
}

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

    <h5 class="text-muted">Vertical &amp; horizontal center using auto-margins..</h5>
    <!--vertical align on parent using my-auto, horizontal align on self mx-auto-->
    <div class="row h-100">
      <div class="col-sm-12 my-auto">
        <div class="row">
        <div class="col col-lg-3"></div>
        <div class="col">
            <div class="row">
                <div class="left col-lg-5"></div>
                <div class="right col-lg-6">
                    <form>
                        <div class="form-group">
                            <label for="FIO">ФИО</label>
                            <input type="text" class="form-control" id="FIO">
                        </div>
                        <div class="form-group">
                            <label for="inputTelephone">Телефон</label>
                            <input type="text" class="form-control" id="inputTelephone">
                        </div>
                        <div class="form-group">
                            <label for="inputAddress">Адрес</label>
                            <input type="text" class="form-control" id="inputAddress">
                        </div>
                        <button type="submit" class="btn btn-secondary">Secondary</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col col-lg-3"></div>
    </div>
</div>
      </div>
     </div>
       
</div>

Hope this help.

how to center a row vertically?

1 Answers1