Hello, I am trying to create a layout with a blue row inside a red col-lg-4 div within a yellow row. Here is the code snippet I have attempted:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
// Other stylesheet and script links...
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container-fluid" style="height: 400px;background-color: yellow">
<div class="row">
<div class="col-lg-4 col-lg-offset-1" style="background-color: red;">
<div class="row" style="padding-top:20%;padding-bottom: 20%;background-color: blue;">
dddd
</div>
</div>
</div>
</div>
</body>
</html>
Here is the CSS used:
.navbar {
margin-bottom: 0 !important;
background-color: white;
}
.row1 {
background: url("appart.jpg");
background-size: 100% 400px;
background-repeat: no-repeat;
}
[class*="col-"], footer {
background-color: lightgreen;
opacity: 0.5;
line-height: 400px;
text-align: center;
}
However, my result looks like this:
https://i.sstatic.net/e71qO.png
I'm having trouble achieving the desired outcome without the colors getting mixed up. Any suggestions would be greatly appreciated. Thank you.