Exploring Bootstrap 3.
When you test the following HTML and CSS code, everything appears as expected with no space above 768px. However, upon reaching that breakpoint, the divs start stacking on top of each other, which is fine. But suddenly, a mysterious white space emerges between the two divs. Even after inspecting with dev tools, there are no margins or positions set, and applying a negative margin through a media query for the second div doesn't resolve the issue. I'm perplexed about what exactly is causing this white space.
It feels like the first div sticks to the top of the nav element and the second one sticks to the bottom at the breakpoint, but it's just a speculation, and I'm uncertain how to address it. Find the HTML and CSS codes below.
<!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">
<title>Homepage</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 brand">
<h1>CruisingFree!</h1>
</div>
<div class="col-sm-8 navlinks">
<p>Some more stuff</p>
</div>
</div>
</div>
</body>
</html>
Here is the corresponding CSS:
nav {
height: 100%;
}
.brand {
background-color: rgba(192, 192, 192, 0.3);
}
.navlinks {
background-color: rgba(59, 128, 173, 0.5);
height: 69px;
}
.navlinks p {
color: white;
position: absolute;
bottom: 0;
}