all the images should be center aligned irrespective to its size.
i have tried with below code, but it doesn't work for me.
any help would be appreciated
.border-class{
border:1px solid #ddd;
padding:5px;
min-height:160px;
}
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-xs-3">
<div class="border-class">
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"/>
</div>
</div>
<div class="col-xs-3">
<div class="border-class">
<img src="https://cdn2.iconfinder.com/data/icons/hawcons-gesture-stroke/32/icon_27_one_finger_click-128.png" class="img-responsive" alt="Cinque Terre"/>
</div>
</div>
<div class="col-xs-3">
<div class="border-class">
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"/>
</div>
</div>
<div class="col-xs-3">
<div class="border-class">
<img src="http://www.w3schools.com/images/colorpicker.png" class="img-responsive" alt="Cinque Terre"/>
</div>
</div>
</div>
You can use CSS Flexbox. Just add Flex properties to .border-class
.border-class {
display: flex;
justify-content: center;
align-items: center;
}
See the snippet below:
.border-class{
/* Add these 'flex' properties */
display: flex;
justify-content: center;
align-items: center;
border:1px solid #ddd;
padding:5px;
min-height:160px;
}
<!DOCTYPE html>
<html>
<head>
<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.1.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="col-xs-3">
<div class="border-class">
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"/>
</div>
</div>
<div class="col-xs-3">
<div class="border-class">
<img src="https://cdn2.iconfinder.com/data/icons/hawcons-gesture-stroke/32/icon_27_one_finger_click-128.png" class="img-responsive" alt="Cinque Terre"/>
</div>
</div>
<div class="col-xs-3">
<div class="border-class">
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"/>
</div>
</div>
<div class="col-xs-3">
<div class="border-class">
<img src="http://www.w3schools.com/images/colorpicker.png" class="img-responsive" alt="Cinque Terre"/>
</div>
</div>
</div>
</body>
</html>
Hope this helps!
Use the cover property of background-size :
background-image : ...
background-size : cover;
background-position : center;
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 want to create a grid system similar to this page using Bootstrap 4. I want to create a square box in a col-sm-4 and a longer rectangle next to it in a col-sm-8 of the same height. I'm having trouble creating a square box that is responsive. How can I do this?!
Current code:
<div class="container">
<div class="row section-box">
<div class="col-sm-4 text-center description-text">
first square box.
</div>
<div class="col-sm-8 description-image">
second rectangle box.
</div>
</div>
</div>
Things I've tried:
Using jQuery to set the height. This doesn't work with padding on the div, and isn't responsive.
This link where I managed to get a square box with a rectangle next to it, but as soon as text was added it was no longer a square.
You could use bootstrap 4 embed-responsive class and it's done
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row m-5">
<div class="col-1">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-1</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-2">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-2</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-3">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-3</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-4">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-4</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-5">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-5</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-6">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-6</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-7">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-7</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-8">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-8</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-9">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-9</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-10">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-10</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-11">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-11</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-12">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-12</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
eventually, a pseudo element could help :
.col-sm-4:before,
.col-sm-8:before {
content: '';
width: 0;
}
.col-sm-4:before,
.col-sm-8:before,
.ib {
white-space: normal;
display: inline-block;
vertical-align: middle;
max-width: 100%;
}
.col-sm-4:before {
padding-top: 100%;
/* makes expand to a square */
}
.col-sm-8:before {
padding-top: 50%;
/* makes a rectangle half the height of a square */
}
[class^="col"] {
white-space: nowrap;
box-sizing: border-box;
box-shadow: inset 0 0 0 5px white;
padding: 0;
text-align: center;
background: url(http://lorempixel.com/400/200) tomato;
background-size: cover;
}
.row {
color: white;
text-shadow: 0 0 black, 0 0 2px black;
}
.col-sm-4 {
background: gray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row section-box">
<div class="col-sm-4 text-center description-text p-0">
first square box.
</div>
<div class="col-sm-8 description-image p-0">
second rectangle box.
</div>
</div>
<div class="row section-box">
<div class="col-sm-8 description-image p-0">
<div class="ib">second<br> rectangle box.</div>
</div>
<div class="col-sm-4 text-center description-text p-0">
first square box.
</div>
</div>
</div>
i must realize this
goal
3 col with background and into col 2 div : one for png (il box - classi - open gym) one for text !
I've problem with responsive situation, when change resolution change all elements !!!
this is my code :
<div class="row full">
<div class="col-sm-4 box-home nopadding">
<img src="<?php the_field('immagine_il_box'); ?>" class="img-responsive img-box-home">
<div class="title" style="background-image: url('/crossfitpontedera/wp-content/uploads/2017/02/bottone-ilbox.png');"></div>
<div class="description" id="descr-one">
<h2><?php the_field('titolo_il_box'); ?></h2>
<p><?php the_field('descrizione_il_box'); ?></p>
</div>
</div>
<div class="col-sm-4 box-home" style="background-image: url('<?php the_field('immagine_classi'); ?>');">
<div class="title" style="background-image: url('/crossfitpontedera/wp-content/uploads/2017/02/bottone-classi.png');"></div>
<div class="description" id="descr-two">
<h2><?php the_field('titolo_classi'); ?></h2>
<p><?php the_field('descrizione_classi'); ?></p>
</div>
</div>
<div class="col-sm-4 box-home" style="background-image: url('<?php the_field('immagine_open_gym'); ?>');">
<div class="title" style="background-image: url('/crossfitpontedera/wp-content/uploads/2017/02/bottone-opengym.png');"></div>
<div class="description" id="descr-three">
<h2><?php the_field('titolo_open_gym'); ?></h2>
<p><?php the_field('descrizione_open_gym'); ?></p>
</div>
</div>
</div>
ok, there are various classes for h1 and p etc, but the problem is this
problem
As you want to have responsiveness for all screen size and you want to achieve same layout for all screen size, you have to use class="col-xs-4".
When you are using class="col-sm-4" you lose the responsiveness below 768px.
That is why you are experiencing such a problem.
Here is an example see how it works for all screen sizes
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body >
<div class="row">
<div class="col-xs-4" style="background-color: white; color: black">
<h2>some text</h2>
<p>some text</p>
</div>
<div class="col-xs-4" style="background-color: green; color: blue;">
<h2>some text</h2>
<p>some text</p>
</div>
<div class="col-xs-4" style="background-color: yellow; color: red;">
<h2>some text</h2>
<p>some text</p>
</div>
</div>
</body>
</html>
Your desired layout should look like this
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body >
<div class="container-fluid">
<div class="row">
<div class="col-xs-4" style="background-image: url('https://www.w3schools.com/css/trolltunga.jpg'); height: 400px;">
<div class="row">
<div class="col-xs-4 col-xs-offset-1" style="background-color: white; color: black; height: 100px; ">
</div>
</div>
<div class="row">
<div class="col-xs-12" style=" height: 100px;">
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1" style="background-color: green; color: blue; height: 200px;">
</div>
</div>
</div>
<div class="col-xs-4" style="background-image: url('https://www.w3schools.com/css/trolltunga.jpg'); height: 400px;">
<div class="row">
<div class="col-xs-4 col-xs-offset-1" style="background-color: white; color: black; height: 100px; ">
</div>
</div>
<div class="row">
<div class="col-xs-12" style=" height: 100px;">
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1" style="background-color: green; color: blue; height: 200px;">
</div>
</div>
</div>
<div class="col-xs-4 " style="background-image: url('https://www.w3schools.com/css/trolltunga.jpg'); height: 400px;">
<div class="row">
<div class="col-xs-4 col-xs-offset-1" style="background-color: white; color: black; height: 100px; ">
</div>
</div>
<div class="row">
<div class="col-xs-12" style=" height: 100px;">
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1" style="background-color: green; color: blue; height: 200px;">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Note
This is a good place to start learning about bootstrap
Hope this helps!
Problem
So, I am trying to fit 3 images in a row. Every Image has a different dimension.
So, I tried adding the thumbnail class hoping that it would make all images the same size but it only added the border but never changed the image size.
What I want
I want all images the same size.
Code
(The code is for one image since all images have the same code)
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo1423034816855245e5820ff8cdpr=1&auto=format&fit=crop&w=1500&h=2000&q=80&cs=tinysrgb&crop="alt="Something in france!">
</div>
</div>
you could do it something like this, apply width: 100%; and height: auto; to img
see fiddle for working demo
img{
max-width: 100%;
border: 1px solid red;
width: 100%;
height: 200px; // adjust it based on your need
}
<div class="row">
<div class="col-md-4 col-sm-4">
<img src="http://placehold.it/500x150" />
</div>
<div class="col-md-4 col-sm-4">
<img src="http://placehold.it/100x50" />
</div>
<div class="col-md-4 col-sm-4">
<img src="http://placehold.it/200x150" />
</div>
</div>
Some images are affected differently with the thumbnail tag. That is because some images have a larger width than the height (ex: 480 x 670).
Example
<html lang="en">
<head>
<title>Image Gallery</title>
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="Image Gallery.css">
</head>
<body>
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1423034816855-245e5820ff8c?dpr=1&auto=format&fit=crop&w=1500&h=2000&q=80&cs=tinysrgb&crop=" alt="Something in france!">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1441790844170-ec5dc89c7eae?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="A sad monkey">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1464039397811-476f652a343b?dpr=1&auto=format&fit=crop&w=1500&h=1003&q=80&cs=tinysrgb&crop=" alt="A forest!">
</div>
</div>
</div>
</div>
<script src="bootstrap.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</body>
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>