bootstrap 4 - grid columns aren't as expected - css

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<div class="col-sm-2">
<span class="badge badge-info badge-pill">2</span>
</div>
<div class="col-sm-10">
<p>short text to write.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
This code run in wrong way, becouse dont create one row with two columns in 2: 10 ratio, but second column goes down. I can add that when i fill with content second column that include 100 % width of itself - then everything is well.


You need a container (.container / .container-fluid) to wrap your rows and columns.
<div class="container">
<div class="row">
<div class="col-sm-2">
<span class="badge badge-info badge-pill">2</span>
</div>
<div class="col-sm-10">
<p>short text to write.</p>
</div>
</div>
</div>
fiddle: http://jsfiddle.net/aq9Laaew/184407/

Related

How to move the button on bootstrap 4 card header always to be right ( responsive and desktop )?

I have the following code for a refresh button on a bootstrap 4 card header
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
<button type="button" class="btn btn-success mr-1" data-toggle="modal" (click)="refresh()">
<i class="fa fa-align-justify"></i>
</button>
</div>
</div>
</div>
<div class="card-body">
<!-- other markup -->
</div>
</div> <!-- ./ card -->
</div> <!-- ./ col-lg-12 -->
</div> <!-- ./ row -->
</div> <!-- ./ animated fadeIn -->
But this button remains on the left side on desktop as well as in mobile mode, but i how do i make this button stays on the right side always on desktop mode as well as mobile mode this should support chrome, firefox and edge

You find a lot of ways to solve this issue. I added two examples.
"structure": One flex wrapper (orange border) and two cols inside (red border)
A. justify-content-between
By flexbox and justify-content-between
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<!-- 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">
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="d-flex justify-content-between">
<h2>
Featured Featured Featured Featured Featured Featured very long text
</h2>
<div>
<button type="button" class="btn btn-success mr-1" data-toggle="modal" (click)="refresh()">
<i class="fa fa-align-justify"></i>
</button>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div> <!-- ./ card -->
</div> <!-- ./ col-lg-12 -->
</div> <!-- ./ row -->
</div> <!-- ./ animated fadeIn -->
<!-- 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>
B. Flex and margin-left auto col
Flex wrapper & add margin-left auto for the icon col:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<!-- 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">
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="d-flex">
<h2>
Featured Featured Featured Featured Featured Featured very long text
</h2>
<div class="ml-auto">
<button type="button" class="btn btn-success mr-1" data-toggle="modal" (click)="refresh()">
<i class="fa fa-align-justify"></i>
</button>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div> <!-- ./ card -->
</div> <!-- ./ col-lg-12 -->
</div> <!-- ./ row -->
</div> <!-- ./ animated fadeIn -->
<!-- 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>

Bootstrap Display Columns Next To Each Other

I am writing and example application using bootstrap 4 and php. I am trying to get two columns to display next to each other at a certain breakpoint. Here is an example. What can I do to solve this?
<html>
<head>
<!--bootstrap 4.0-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Search</h4>
</div>
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Displaying ### results</h4>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-12">
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
</div>
<!-- at col-sm-6 I want two columns to display. how can i solve this? -->
<div class="col-lg-9 col-sm-6">
<?php for($i=0; $i<10; $i++)
{
?>
<div>
Record
<hr/>
</div>
<?php
}
?>
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

The most important thing to remember about Bootstrap is that each row must have columns that add up to 12. Instead of putting col-sm-6 on each of your record container, what you'll want to do is instead put row on that, and add col-6 to each of the <div> record elements outputted inside of your PHP loop.
This can be seen in the following:
<html>
<head>
<!--bootstrap 4.0-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Search</h4>
</div>
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Displaying ### results</h4>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-12">
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
</div>
<!-- at col-sm-6 I want two columns to display. how can i solve this? -->
<div class="col-lg-9 row">
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
Also, note that col-6 will apply to all widths in Bootstrap 4, whereas col-sm-6 will only apply to widths larger than 575px:

It appears you've got mismatched number of columns.
I suspect this bit...
<div class="col-lg-3 col-sm-12">
should be...
<div class="col-lg-3 col-sm-6">

is this you want:
<html>
<head>
<!--bootstrap 4.0-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Search</h4>
</div>
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Displaying ### results</h4>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-9">
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
</div>
<!-- at col-sm-6 I want two columns to display. how can i solve this? -->
<div class="col-lg-9 col-sm-3">
<?php for($i=0; $i<10; $i++)
{
?>
<div>
Record
<hr/>
</div>
<?php
}
?>
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
https://jsfiddle.net/48n2hvyd/3/

Thanks for or your help. After reading your answers I worked it out. This is what I needed:
<html>
<head>
<!--bootstrap 4.0-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6" style="margin: 20px 0;">
<h4>Search</h4>
</div>
<div class="col-lg-6" style="margin: 20px 0;">
<h4>Displaying ### results</h4>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
</div>
<div class="col-lg-9">
<div class="row">
<?php for($i=0; $i<10; $i++)
{
?>
<div class="col-lg-12 col-sm-6">
Record
<hr/>
</div>
<?php
}
?>
</div>
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

2 Column responsive layout with Bootstrap 4

How do i create a 2 column grid in Bootstrap 4 that is responsive but the column widths are not fixed.
For example: I will have an image in the LEFT column of some width and I want the RIGHT column to flex to the remaining width of the parent DIV.
<div class="tut_wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xl-8 col-lg-12 col-md-12 col-sm-12">
<div class="tut_leftbox"><img class="img-fluid" src="tutorials/anamorphic_drawing1.jpg"></div>
</div>
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12">
<div class="tut_rightbox">
<h3>Introduction</h3>
some text
</div>
</div>
</div>
</div>
</div>

To make a div use up the space left, you just need to add the class col to that div. It will automatically assign all the space left to it. Under mobile view (when the left div occupies the whole row), the div will automatically become 100% wide.
div {
border: 1px solid #000000;
}
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-4">
ex: col-4
</div>
<div class="col">
this will take up all the space left
</div>
</div>
</div>
Or if you want to have your left div 100% fit with the image, you could do col-xs-auto to the left div and col to the right div.
div {
border: 1px solid #000000;
}
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row justify-content-md-center">
<div class="col-xs-auto">
Fixed width image here
</div>
<div class="col">
Other content
</div>
</div>
</div>
Details of Bootstrap 4 grid system could be found HERE.

Bootstrap: 1 column on left 1 on the middle without scaling

I have this code: https://www.bootply.com/a0wTkTuKyG
<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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-2" style="background-color:red">
Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>
</div>
<div class="col-md-6" style="background-color:yellow">
Content<br>Content<br>Content<br>Content<br>Content<br>
</div>
</div>
</div>
As you can see there is a big remaining white area right to the yellow "Content" div. I want that when I scale (resize) the window horizontally first shrink the white area and only when it's over re-scale or break the red and blue divs.
I also want to add some margin between the sidebar and the content which should be reduced first as well.
So I want the same as "container" class behaves. Keep the content size until it is possible and only re-size content when windows size become small enough.
Can I do it with bootstrap?

as far as i know you can get close with bootstrap, if i understood you well this might help you:
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-4" style="background-color:red">
Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>
</div>
<div class="col-md-6 col-sm-7 col-xs-8" style="background-color:yellow">
Content<br>Content<br>Content<br>Content<br>Content<br>
</div>
</div>
</div>

Bootstrap 4 and height of multiple elements

Its hard for me to explaint what i want, so i made a mocup
How to make that with bootstrap 4? So goal is that those 4 elements on the right are all the time (except on mobile) equal height like element on the left (image). Can someone help with that? Here is makrup for now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<section class="hero">
<div class="row">
<div class="col col-md-8"><img src="http://placehold.it/700x300/ccc/333.png?text=placeholder" alt=""></div>
<div class="col col-md-4">
<div class="contentMy">somthing</div>
<div class="contentMy">somthing</div>
<div class="contentMy">somthing</div>
<div class="contentMy">somthing</div>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>

You can use Bootstrap 4's new flexbox utility classes. The d-flex class is used for display:flex, and then flex-column is used to set flex-direction: column..
<div class="container">
<section class="hero">
<div class="row">
<div class="col col-md-8"><img src="" alt=""></div>
<div class="col col-md-4 d-flex flex-column">
<div class="contentMy h-100">somthing</div>
<div class="contentMy h-100">somthing</div>
<div class="contentMy h-100">somthing</div>
<div class="contentMy h-100">somthing</div>
</div>
</div>
</section>
</div>
http://www.codeply.com/go/YyTEyi4IcU

Resources