I'm new on bootstrap trying to improve my skills, i just got stuck, i have 6 boxes, three left side and three right side, my question is why there is space between box number '4' and '5' when i'm on 'sm, md,lg' sizes ? how can i put box number 5 under box number 4 without blank space ? and is there away to take away those 'white space' and still make this work like this ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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>
<style>
.box{
width:30%;
height:250px;
border: solid black 1px;
}
.boxx{
width:100px;
height:100px;
border: solid white 1px;
}
.bo{
width:50%;
height:550px;
border: solid black 1px;
}
* {
box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing -moz-box-sizing: border-box;
}
</style>
</head>
<body>
<body>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="boxx mx-auto">
white space
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box mx-auto">
2
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="bo mx-auto">
3
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box mx-auto">
4
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="boxx mx-auto">
white space
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box mx-auto">
5
</div>
</div>
</div>
</body>
</html>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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>
<style>
.box{
width:30%;
height:250px;
border: solid black 1px;
}
.bo{
width:50%;
height:550px;
border: solid black 1px;
}
* {
box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing -moz-box-sizing: border-box;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<div class="box mx-auto">
2
</div>
</div>
<div class="col-md-6">
<div class="bo mx-auto">
3
</div>
</div>
<div class="col-md-6">
<div class="box mx-auto">
4
</div>
<div class="box mx-auto">
5
</div>
</div>
</div>
</body>
</html>
Related
I tried using viewport meta tag in head.
I tried using a div class="container" around it.
no matter what i do. its not working on codeply, and chrome devtools.
but its working when i change my browser size.
i tried using different bootstrap versions but its not working.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col" style="background-color:red; border: 1px solid;">
col
</div>
<div class="col" style="background-color:red; border: 1px solid;">
col
</div>
</div>
<div class="row">
<div class="col-6" style="background-color:green; border: 1px solid">
col-6
</div>
<div class="col-6" style="background-color:green; border: 1px solid">
col-6
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 " style="background-color:yellow; border: 1px solid">
col-lg-3 col-md-4 col-sm-6
</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border: 1px solid">
col-lg-3 col-md-4 col-sm-6
</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border: 1px solid">
col-lg-3 col-md-4 col-sm-6
</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border: 1px solid">
col-lg-3 col-md-4 col-sm-6
</div>
</div>
</div>
</body>
</html>
col-sm-6 is not for mobiles. You need to use just col-6. col-sm-6 reffers for width >= 576px.
I want to make this card x-scrollable. But after three blocks, the fourth block is rendering in the new line.
I want to scroll horizontally. I tried everything from past 5 days.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<title></title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper d-flex">
<div class="p-4 pt-5" id='content' style="width:100%">
<div class="container-fluid">
<div class="container-fluid">
<h2><strong>Please make this scrollable horizonally</strong></h2>
<div class="card card-section">
<div class="card-header">
Heading
</div>
<div class="card-body">
<form method="post">
<div class='container-fluid'>
<div class='row customClass'>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</body>
</html>
css:
.customClass {
overflow-x: auto;
white-space: nowrap;
}
.customClass .col-md-4 {
display: inline-block;
float: none;
}
Codepen link: https://codepen.io/maharshi9999/pen/qBddebG
just remove the row class. Use what you have just remove that class as boom done!
<div class='customClass'>
<div class='col-md-4'>
if want something different to your approach, let me know.
Good luck!
Bootstrap 4 uses flex. In case if you want override the wrapping sytle of Bootstrap row you have to use flex-wrap:nowrap; for row.
https://codepen.io/rohinikumar4073/pen/Exjjqzx
.row.customClass {
overflow-x: auto;
flex-wrap: nowrap;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<title></title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper d-flex">
<div class="p-4 pt-5" id='content' style="width:100%">
<div class="container-fluid">
<div class="container-fluid">
<h2><strong>Please make this scrollable horizonally</strong></h2>
<div class="card card-section">
<div class="card-header">
Heading
</div>
<div class="card-body">
<form method="post">
<div class='container-fluid'>
<div class='row customClass'>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I removed col-md-4 classes as well as set the width to customClass.
.card-body {
overflow-x: scroll;
}
.customClass {
width: 1500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<title></title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper d-flex">
<div class="p-4 pt-5" id='content' style="width:100%">
<div class="container-fluid">
<div class="container-fluid">
<h2><strong>Please make this scrollable horizonally</strong></h2>
<div class="card card-section">
<div class="card-header">
Heading
</div>
<div class="card-body">
<form method="post">
<div class='container-fluid'>
<div class='row customClass'>
<div class='col'>
<div style='background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col'>
<div style='background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col'>
<div style='background-color:green;height: 500px; margin: 10px;'></div>
</div>
<di class='col'>
<div style='background-color:green;height: 500px; margin: 10px;'></div>
</di>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>-->
</body>
</html>
I'm new on bootstrap trying to improve my skills, i have made 5 boxes as you can see( two in left side and 3 right side), my questions are why box number '5' appears differently like not accordingly is not on the same line as number 2 and 4 it looks like it has margin-left... but has not, second question is when i'm using 'col-xs-12' i want those boxes to be in the middle like 'center', third question is when i change my phone to 'landscape' these boxes should be (same places) exactly like it is working now on large sizes 'col-lg-6 col-md-6 col-sm-6', fourth question is, i have one box 'white space' is it somehow possible to replace that with 'Display: none; or visibility: hidden;' and still work ?
sorry english is not my mother language.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.box{
width:100px;
height:100px;
border: solid black 1px;
}
.boxx{
width:100px;
height:100px;
border: solid white 1px;
}
* {
box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing -moz-box-sizing: border-box;
}
</style>
</head>
<body>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="boxx">
white space
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
2
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
3
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
4
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
5
</div>
</div>
</div>
</div>
</div>
</body>
</html>
There are DIV structure related issues. please check below updated code. Hope this helps
.box{
width:100px;
height:100px;
border: solid black 1px;
}
.boxx{
width:100px;
height:100px;
border: solid white 1px;
}
* {
box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing -moz-box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="boxx">
white space
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
2
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
3
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
4
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
5
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.box{
width:100px;
height:100px;
border: solid black 1px;
margin-left: auto;
margin-right: auto;
}
.boxx{
width:100px;
height:100px;
border: solid white 1px;
margin-left: auto;
margin-right: auto;
}
* {
box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing -moz-box-sizing: border-box;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<div class="boxx">
white space
</div>
</div>
<div class="col-sm-6">
<div class="box">
2
</div>
</div>
<div class="col-sm-6">
<div class="box">
3
</div>
</div>
<div class="col-sm-6">
<div class="box">
4
</div>
</div>
<div class="col-sm-6 col-sm-offset-6">
<div class="box">
5
</div>
</div>
</div>
</body>
</html>
Hi, the issues you are facing are due to the div structure and improper grid layout. I have structured it properly. Let me know if this is what you require or need further changes/explanation.
I am trying to make below layout using bootstrap grid. There is a container <div class="row"> and half width two divs in that (<div1> and <div2>). The <div1>'s height would be changeable as content size. And again, the <div2> should have two child divs(<div2-1>, <div2-2>) that half height of <div1> each. How can I make this layout with Bootstrap grid?
I tried like that, but not working. :
<div class="row">
<div class="col-md-6" id="div1">
Some content...
</div>
<div class="col-md-6" id="div2">
<div id="div2-1" style="height:50%;">
</div>
<div id="div2-2" style="height:50%;">
</div>
</div>
</div>
Try this...
div {
border: 1px solid black;
}
#div2-1,
#div2-2 {
height: 50%;
border: 1px solid red !important;
}
#div1,#div2{
height:50px;
}
#div2.col-xs-6
{
padding:0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6" id="div1">
Some content...
</div>
<div class="col-xs-6" id="div2">
<div id="div2-1">
</div>
<div id="div2-2">
</div>
</div>
</div>
</div>
Using Bootstrap 4
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6 bg-primary" style="min-height: 500px;"></div>
<div class="col-md-6">
<div class="row h-100 flex-column">
<div class="col-md-6 mw-100 bg-danger"></div>
<div class="col-md-6 mw-100 bg-success"></div>
</div>
</div>
</div>
<style>
/* just for displaying correctly without content */
[class*='col'] {
min-height: 200px;
}
</style>
you can use jQuery if you want height of colunmn to be auto and also the inside divs to be half of it.
But you might want to keep the divs overflow-y to auto if one div has content more than it can hold.
$(document).ready(function() {
var totHeight = $("#col").height();
$("#div-1").css("height", totHeight / 2);
$("#div-2").css("height", totHeight / 2);
})
body * {
color: #ccc;
}
#div-1,
#div-2 {
overflow-y: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="row">
<div class="col-sm-6" id="col">
<div id="div-1" style="background-color:red;">
Content
<br>Content
</div>
<div id="div-2" style="background-color:blue;">
Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
</div>
</div>
<div class="col-sm-6"></div>
</div>
</body>
hello try the below fiddle hope it helps also add the custom style if you want to
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6">
<div id="navigation">
<label>side Column</label>
</div>
</div>
<div class="col-xs-6 col-sm-6">
<div id="text1">
<label>First Divider</label>
</div>
<div id="text2">
<label>second Divider</label>
</div>
</div>
</div>
</div>
fiddle demo
//Try this one...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<section>
<div class="col-md-12 bg-warning" border="1">
<div class="row" border="1">
<div class="col-md-6" border="1">
<h3>First Column</h3>
</div>
<div class="col-md-6" border="1">
<div class="row bg-danger">
<h3>Second Column First Row<h3>
</div>
<div class="row bg-success">
<h3>Second Column Second Row</h3>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
</head>
<style>
.cn {
background-color: antiquewhite;
height: 50%;
top: 50%;
position: relative;
}
.video-player-container{
height: 500px;
background-color: gray;
}
.video-container{
min-height: 350px;
}
</style>
<body>
<h1>HTML UI</h1>
<div class="col-lg-12 video-player-container">
<div class="cn"></div>
</div>
</body>
</html>
Suprisingly super easy with Bootstrap 5 flex
Probably i am missing something
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
<div class="col-md-6 bg-primary" style="min-height: 500px;">Some main content</div>
<div class="col-md-6">
<div class="row h-100 flex-column">
<div class="flex-fill bg-danger">Part 1</div>
<div class="flex-fill bg-success">Part 2</div>
</div>
</div>
</div>
I have some code for a project I'm making and I'm having trouble on the bootstrap layout. I want to make these columns add up to be the full screen height. Here is a jsfiddle of what I have now. I have all the rows nested in the columns set to
height:100%
because this was the closest I could get to what I want. I want to make something that looks like this (excuse my poor MS paint drawing skills):
Here is my code in case the link doesn't work:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link to css file -->
<link rel="stylesheet" type="text/css" href="/static/main.css" mesdia="screen"/>
<!-- Bootstrap CDN-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.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>
<meta charset="UTF-8">
<title>Layout</title>
<!--<h1>Welcome to the layout</h1>
<p>Where would you like to navigate to?</p>-->
</head>
<body>
<div class="container-fluid">
<div class="row" id="navcols">
<div class="col layoutcol">
<div class="row layoutrow" id="LeftCol1">Row</div>
<div class="row layoutrow" id="LeftCol2">Row</div>
</div>
<div class="col-sm-6 layoutcol">
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
</div>
<div class="col layoutcol">
<div class="row layoutrow" id="RightCol">Row</div>
</div>
</div>
</div>
<!--
<div class="container-fluid">
<h1 id="test">Welcome to my page! Where do you want to navigate to?</h1>
</div>-->
And here is the CSS
html,body {
height: 100%;
width: 100%;
}
.col {
background-color:lime;
}
#LeftCol1 {
background-color:blue;
height: 100%;
}
#LeftCol2 {
background-color:red;
height: 100%
}
.layoutrow{
border:solid 1px black;
}
.MidCol{
height: 100%;
}
#RightCol {
height: 100%;
}
How can I go about making this change? Thanks!
What you are seeking can be possible with css and bootstrap combination.
Here What I have done.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Grid </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.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>
<style>
.first .first_row{
background-color: #ff0000;
height: 50vh;
border:2px solid black;
}
.first .second_row{
background-color: #ffff00;
height: 50vh;
border:2px solid black;
}
.second .first_row{
background-color: #cc99ff;
height: 20vh;
border:2px solid black;
}
.second .second_row{
background-color: #ff0066;
height: 20vh;
border:2px solid black;
}
.second .third_row{
background-color: #0099ff;
height: 20vh;
border:2px solid black;
}
.second .fourth_row{
background-color: #006666;
height: 20vh;
border:2px solid black;
}
.second .fifth_row{
background-color: #000099;
height: 20vh;
border:2px solid black;
}
.third .first_row{
background-color: #006600;
height: 100vh;
border:2px solid black;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 first">
<div class="row first_row">
</div>
<div class="row second_row">
</div>
</div>
<div class="col-md-6 second">
<div class="row first_row">
</div>
<div class="row second_row">
</div>
<div class="row third_row">
</div>
<div class="row fourth_row">
</div>
<div class="row fifth_row">
</div>
</div>
<div class="col-md-3 third">
<div class="row first_row">
</div>
</div>
</div>
</div>
</body>
</html>
I hope it will help you.
P.S. Don't mind the colors.
Try to put the inner rows inside a container like so:
<div class="col-sm-6 layoutcol">
<div class="container-fluid">
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
</div>
</div>