I have this Bootstrap design,two rows, their columns are class="col-sm-2" and class="col-sm-10".
How can I make the rowspan like in the img below?
Please see this. I have used bootstrap-4.
/*this css is only for identifying row*/
.row > [class^="col-"] {
background-color: rgba(86, 61, 124, 0.15);
border: 1px solid rgba(86, 61, 124, 0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-2">
1 of 2
</div>
<div class="col-10">
<div class="row">
<div class="col-12">
Level 2
</div>
<div class="col-12">
Level 2
</div>
</div>
</div>
</div>
</div>
yes just easly use bootstrap classe
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2 col-lg-2" style="background-color: red">
hello
</div>
<div class="col-md-10 col-lg-10" style="background-color: red">
<div class="row">
<div class="col-md-12" style="background-color: black">
<p>a</p>
</div>
<div class="col-md-12" style="background-color: yello">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I came up with something like this...
<div class="row">
<div class="col-sm-2 left"></div>
<div class="col-sm-10 col-sm-push-2">
<div class="col-sm-12 rightTop"></div>
<div class="col-sm-12 rightBottom"></div>
</div>
</div>
.row {
position: relative;
width: 500px;
margin: 15px auto;
}
.left {
position: absolute;
//left is 15px to negate .row's negative mrgins
left: 15px;
height: 100%;
padding: 0;
background-color: #ff0000;
}
.rightTop, .rightBottom {
height: 50px;
padding: 0;
}
.rightTop {
background-color: #00ff00;
}
.rightBottom {
background-color: #0000ff;
}
codepen example here.
<table width="300" border="1">
<tbody>
<tr>
<td rowspan="2">Merged</td>
<td>Table First Row</td>
</tr>
<tr>
<td>Table Second Row</td>
</tr>
</tbody>
Related
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>
Here is the code:
<div class="row" >
<div id="box1" class="col-lg-4 box"style="">
<img src="images/1.png" style="" class="num-img">
box 1 content
</div>
<div id="box2" class="col-lg-4 box" style="">
<img src="images/2.png" style="" class="num-img">
box 2 content
</div>
<div id="box3" class="col-lg-4 box" style="">
<img src="images/3.png" style="" class="num-img">
box 3 content
</div>
</div>
CSS of the box:
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
}
This is how I want it to look like:
This is how it looks right now :
And this is how it looks when I remove the box class and write:
<div id="box1" class="col-lg-4 "style="">
How do I fix this??
Update (after adding margin:0 auto):
You are possibly overriding the width of the col-lg-4 divs, depending on when your box css is loaded. Try
<div id="box1" class="col-lg-4">
<div class="box">
<img src="images/1.png" style="" class="num-img">
box 1 content
</div>
</div>
This will not force the col-lg-4 div to have a set px width, but instead a % with the inner div having a set width.
If you want to center the blocks within the bootstrap cols, add margin: 0 auto; to your box css.
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
margin: 0 auto;
}
example using your fiddle
Add col-offset-2 with all col classes and you will see change. change col-offset-2 as per requirement.
Or you can wrap the box in a column like this..
<div class="row" >
<div id="box1" class="col-lg-4"style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 1 content
</div>
</div>
<div id="box2" class="col-lg-4" style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 2 content
</div>
</div>
<div id="box3" class="col-lg-4" style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 3 content
</div>
</div>
</div>
Please check this:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="row" >
<div id="box1" class="col-lg-4 text-center">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 1 content
</div>
</div>
<div id="box2" class="col-lg-4 text-center" style="">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 2 content
</div>
</div>
<div id="box3" class="col-lg-4 text-center" style="">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 3 content
</div>
</div>
</div>
</body>
</html>
CodePen:http://codepen.io/anon/pen/ZbOKKw
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>