I'm trying to get the managers tab to be completely under the checkers and stockers areas on here and I can't get the manager button to cover under both of them. Does anyone have anyway I need to address this issue? The css is all in row but if there is another easy way to get about this I am all ears. Thanks
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<div >
<div >
<div >
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 1</span>
<h2 >14/15</h2>
</div>
</div>
</div>
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 4</span>
<h2 >18/20</h2>
</div>
</div>
</div>
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 7</span>
<h2 >18/20</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 2</span>
<h2 >18/20</h2>
</div>
</div>
</div>
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 5</span>
<h2 >18/20</h2>
</div>
</div>
</div>
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 8</span>
<h2 >18/20</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 3</span>
<h2 >18/20</h2>
</div>
</div>
</div>
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 6</span>
<h2 >18/20</h2>
</div>
</div>
</div>
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 6</span>
<h2 >18/20</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<i ></i>
<h3 >Checkers</h3>
<h2 >42/43</h2>
</div>
<div >
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Managers</span>
<h2 >9</h2>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<i ></i>
<h3 >Stockers</h3>
<h2 >12</h2>
</div>
</div>
</div>
</div>CodePudding user response：
Is that you want to have something like this. Just please don't devote me if I am not able to understand your concern. Here is the code pen https://codepen.io/ash_000001/pen/dyZdQPa?editors=1010 with bootstrap4
<div >
<div >
<div >
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 1</span>
<h2 >14/15</h2>
</div>
</div>
</div>
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 4</span>
<h2 >18/20</h2>
</div>
</div>
</div>
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 7</span>
<h2 >18/20</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 2</span>
<h2 >18/20</h2>
</div>
</div>
</div>
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 5</span>
<h2 >18/20</h2>
</div>
</div>
</div>
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 8</span>
<h2 >18/20</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 3</span>
<h2 >18/20</h2>
</div>
</div>
</div>
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 6</span>
<h2 >18/20</h2>
</div>
</div>
</div>
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Phase 6</span>
<h2 >18/20</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<i ></i>
<h3 >Checkers</h3>
<h2 >42/43</h2>
</div>
<div >
<div >
<div >
<div >
<i ></i>
</div>
<div >
<span>Managers</span>
<h2 >9</h2>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
CodePudding user response：
I think this should work well for you. I went through and cleaned up all the sizing on your elements, which is causing the result you have. In turn, this made your HTML much more minimal.
The main issue stems from nesting larger col's in smaller col's. For example: nesting a col-8 and col-4 in a col-2 will cause issues.
.col-2 {
min-width: fit-content;
}<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div >
<div >
<div >
<div >
<i ></i>
<span>Phase 1</span>
<h2 >14/15</h2>
</div>
<div >
<i ></i>
<span>Phase 2</span>
<h2 >18/20</h2>
</div>
<div >
<i ></i>
<span>Phase 3</span>
<h2 >18/20</h2>
</div>
</div>
</div>
<div >
<div >
<div >
<i ></i>
<span>Phase 4</span>
<h2 >18/20</h2>
</div>
<div >
<i ></i>
<span>Phase 5</span>
<h2 >18/20</h2>
</div>
<div >
<i ></i>
<span>Phase 6</span>
<h2 >18/20</h2>
</div>
</div>
</div>
<div >
<div >
<div >
<i ></i>
<span>Phase 7</span>
<h2 >18/20</h2>
</div>
<div >
<i ></i>
<span>Phase 8</span>
<h2 >18/20</h2>
</div>
<div >
<i ></i>
<span>Phase 9</span>
<h2 >18/20</h2>
</div>
</div>
</div>
<div >
<div >
<div >
<i ></i>
<h3 >Checkers</h3>
<h2 >42/43</h2>
</div>
<div >
<i ></i>
<span>Managers</span>
<h2 >9</h2>
</div>
<div >
<i ></i>
<h3 >Stockers</h3>
<h2 >12</h2>
</div>
</div>
</div>
</div>