As I delve into the world of coding with bootstrap, I've encountered a peculiar issue. My goal is to create a simple template comprising a title row and a middle row. The middle row should have a grey background with white content in the center. Additionally, I want the background colors to expand throughout the row irrespective of the content size.
However, I'm facing an overflow problem when the content within the middle row becomes too large, and I can't seem to pinpoint the cause of this issue.
Below is the code snippet I'm currently working with:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Potatoe Home</title>
<link rel="stylesheet" href="path/to/file/file.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body class = "container-fluid">
<div class = "row titleRow">
<div class = "col-sm-3">
</div>
<div class = "col-sm-6">
<div id="titleArea">
<h1 id="title">Potatoe</h1>
<p>blablabla</p>
</div>
</div>
<div class = "col-sm-3">
</div>
</div>
<div class = "row scndRow">
<div class = "col-sm-3">
</div>
<div class = "col-sm-6 middleColumn">
<div id="testBlock">
</div>
</div>
<div class = "col-sm-3">
</div>
</body>
</html>
My CSS styling for this setup is as follows:
h1[id=title]
{
font-size: 200%;
}
.titleRow
{
background-color: red;
color: white;
font-size: 200%;
}
.scndRow
{
flex-grow: 1;
display: flex;
background-color: #D0D0D0;
}
.middleColumn
{
background-color: white;
}
#testBlock
{
width: 20%;
height: 900px;
background-color: blue;
}
html, body
{
height: 100%;
}
body
{
display: flex;
flex-direction: column;
}
If you'd like to see how my page is displaying, you can take a look here.
Thank you in advance for any assistance or insights you can provide.