Grid on Bootstrap 4
How do I do this with bootstrap 4?Everything moves out, it doesn't work.It is not always possible to set the width and height of the blocks, sometimes it is not set for some reason. Give me a tip or explain at least how to make the upper left piece, there I can think of it myself
Https://codepen.io/WatanabeTanya/pen/qBdVOwP
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/css-boo.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-1 block1">1</div>
</div>
<div class="row">
<div class="col-1 block2">2</div>
<div class=""></div>
</div>
<div class="row grey_block">
<div class="col-1 block3">3</div>
</div>
</div>
</body>
</html>
Css:
.block1{
background: #a6b732;
height: 50px;
margin-left: 10px;
margin-top: 5px;
}
.block2{
background: #838383;
height: 50px;
margin-left: 10px;
margin-top: 5px;
width: 80px;
padding: 0px;
}
.block3{
background: #fdc442;
height: 80px;
margin-left: 10px;
margin-top: 5px;
padding: 0px;
width: 100px;
}
.grey_block{
width: 50px;
}
0