Centering a bootstrap grid on page-CodePudding

I have been trying to get a Bootstrap grid to center vertically on my page, but can't seem to get it to center. Horizontal center works fine.

HTML:

<div >
    <div >
        <div >
            <div >A</div>
            <div >B</div>
            <div >C</div>
          </div>
          <div >
            <div >D</div>
            <div >E</div>
            <div >F</div>
          </div>
          <div >
            <div >G</div>
            <div >H</div>
            <div >I</div>
          </div>
    </div>
</div>

CSS:

.tic-box {
    border: solid black 1px;
    font-size: 3vw;
    text-align: center;
    width: 90px;
    height: 90px;
}

Thanks for any help!

CodePudding user response：

Since your board element has a specific height v-100 the you can add the following css attributes to your board element to center its contents.

.board{
display:flex;
flex-direction: column;
justify-content:center;}

CodePudding user response：

Here you go...

You always need to use d-flex class if you use justify-content- or align-items- classes.
Wrap your rows with a div. See the snippet below.

body,
html {
  margin: 0;
  overflow-x: hidden;
}

.tic-box {
  border: solid black 1px;
  font-size: 3vw;
  text-align: center;
  width: 90px;
  height: 90px;
}

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

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv l9liuYLaMQ/" crossorigin="anonymous"></script>

</head>

<body>

  <div >
    <div >
      <div >
        <div >
          <div >A</div>
          <div >B</div>
          <div >C</div>
        </div>
        <div >
          <div >D</div>
          <div >E</div>
          <div >F</div>
        </div>
        <div >
          <div >G</div>
          <div >H</div>
          <div >I</div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

CodePudding user response：

Hi I think this is the cleanest approach to do what you require!

   .tic-box {
            border: solid black 1px;
            font-size: 3vw;
            text-align: center;
            width: 90px;
            height: 90px;
        }

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

<head>
    <title>Center</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS v5.0.2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>

<body>
    <div >
        <div >
            <div >
                <div >A</div>
                <div >B</div>
                <div >C</div>
            </div>
            <div >
                <div >D</div>
                <div >E</div>
                <div >F</div>
            </div>
            <div >
                <div >G</div>
                <div >H</div>
                <div >I</div>
            </div>
        </div>
    </div>
    <!-- Bootstrap JavaScript Libraries -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>

</html>

CodePudding user response：

I Got it -

body{
        justify-content: center;
        align-items: center;
        display: flex;
      }
        .tic-box {
    border: solid black 1px;
    font-size: 3vw;
    text-align: center;
    width: 90px;
    height: 90px;
}

<div >
        <div >
            <div >
                <div >A</div>
                <div >B</div>
                <div >C</div>
              </div>
              <div >
                <div >D</div>
                <div >E</div>
                <div >F</div>
              </div>
              <div >
                <div >G</div>
                <div >H</div>
                <div >I</div>
              </div>
        </div>
    </div>