Untitled

<!doctype html>
<html lang="en" class="h-100">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Body mass index calculator</title>
</head>

<body class="h-100">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <form>
                <div class="form-inline">
                <label class="mr-2">Height:</label>
                <input class="form-control" type="number" min="1" max="272" value="1">
                <label class="ml-2 mt-1">cm</label>
            </div>
            <div class="form-inline">
                <label class="mr-2 mt-2">Weight:</label>
                <input class="form-control mt-2" type="number" min="1" max="727" value="1">
                <label class="ml-2 mt-1">kg</label>
                </div>
                <button type="submit" class="btn btn-primary mt-2">Calculate</button>
                <div class="form-inline">
                <label class="mr-2">Body mass index:</label>
                <input class="form-control" readonly>
                </div>
                <div class="form-inline">
                <label class="mr-2 mt-2">Weight status:</label>
                <input class="form-control mt-2" readonly>
            </div>
                </form>
            </div>
        </div>
    <script src="js/jquery-3.3.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

</html>