Bootstrap, allowing content to be responsive/flexible regardless of html layout - html

Question

So I have a "mostly" functional system that works right now as a CMS: The user goes into an editor and chooses from one of four templates. Within the template they click on a section where they can add images, text or both.
I have a preview screen that shows them what they're making but the issue is that they can create something here where it looks like the image is fitting the space but when it's saved and shown on a huge display it creeps to the top and has a ton of white space below.
So I'm using TinyMCE and when the user saves the info it's saved as HTML in the database, and on my display page (code below) I have that database-driven html coming through a JSON object.
My thing is this: How can I use existing Bootstrap to make sure that regardless of which layout I'm using below (either full width, 2 half width, or a half width with 2 quarter-height half divs) the content within can be more responsive and flexible? I'm trying to get the displayed content to match more closely to what they see on the editor so that regardless of what computer they use to make it, it will be more responseive on the display
This is all of my css and html
html,
body {
height: 100vh;
width: 100vw;
overflow: hidden;
}
iframe{
height:100% !important;
width:100% !important;
}
.middle p{
max-height:100%;
}
.my-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
width:100vw;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #778899 ;
color: white;
text-align: center;
}
.my-container>.middle {
flex-grow: 1;
padding:30px;
/*background-image: url('images/bg_green.svg');*/
background-size: cover;
}
.my-container>.middle>* {
}
<div class="container-fluid my-container d-flex h-100">
<div class="row top">
<?php include 'banner.php'?>
</div>
<div class="row middle" id="middle" style="background-image: url();">
<!-- Full Page Divs -->
<div class="col-lg-12" id="fullColumn">
<div class="fullContent" id="fullContent" style="height: 100%; ">
</div>
</div>
<!-- End Full Page Divs -->
<!-- Half Page Divs -->
<div class="col-lg-6 leftColumn " id="leftColumn" style="align-items: center;">
<div class="leftContent" id="leftContent" style=" margin:auto; height: 100%; ">
</div>
</div>
<div class="col-lg-6 rightColumn" id="rightColumn">
<div class="rightContent" id="rightContent" style=" height: 100%; ">
</div>
</div>
<!-- End Half Page Divs -->
<!-- Quarter Page Divs -->
<!-- Left -->
<div class="col-lg-6" id="leftColumnQtr">
<div class="row" style="height:50%; padding-bottom: 15px;">
<div class="col-lg-12" style="height:100%;">
<div id="topLeftContent" style=" height: 100%; ">
</div>
</div>
</div>
<div class="row" style="height:50%; padding-top: 15px;">
<div class="col-lg-12" style="height:100%;">
<div id="bottomLeftContent" style=" height: 100%;">
</div>
</div>
</div>
</div>
<div class="col-lg-6" id="rightColumnQtrHalf" >
<div id="rightQtrContent" style=" height: 100%; ">
</div>
</div>
<!-- right -->
<div class="col-lg-6" id="rightColumnQtr">
<div id="leftQtrContent" style="height: 100%;">
</div>
</div>
<div class="col-lg-6" id="leftColumnQtrHalf" >
<div class="row" style="height:50%; padding-bottom: 15px;">
<div class="col-lg-12" style="height:100%;">
<div id="topRightContent" style=" height: 100%;">
</div>
</div>
</div>
<div class="row" style="height:50%; padding-top: 15px;">
<div class="col-lg-12" style="height:100%;">
<div id="bottomRightContent" style=" height: 100%;">
</div>
</div>
</div>
</div>
<!-- End Quarter Page Divs -->
</div>
<!-- End Row Middle -->
<div class="row bottom">
<?php include 'ticker.php';?>
</div>
</div>

Answer 1

Here's a solution based on what I could get about what you wanted. One thing I'd Strongly recommend is not setting width and height before the initial layout is structured. once the skeleton is ready you can start messing with it.
NOTE: I used bootstrap 4.2.1 for testing this.
"//maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
-- SOLUTION --
I removed all your styles to make things simpler, the styles below are for display purpose only. Feel free to play with it.
<style>
div {
background-color: #00333333;
margin: 0;
padding: 5px;
min-height: 20px;
}
div.row {
background-color: #ff000033;
}
</style>
HTML code
<div class="container-fluid">
<div class="row top">
<h2>something in top</h2>
</div>
<div id="middle">
<div class="row">
<!-- Full Page Divs -->
<div class="col-sm-12">
<h1> FULL PAGE </h1>
</div>
</div>
<!-- End Full Page Divs -->
<!-- Half Page Divs -->
<div class="row">
<div class="col-sm-6">
<h1> left half </h1>
</div>
<div class="col-sm-6">
<h1> right half </h1>
</div>
</div>
<!-- End Half Page Divs -->
<!-- Quarter Page Divs -->
<!-- Left -->
<div class="row">
<div class="col-sm-6" id="leftColumnQtr">
<div class="row">
<div class="col-sm-12">
<h1>topLeftContent</h1>
</div>
<div class="col-sm-12">
<h1>bottomLeftContent</h1>
</div>
</div>
</div>
<div class="col-sm-6" id="rightColumnQtrHalf">
<div class="col-sm-12">
<h1>Right half</h1>
</div>
</div>
</div>
<!-- right -->
<div class="row">
<div class="col-sm-6" id="rightColumnQtrHalf">
<div class="col-sm-12">
<h1>Left half</h1>
</div>
</div>
<div class="col-sm-6" id="leftColumnQtr">
<div class="row">
<div class="col-sm-12">
<h1>top right Content</h1>
</div>
<div class="col-sm-12">
<h1>bottom right Content</h1>
</div>
</div>
</div>
</div>
<!-- End Quarter Page Divs -->
<!-- BONUS: may be this is what you wanted too -->
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div class="col-sm-12">
<h1>top Left Content</h1>
</div>
<div class="col-sm-12">
<h1>bottom Left Content</h1>
</div>
</div>
<div class="col-sm-6" id="rightColumnQtrHalf">
<div class="col-sm-12">
<h1>Right half</h1>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div class="col-sm-12">
<h1>Left half</h1>
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-12">
<h1>top right Content</h1>
</div>
<div class="col-sm-12">
<h1>bottom right Content</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Row Middle -->
<div class="row bottom">
<h2>something in bottom</h2>
</div>
</div>
Let me know if this is what you intended.