Bootstrap 4 columns not laying out correctly - html

Question

I have a Bootstrap 4 grid that has one column that is 9 units and one column that is 3 units but the 9 unit column is not taking up 3/4 of the page width as it should.
The html looks like this:
.features-image2 {
max-width: 140px;
min-width: 140px;
width: 140px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="services" class="container-fluid text-center">
<div class="row text-center">
<div class="col-sm-9 ">
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4 style="color:#303030;">HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
<div class="col-sm-3 ">
<img class="col-sm-3 features-image2" src="http://placehold.it/140x140">
</div>
</div>
</div>
The screen looks like this (the table should take up 9 columns 3/4 of screen width but it doesn't):
The effect I am trying to achieve is to centre both the table and the image both vertically and horizontally in the col-3

Answer 1

There are a few issues with your layout...
Use 3 col-sm-4 to consume 1/3 of the col-sm-9
Dont use the col-sm-12 class on the image
Use flexbox and min-height on the container to center vertically
Change col-sm-9 to col-sm-8 offset-sm-1 to center horizontally (optional)
Demo http://www.codeply.com/go/DbV50b96vz
<div id="services" class="container-fluid text-center d-flex">
<div class="row text-center w-100 align-items-center">
<div class="col-sm-8 offset-sm-1">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4 style="color:#303030;">HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
<div class="col-sm-2 text-center">
<img class="features-image2" src="//placehold.it/500x800">
</div>
</div>
</div>

Answer 2

There is a few issues with your implementation:
1st: why did you put those tags? they are unnecessary
2nd: I
think it is better to make image a background image of the block, not
just put it inside.
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css';
.features-image2 {
/*max-width: 140px;
min-width: 140px;
width: 140px;*/
}
.block-left{
height: 500px;
background: red;
}
.block-right{
height: 500px;
background: blue;
background-image: url("https://images-na.ssl-images-amazon.com/images/M/MV5BMjMxMzg3MDI5NV5BMl5BanBnXkFtZTcwOTAxODc0Ng##._V1_UY317_CR31,0,214,317_AL_.jpg");
background-repeat: no-repeat;
background-size: cover;
}
<div id="services" class="container-fluid text-center">
<div class="row text-center">
<div class="col-sm-9 block-left">
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4 style="color:#303030;">HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
<div class="col-sm-3 block-right">
</div>