CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
lordskywalker10
lordskywalker10

Reputation: 29

center a container in html using bootstrap

Well this is my code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="span4 offset4 centered">


  <div class="container overflow-hidden">

    <div class="col-6">
      <div class="p-3 border bg-light">
        <form>
          <div class="container px-4">
            <div className="container">
              <h3>Login</h3>
            </div>
            <div className="container">
              <div className="row align-items-center">
                <label>Email address</label>
                <input type="email" className="form-control" placeholder="Enter email" />
              </div>
            </div>
            <div className="container">
              <div className="row align-items-center">
                <label>Password</label>
                <input type="password" className="form-control" placeholder="Enter password" />
              </div>
            </div>
            <div className="container">

              <div className="row align-items-center">
                <div className="custom-control custom-checkbox">
                  <input type="checkbox" className="custom-control-input" id="customCheck1" />
                </div>
              </div>
            </div>
            <div className="container">

              <div className="row align-items-center">
                <button type="submit" class="btn btn-outline-warning">Login</button>
              </div>
            </div>
          </div>
        </form>


      </div>
    </div>
  </div>
</div>

this is how it looks at the moment

the problem is that I'd like to center it vertical and horizontal. I thoutght this is possible with the <div class="span4 offset4 centered"> but it wasn't. Anyone know an answer?

I also tried to use my own styling but it didn't work too

Upvotes: 0

Views: 68

Answers (2)

Stanley
Stanley

Reputation: 159

Just add mx-auto and my-auto to the element you want to center within it's parent.

Like this:

<div class="parent">
    <div class="container mx-auto my-auto">
        <!--Content-->
    </div>
</div>

Now .container would be centered vertically and horizontally inside .parent

Upvotes: 0

Ammad Amir
Ammad Amir

Reputation: 518

Why are you not using bootstraps classes? I made some changes in your code. check below code

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>
    <div style="height: 100vh">
<div class="container h-100"> 
<div class="row justify-content-center h-100 align-items-center">
                <div class="col-md-6">
                    <div class="p-3 border bg-light">
<h3>Login</h3>
                        <form action="">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" placeholder="Enter email" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" placeholder="Enter password" id="pwd">
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-outline-warning">Login</button>
</form>


                    </div>
                </div>
            </div>
            </div>
</div>


</body>

</html>

Upvotes: 1

Related Questions