I'm struggling to translate a design mockup into Bootstrap 3.3.6
Here is an image showcasing the concept I am aiming for:
https://i.sstatic.net/1jZmh.png
The blue background represents an image, with grey text boxes overlaid on top (one of which includes a form). The entire layout needs to be responsive.
To start, I referenced solutions like How to put a background image on a Bootstrap form? and Responsive Form on top of Responsive Image? - Bootstrap
I began by setting the image (depicted as blue in the mockup) within a .container-fluid as a background image:
<div class="container-fluid" style="background-image: url('http://via.placeholder.com/1773x555');">
Even though the above image is 555px high, it doesn't display fully due to lack of content inside the .container-fluid.
Next, I created divs for the 3 grey boxes. This involved crafting 2 .row classes and inserting .col-md-6 for the boxes placement. Code provided below:
<div class="container-fluid" style="background-image: url('http://via.placeholder.com/1773x555');">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6 content">
<h1>
Content here
</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 content">
<h1>
Content here
</h1>
</div>
<div class="col-md-6 content">
<h1>
Content here
</h1>
</div>
</div>
</div>
A .content class was added to style the grey boxes. They should all have uniform size, although adjustments can be made to the dimensions as needed:
.content {
background-color: #2C3582;
min-height: 200px;
width: 400px;
padding: 10px;
}
I've prepared a fiddle for this setup here https://jsfiddle.net/fku5wffn/1/, but it's not functioning as intended. Some queries persist:
How can I ensure the full height of the background image is visible (even if there isn't enough content within
.container-fluid) and make it responsive?What steps do I take to address the alignment issue with the grey boxes? I require some spacing between them and for their positions to mirror those on the mockup. The discrepancy in position of the bottom two boxes on the fiddle confounds me.
Is achieving this layout feasible, or should I communicate to the designer that it may not be realizable—especially in a manner that retains responsiveness?