I am currently working on nesting containers using Twitter Bootstrap in order to achieve the layout shown in this screenshot. The height of the bubble image in the PSD is 404px, and I need it to be responsive across all devices while scaling appropriately without dominating the screen. Can someone please guide me on how to perfect the CSS for this?
So far, I have attempted to use Bootstrap to accomplish this but the result is not as desired, especially with getting the containers right. While I've come across advice that containers should not be nested in bootstrap, they "can be" under certain circumstances.
https://i.sstatic.net/MApA1.png
Despite my efforts to nest containers, I have been unable to replicate what is depicted in the screenshots using Bootstrap.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>Page Title</title>
</head>
<body>
<div class=".container-fluid">
<div class="row">
<div class="col-lg-12 top">
TOP TRENDING STORY FOR AUGUST 21, 2019
</div>
</div>
<div class="row">
<div class="col-lg-12 bg-top">
<div class="container">
<div class="row">
<div class="col-md-6">
test 1
</div>
<div class="col-md-6">
Test 2
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.top{
background-color: #d42222;
color:#FFFFFF;
font-size:23px;
text-align: center;
}
.bg-top{
background:transparent url('../images/background-top.png') no-repeat center center /cover;
}