Bootstrap - aligning figures with col-sm-4 command - html

Question

I am trying to align horizontaly three elements using the col-sm-4 function but for whatever reason I am missing it is not working. No matter what I do, the items are still displayed aligned to left and vertically. The images are all the same size.
Here's the code snippet:
<section class="container">
<div class="row">
<figure class="col-sm-4">
<p text-align: center>PLAY</p>
<img src="img/m1.jpg"/>
</figure>
<figure class="col-sm-4">
<p text-align: center>LEARN</p>
<img src="img/m2.jpg"/>
</figure>
<figure class="col-sm-4">
<p text-align: center>HELP</p>
<img src="img/m3.jpg"/>
</figure>
</div>
</section>
and the css:
section .row img {
margin: 0 0 30px;
width: 100%;
border: 4px dotted #000;
clear: none;
}
It puzzles me because I have looked over other websites using the same technique and I cannot spot the error. Thanks.

Answer 1

you want like this ?
section .row img {
border: 4px dotted #000;
clear: none;
display:inline-block;
}
.col-sm-4
{
display:inline-block;
}
DEMO HERE

Answer 2

After making a few adjustments, I managed to get your code working (see comments in snippet for details)
/* made the boxes use flexible boxes to lay themselves out in a row */
.flexgrid {
display: flex;
flex-direction: row;
align-items: center;
}
/* fixed css because there were no 'row' elemeents */
/* added the > operand */
section > .col > img {
margin: 30px 0 30px;
width: 50%;
border: 4px dotted #000;
clear: none;
align: center;
}
.col > div, .col > img {
content-align: center
}
<section class="container">
<div class="flexgrid">
<figure class="col">
<!-- change <p> to <div> to avoid newline -->
<div>PLAY</div>
<center>
<img src="img/m1.jpg" />
</center>
</figure>
<figure class="col">
<div>LEARN</div>
<center>
<img src="img/m2.jpg" />
</center>
</figure>
<figure class="col">
<div>HELP</div>
<center>
<img src="img/m3.jpg" />
</center>
</figure>
</div>
</section>

Answer 3

Seems to be an issue with the screen size your using not being specified in the col-- format. I've added col-lg-4 col-md-4 col-sm-4 col-xs-4 as the class to support all screen sizes and it is working perfectly now.
section .row img {
margin: 0 0 30px;
width: 100%;
border: 4px dotted #000;
clear: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="container">
<div class="row">
<figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p text-align: center>PLAY</p>
<img src="img/m1.jpg"/>
</figure>
<figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p text-align: center>LEARN</p>
<img src="img/m2.jpg"/>
</figure>
<figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p text-align: center>HELP</p>
<img src="img/m3.jpg"/>
</figure>
</div>
</section>

Answer 4

You just need to use predefined bootstrap class text-center for <div class=row...:
section .row img {
margin: 0 0 30px;
width: 100%;
border: 4px dotted #000;
clear: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container">
<div class="row text-center">
<figure class="col-xs-4">
<p text-align: center>PLAY</p>
<img src="img/m1.jpg"/>
</figure>
<figure class="col-xs-4">
<p text-align: center>LEARN</p>
<img src="img/m2.jpg"/>
</figure>
<figure class="col-xs-4">
<p text-align: center>HELP</p>
<img src="img/m3.jpg"/>
</figure>
</div>
</section>