Creating responsive materialize cards - css

We're using materialize cards to display images on our site. The images are user uploaded, so they come in all different sizes (though they have to be greater than 250px).
We're able to maintain the aspect ratio of the images, which is great, but we don't know how to do that while making the cards on each row the same height. That's our goal- to get the cards to be the same height (in a responsive way) while maintaining the aspect ratio of the images inside the cards.
We've been messing with this all day without getting very far. Any help is much appreciated.
HTML:
<div class="row text-center">
<div class="col-xs-12 col-md-4 col-sm-12 test">
<div class="card" ui-sref='forsaleitem({type:"interior"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator" alt="Cinque Terre">
</div>
<div class="card-content">
<h5 class='text-center'>Interior</h5>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-sm-12 test">
<div class="card" ui-sref='forsaleitem({type:"drivetrain"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator" alt="Cinque Terre">
</div>
<div class="card-content">
<h5 class='text-center'>Drivetrain</h5>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-sm-12 test">
<div class="card" ui-sref='forsaleitem({type:"performance"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" alt="Cinque Terre">
</div>
<div class="card-content">
<h5 class='text-center'>Performance</h5>
</div>
</div>
</div>
</div>
CSS:
.card {
position: relative;
background-color: #f4f4f4;
// margin: 10px auto;
height: 100%;
box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.7);
}
.card {
height: 100%;
}
.card .card-image img {
//object-fit: contain !important;
}

Use Media Queries to set the width/height depending on the size of the screen. Example in JS Fiddle: https://jsfiddle.net/3yegzwex/
HTML:
<div class="row text-center">
<div class="col-xs-12 col-md-4 col-sm-12">
<div class="card" ui-sref='forsaleitem({type:"interior"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
</div>
<div class="card-content">
<h5 class='text-center'>Interior</h5>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-sm-12">
<div class="card" ui-sref='forsaleitem({type:"drivetrain"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
</div>
<div class="card-content">
<h5 class='text-center'>Drivetrain</h5>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-sm-12">
<div class="card" ui-sref='forsaleitem({type:"performance"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
</div>
<div class="card-content">
<h5 class='text-center'>Performance</h5>
</div>
</div>
</div>
</div>
CSS:
.card {
text-align: center;
}
#media (max-width: 990px) {
.resizeimg {
height: auto;
}
}
#media (min-width: 1000px) {
.resizeimg {
width: auto;
height: 350px;
}
}

Do the images really have to be inline? Or can they be set as background-image (since they are user uploaded)? If so, you can set the background-size property to cover to address the problem. Also because object-fit is not widely supported (yet).
cover
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't
get squished). The image "covers" the entire width or height of the
container. When the image and container have different dimensions, the
image is clipped either left/right or top/bottom.
Source: MDN
See this updated JSFiddle for the demo. The padding-bottom can be altered to a percentage for your needs. Try to change it and see what it does.
Inline images
If the images do have to be inline, you can apply this solution:
.card-image {
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.card-image img {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
The image will be pushed inside the .card-image and stretched to its width that's needed. See this JSFiddle for the demo. The padding-bottom can be altered to a percentage to your needs.

Related

Images Get Stretched on Circle Image - Bootstrap & SCSS

PLEASE HELP !!!
I am using bootstrap cards to make a section of my website.I am facing issue in circle image of the cards.I want my images do not get stretch when i put them in image circle of card.Is there a way i can zoom in middle of the image while showing it in circle or am i doing something wrong in my scss code ??
Here is the issue:
Expected Output:
Dimensions of these Images:
910x592 , 1230x802 , 1230x794
Bootstrap Code:
<section class="about-cards-section">
<div class="container">
<div class="row">
<div class="col-sm-4 card-wrapper">
<div class="card card-style" >
<img class="card-img-top rounded-circle circle-image" src="img/about/card-one.png" alt="Card image cap">
<!-- <img src="img/about/card-one.png" class="img-circle" alt="Cinque Terre" width="250" height="236"> -->
<div class="card-body">
<h3 class="card-title">Our Facilities</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
<div class="col-sm-4 card-wrapper">
<div class="card card-style">
<img class="card-img-top rounded-circle circle-image" src="img/about/card-two.png" alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Our Research</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
<div class="col-sm-4 card-wrapper">
<div class="card card-style">
<img class="card-img-top rounded-circle circle-image" src="img/about/card-three.png" alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Our Expertise</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
</div>
</div>
</section>
SCSS of the Cards Section:
.about-cards-section{
.card-wrapper{
margin: 5% 0;
.card-style{
text-align: center;
border-radius: initial;
border: initial;
.circle-image{
width: 60%;
height: 200px;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.card-title{
text-transform: uppercase;
letter-spacing: 1.1px;
}
.card-text{
font-family: MerriweatherRegular;
font-size: 22px;
line-height: initial;
}
}
}
The way I see it, you just need to adjust the width, height of .circle-image class and add object-fit: cover; property. But since you're using Bootstrap we can minimize your css using the pre-defined class in BS4
Example:
.card-wrapper {
margin: 5% 0;
}
/* You can adjust the image size by increasing/decreasing the width, height */
.custom-circle-image {
width: 20vw; /* note i used vw not px for better responsive */
height: 20vw;
}
.custom-circle-image img {
object-fit: cover;
}
.card-title {
letter-spacing: 1.1px;
}
.card-text {
font-family: MerriweatherRegular;
font-size: 22px;
line-height: initial;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="about-cards-section">
<div class="container">
<div class="row">
<div class="col-sm-4 card-wrapper">
<div class="card border-0">
<div class="position-relative rounded-circle overflow-hidden mx-auto custom-circle-image">
<img class="w-100 h-100" src="https://source.unsplash.com/910x592" alt="Card image cap">
</div>
<div class="card-body text-center mt-4">
<h3 class="text-uppercase card-title">Our Facilities</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
<div class="col-sm-4 card-wrapper">
<div class="card border-0">
<div class="position-relative rounded-circle overflow-hidden mx-auto custom-circle-image">
<img class="w-100 h-100" src="https://source.unsplash.com/1230x802" alt="Card image cap">
</div>
<div class="card-body text-center mt-4">
<h3 class="text-uppercase card-title">Our Research</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
<div class="col-sm-4 card-wrapper">
<div class="card border-0">
<div class="position-relative rounded-circle overflow-hidden mx-auto custom-circle-image">
<img class="w-100 h-100" src="https://source.unsplash.com/1230x794" alt="Card image cap">
</div>
<div class="card-body text-center mt-4">
<h3 class="text-uppercase card-title">Our Expertise</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
</div>
</div>
</section>

How to remove the extra space around the image inside a div

I have images inside bootstrap card div which are inside col div
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8 B">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-4 col-lg-4 row">
<div class="col-md-6 col-lg-6 B">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-6 col-lg-6 B">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-12">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/3" alt="Responsive image">
</div>
</div>
</div>
</div>
</div>
I would like to have image on all col div space.
How could I achieve that ?
How could I extend image in order to fill the gap that I represent by a black line
As you describe you just want to consume all the space inside the col div (Left and Right blank space).
What you have to do is to reduce the default padding of bootstrap columns of padding-left: 15px; padding-right: 15px to 0px. And it will work for you.
Sometimes your styles get overloaded by the bootstrap styles. So in that case you have to use the keyword !important with your CSS property to overload all other CSS styles define for that particular property.
.zero-padding {
padding: 0px !important;
}
And to force the image to use all the space inside the col div you have to use the following CSS.
.fill-space {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.fill-space img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
In order to force the images on the right side to take the 50% of height to the above 2 images and 50% of height to the image below; you should use the following CSS.
.half-height{
height: 50%;
}
OUTPUT:
Working Snippet below:
.zero-padding {
padding: 0px !important;
}
.fill-space {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.fill-space img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
.half-height{
height: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8 B">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-4 col-lg-4 row zero-padding">
<div class="col-md-6 col-lg-6 B zero-padding half-height">
<div class="card card-inverse fill-space" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-6 col-lg-6 B zero-padding half-height">
<div class="card card-inverse fill-space" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-12 zero-padding half-height">
<div class="card card-inverse fill-space" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/3" alt="Responsive image">
</div>
</div>
</div>
</div>
</div>
In the past, I've used a little javascript to achieve this. Making the image hidden but using it as a full background.
$(function() {
$('.full-image').each(function() {
var img = $(this).find('img');
$(this).css('background-image', 'url(' + img.attr('src') + ')');
img.css('visibility', 'hidden');
});
});
.full-image-wrapper {
position: relative;
border-radius: 3px;
overflow: hidden;
min-height: 120px !important;
}
.full-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8 B">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-4 col-lg-4 row">
<div class="col-md-6 col-lg-6 B full-image-wrapper">
<div class="full-image">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-6 col-lg-6 B full-image-wrapper">
<div class="full-image">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-12 full-image-wrapper">
<div class="full-image">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/3" alt="Responsive image">
</div>
</div>
</div>
</div>
</div>
This will still work without JavaScript. You might need to do a bit more work to make mobile/tablet views optimal. I've had to force min-height to override bootstrap behaviour.

Make 4 responsive box in bootstrap

Hi I am trying to make this but my forth box goes to the bottom Here is my code.
Please help me to figure it out. Thanks everyone in advance.
<div class="offer">
<h2>Current Offers</h2>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 col-md-4">
<div class="thumbnail checkout-thumbnail">
<img src="images/img1.jpg" alt="Image 1">
<div class="caption checkout-caption">
<h3>House and Land Packages</h3>
<p>Check out Button
</p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-4">
<div class="thumbnail checkout-thumbnail">
<img src="images/img1.jpg" alt="...">
<div class="caption checkout-caption">
<h3>House and Land Packages</h3>
<p>Check out Button
</p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-4">
<div class="thumbnail checkout-thumbnail">
<img src="images/img1.jpg" alt="...">
<div class="caption checkout-caption">
<h3>House and Land Packages</h3>
<p>Check out Button
</p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-4">
<div class="thumbnail checkout-thumbnail">
<img src="images/img1.jpg" alt="...">
<div class="caption checkout-caption">
<h3>House and Land Packages</h3>
<p>Check out Button
</p>
</div>
</div>
</div>
</div>
</div>
and CSS
.thumbnail.checkout-thumbnail {
background: #eee;
border:none;
max-width: 220px;
}
.caption.checkout-caption {
margin-top: 2px;
}
.btn.btn-checkout {
border-radius: 0;
border: none;
background: none;
margin-top: 30px;
}
.btn.btn-orange {
border: 2px solid orange;
}
.btn.btn-teal {
border: 2px solid teal;
}
.btn.btn-red {
border: 2px solid red;
}
Please see the image here so that you can understand, I am trying to make it like this image
Your Code is working fine. Are you testing your code in small size screen (max 768px) or medium screen (min 769 and max 992). I have tested your code is in small screen and it is working fine. As you have divided 12 column into four col-sm-3.
But when it comes to medium screen you have divided your 12 column into only three col-md-4. According to your coding the fourth column definitely will go down in medium size screen. So If you want to maintain four columns in medium screen then you have to change your col-md-4 to col-md-3.
as i can see in you html code you have used col-md-4 instead of col-md-3,
i hope this resolves your query.
As you know bootstrap grid is of 12 columns so you have to use col-md-3 to get 4 columns in a row.
You should use
col-md-3
instead of
col-md-4
to show all four box in one row for Desktops having width ≥992px

Bootstrap Thumbnails Leave gaps in between

I'm trying to make a grid of Boostrap unevenly sized thumbnails. But some thumbnails are uneven, resulting in huge gaps between some rows.
I don't have any styling on the thumbnails.
Is there a way to fix it without adding something like Masonry/Isotope/Salvattore?
You can use two <div> or two .row tags like this:
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
</div>
For more info visit Example: Stacked-to-horizontal.
The cleanest way to fix your layout is to use a masonry type of layout. It will allow for the smoothest look and be a very fluid and responsive layout when dealing with mixed sized media. Though if you are in complete control of the data/images being placed on the site I would suggest creating each image to be identical in size and type. If you would like I can provide an example I have created using a masonry type of layout with thumbnails and Bootstrap.
Edit to add example code:
/* CSS styles */
.row {
-moz-column-width: 12em;
-webkit-column-width: 12em;
-moz-column-gap: 1em;
-webkit-column-gap:1em;
column-width: 12em;
column-gap: 1em;
column-fill: balance;
width: 100%;
}
/* Outer div block */
.section-block {
display: block;
padding: .25rem;
width: 100%;
}
/* Inner div block */
.section-item {
position:relative;
display: inline-block;
width: 100%;
}
.section-item img{
width: 100%;
}
//Wrapper for each img you are adding
<div class='section-block'>
<div class='section-item'>
<div>
<a href='#' class='thumbnail' data-toggle='modal' data-target='#id'>
<img src='/imgs/image.jpg'>
<p class='caption'>Image Caption</p>
</a>
</div>
</div>
</div>
I used this in conjunction with php to get all my images from a db then I looped over each image and echo'd to the page with the above syntax. This should work without having to use any additional js libraries beyond what you are using for bootstrap. This gives you a very responsive masonry style of layout that works in modern browsers.

center row content in bootstrap grid

I know this question has been asked a lot but each one seems to be a bit unique and I have tried at least 7 different versions here on StackOverflow and none have worked.
It should be a simple fix but I can't center the div contents. I need all the rows centered to the gird and centered when scaled all the way down to the mobile view.
Here is my code example:
http://codepen.io/anon/pen/aOBJEv
Here is the html:
<div class="row-fluid">
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/image-333x333.jpg" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">cheese </div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/Ed-Vizenor-150x150.jpg" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">Cool Beans </div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/BeauBird-150x150.png" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">I am happy </div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/ave4-150x150.jpg" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">Hello world! </div>
</div>
</div>
I have added the .row-fluid{...} and div.bottom{...} code blocks to your existing CSS.
.row-fluid {
text-align: center;
}
div.bottom {
display: inline-block;
float: none;
text-align: left;
}
.top {
position: absolute;
top: -5px;
left: 0px;
}
.topic {} .bottom {
position: relative;
top: 0px;
left: 0px;
margin-bottom: 25px;
max-width: 275px;
min-width: 277px;
}
.img-btm {
height: 233px;
width: 228px;
-webkit-border-radius: 233px;
-moz-border-radius: 233px;
border-radius: 233px;
}
.bottom .text-center {
max-width: 275px;
min-width: 277px;
position: absolute;
left: -10px;
top: 18px;
font-size: 18px;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="row-fluid">
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/image-333x333.jpg" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">cheese</div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/Ed-Vizenor-150x150.jpg" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">Cool Beans</div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/BeauBird-150x150.png" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">I am happy</div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/ave4-150x150.jpg" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">Hello world!</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
source: Bootstrap 3 responsive centered columns
Source has no explanation for the code, so
The class .row-fluid has a text-align:center property which makes its contents centered.
Under div.bottom I have the display:inline-block property which is necessary for its parents text-align property to work; float:none overrides the default float:left and text-align:left is a fix for center positioning the image inside the column div, because there was some padding to the element.

Resources