How to center button

My code so far
How can I center the calculate button, nothing seems to work.
Is there a css/bootstrap concept that I don’t know about.
THanks
I’ve created a comment above the button I want to center.

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>BMI Calculator</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>

                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-5 mb-5">

        <form>
            <div class="mb-3">
                <label id='forAge' for="age" class="form-label">Age</label>
                <input type="number" class="form-control" id="age">
            </div>
            <div id='genderRadios'>

            <div class="form-check">
                <input class="form-check-input" type="radio"value='male'  name="gender" id="male">
                <label class="form-check-label" for="male">
                  Male
                </label>
              </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" value='female' name="gender" id="female">
                <label class="form-check-label" for="female">
                  Female
                </label>
              </div>
            </div>
                  <!-- I want to center the Calculate! button -->

            <button type="submit" class="btn btn-success mt-3 m-0 ">Calculate!</button>
        </form>
    </div>
    <!-- Optional JavaScript; choose one of the two! -->
    
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
    crossorigin="anonymous"></script>
    
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    -->
</body>

</html>

How can I center the calculate button, nothing seems to work.
Is there a css/bootstrap concept that I don’t know about.
THanks
I’ve created a comment above the button I want to center.

not sure if this is what you want: form{ display:flex; flex-direction:column; }

1 Like

I got it!
The solution is really simple

 <div class="text-center">

                  <button type="submit" class="btn btn-success mt-3 m-0 ">Calculate!</button>
                </div>

Create a div with the class of text-center then put the button inside

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.