Bootstrap Checkerboard

Hi, I’m working on the Bootstrap 4 checkerboard. I cannot get the outermost columns and rows to the right size. I have tried using max-height, max-width, min-height, min-width. I’ve tried specifying in pixels, percents, and vh. I’ve tried these things on the container, rows, and columns. I’ve also used both container fluid and container and put the margins to 0 and the padding to 0. I’m kind of at a loss as to why the columns along the edge of the box and the rows around the edge of the box are the wrong size. everything in the middle is equally sized. I’ve read the bootstrap documentation and just cannot figure this out. Can anyone help with this? My code is at this link: Bootstrap 4 checkerboard

Hi can you add a screenshot of the problem?

Hello, I am just newly learning Bootstrap, I am having a similar issues. I cannot get the columns equally sized and I keep ending up with spaces between rows which nothing seems to get rid of.

Can anyone help?

Hello :wave:

Post your code with information and we can help.
Is this part of a lesson or a personal project?

Hello,
At this point this is just more of a personal thing I want to get done. In the Bootstrap 4 course, it is something extra that is given to “challenge ones self” however, it is not required to progress. I have seen an actual example where this works. I can’t seem to figure out why I am getting spaces between rows. I will put the code for both the html and css:

.container, .container-fluid {
  background-color: rgb(109, 240, 194);
  border: black solid 15px;
  color: rgb(0, 0, 0);
   margin-bottom: 0;
  margin-top: 0;
  margin: 0;
  padding: 0;
  padding-bottom: 0;
  padding-top: 0;
}

.row {
  background-color: rgb(236, 93, 23);
  border: rgb(255, 199, 64) solid 10px;
  min-width: 100%;
  min-height: 12.5vh;
  margin-bottom: 0;
  margin-top: 0;
  margin: 0;
  padding: 0;
  padding-bottom: 0;
  padding-top: 0;
}

.col{
  border: white solid 0px;
  background-color: red;
  color: rgb(255, 255, 255);
  min-width: 60px;
  min-height: 12.5vh;
 
}
.black {
  background-color: black;
}
.white{
	background-color: white;
}


<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrine-to-fit=no">
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
		integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
		<link rel="stylesheet" href="style.css" type="text/css">
		<title>Checkerboard</title>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-2 white">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col-2 white">
				</div>
			</div>
			<div class="row">
				<div class="col-2 white">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col-2 white">
				</div>
			</div>
			<div class="row">
				<div class="col-2 white">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col-2 white">
				</div>
			</div>
			<div class="row">
				<div class="col-2 white">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col-2 white">
				</div>
			</div>
			<div class="row">
				<div class="col-2 white">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col-2 white">
				</div>
			</div>
			<div class="row">
				<div class="col-2 white">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col-2 white">
				</div>
			</div>
			<div class="row">
				<div class="col-2 white">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col-2 white">
				</div>
			</div>
			<div class="row">
				<div class="col-2 white">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col">
				</div>
				<div class="col black">
				</div>
				<div class="col-2 white">
				</div>
			</div>
			
			<div class="row">
				<div class="col">
					<div class="row">
						<div class="col-2 white">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col-2 white">
						</div>
					</div>
					<div class="row">
						<div class="col-2 white">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col-2 white">
						</div>
					</div>
					<div class="row">
						<div class="col-2 white">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col-2 white">
						</div>
					</div>
					<div class="row">
						<div class="col-2 white">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col-2 white">
						</div>
					</div>
					<div class="row">
						<div class="col-2 white">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col-2 white">
						</div>
					</div>
					<div class="row">
						<div class="col-2 white">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col-2 white">
						</div>
					</div>
					<div class="row">
						<div class="col-2 white">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col-2 white">
						</div>
					</div>
					<div class="row">
						<div class="col-2 white">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col">
						</div>
						<div class="col black">
						</div>
						<div class="col-2 white">
						</div>
					</div>
				</div>
			</div>

		</div>
	</body>
</html>

At this point, I don’t really want to go any further till I figure this out.

Thank you

Hi,

I don’t see any spaces between rows,
Could you please paste in a screenshot of what you see.

Also send the URL of the example,

Thanks

Hello,
Here is a link to the image of what I am getting:

And here is the link to the example I had found:
https://codepen.io/allineusch/pen/OYNemx

Thank you

Ah, I didn’t realize that is what you’re talking about.

Here is the culprit:

This border in .row

Hello,
Thank you for your help. Sometimes when I have issues with things, it seems to be something small that I am overlooking. Having someone else look at something helps me with things I am missing. I am still new to bootstrap. I am starting the course due to a company asking me if I knew bootstrap or not, which my answer was no. I just finished my bachelor’s the other day, during my program, we did learn CSS, not bootstrap though.

Thank you

1 Like