Question 371953 in Html Question posted in
Some basic documentation can be found here.

Html – Center card in Bootstrap

I am trying to center the card but its not getting centered properly, im a beginner so im not sure what to do.


</head>
<body>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-4 col-12">
        <div class="card bg-card col-12">
          <div class="card-body text-center">
            <img class="rounded-circle mt-3" src="avatar-jessica.jpeg" alt="" style="height: 100px; max-width: auto;">
            <div>
              <h5 class="text-white mt-2">Jessica Randall</h5>
              <p class="text-green">London, United Kingdom</p>
              <p class="text-white">"Front-end developer and avid reader."</p>
            </div>
            <div class="mx-auto col-9 d-grid gap-3">
                <a class="btn btn-primary" href="#" role="button">GitHub</a>
                <a class="btn btn-primary" href="#" role="button">Frontend Mentor</a>
                <a class="btn btn-primary" href="#" role="button">LinkedIn</a>
                <a class="btn btn-primary" href="#" role="button">Twitter</a>
                <a class="btn btn-primary mb-3" href="#" role="button">Instagram</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

In the foto you can see how far I got

Ive looked up on many pages but I didn’t find a solution, i want the card to be in the center of the screen.
this is my goal

Tags:

2

Answers


  1. 0

    You’ll add justify-content-center class on the row element.

    Login or Signup to reply.
  2. 0 
    .container {
    display: flex;
    justify-content: center;
    /* align-items: center; this will also align the card in center horizontally */

}

    try justifying content to center in the container div as it is your main parent div It will center your whole card in the middle of widow screen

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search