Bootstrap4 card-deck - how to have card-deck fits content - css

I try to use card-deck with cards inside this way :
card-deck is centered in a column
card-deck fits content width (actually, it's always 100% width, width: auto doesn't change anything)
cards inside the card-deck are left-align
I build a simple codepen for testing, try lot of things but never have the good behaviour...
See https://codepen.io/studio-matavai/pen/zYBeQOX
<div class="row">
<div class="col-12">
<div class="card-deck">
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
</div>
</div>
</div>
Doesn't anyone know how to do this ?
Regards.
----- EDIT -----
With a picture :)


Here it is.
.wrapper {
margin-left: auto;/*this makes wrapper center*/
margin-right: auto;/*this makes wrapper center*/
border:1px solid blue;
width:100%;
text-align:center;
}
.card {
padding-left: 10px;
padding-right: 10px;
max-width: 240px;
margin-left: 0px;
margin-right: 0px;
border: 0px;
display: inline-block;
min-width: 240px;
}
.card-body{
border:1px solid black;
}
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-12">
<div class="wrapper">
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Related

Bootstrap card-deck elements not getting the same proportions

I'm displaying card decks in order to show a set of articles stored in a database. This is the pretty simple piece of code I'm using:
HTML
<div class="row">
<div class="card-deck">
<template is="dom-repeat" items="{{articles}}" as="article">
<div class="col-12 col-md-4 mb-md-5">
<div
class="card"
on-tap="showViewer"
data-id$="[[article.id]]"
>
<img
class="card-img-top img-fluid vertical-image"
src$="{{getArticleImage(article)}}"
onerror$="this.src='{{defaultimage}}'"
alt="{{getArticleDescription(article)}}"
/>
<div class="card-body d-flex flex-column justify-content-center py-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article)}}>
<span class="medium-text">
{{getSources(article)}}
</span>
</div>
<p class="card-text primary-headline medium-text">
{{article.schema:headline}}
</p>
</div>
</div>
</div>
</template>
</div>
</div>
CSS
.vertical-image {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
.icon-sm {
height: 20px;
width: auto;
}
.medium-text {
font-family: Raleway-Medium;
}
.primary-headline {
font-size: 25px;
line-height: 25px;
text-align: justify;
}
According to Bootstrap documentation, using the card-deck class should make all the cards in the deck to have equal width and height. However, I'm not acheiving that behaviour. Here you are a picture where you can see what I am getting.
What would be the correct way to achieve that all the images in the cards and all the cards have the same height and width?

Check this. Hope it helps.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
Card. I'm just a simple card-block.
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card h-100 text-white bg-danger">
<div class="card-body">
<h3 class="card-title">Danger</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Outline
</div>
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card h-100 card-body">
Card. I'm just a simple card-block, but I have a little more text!
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card h-100 border-primary">
<div class="card-body">
<h3 class="card-title">Primary</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Outline
</div>
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card h-100 card-body">
Card. I'm just a simple card-block.
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card text-white bg-primary">
<div class="card-body">
<h3 class="card-title">Hello</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Outline
</div>
</div>
</div>
</div>
</div>

Bootstrap creating a row with 4 boxes

Hi guys I'm using bootstrap 3 and trying to crate this effect here :
However i cant seem to create this using bootstrap at all Mine keep lying under each other, Any help on recreating this format would be great
HTML:
<div id="night">
<div class="container">
<div class="row">
<div class="col-xs-3 col-md-6 first">
<p>a</p>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 first">
<p>a</p>
</div>
<div class="col-xs-3 col-md-3 first">
<p>a</p>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 first">
<p>a</p>
</div>
<div class="col-xs-3 col-md-3 first">
<p>a</p>
</div>
</div>
</div>
</div>
css:
.first {
border-style: solid;
border-color: red;
}
Thanks

Try this please
<div id="night">
<div class="container">
<div class="row">
<div class="col-md-4 first">
<div class="second">a</div>
</div>
<div class="col-md-4 first">
<div class="third">a</div>
<div class="third">a</div>
</div>
<div class="col-md-4 first">
<div class="third">a</div>
<div class="third">a</div>
</div>
</div>
</div>
</div>
CSS:
.first {
border-style: solid;
border-color: red;
}
.second {
border-style: solid;
border-color: blue;
display: block;
height: 400px;
}
.third {
border-style: solid;
border-color: blue;
display: block;
height: 200px;
}

This works in full page, maybe you can work with this aproximation:
<div class="container">
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
1
</div>
<div class="col-sm-8" style="background-color:pink;">
<div class="row">
<div class="col-sm-6" style="background-color:blue;">
2
</div>
<div class="col-sm-6" style="background-color:red;">
3
</div>
<div class="col-sm-6" style="background-color:green;">
4
</div>
<div class="col-sm-6" style="background-color:black;">
5
</div>
</div>
</div>
</div>
</div>

How to strech the grid items in a Cartesian plane made with Bootstrap4 and Flex?

I need to implement a cartesian plane with Bootstrap 4 and Flex. The desired output is something like the following image:
The plane is composed by a 10x10 matrix. Moreover I need a row containing the x labels and a column showing the y labels.
Here you are my code:
<div class="d-flex p-2" style="border: 1px solid black; width: 40%; margin-bottom: 50px;">
<div class="d-flex flex-row">
<div class="p-2 align-items-stretch">1</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
<div class="p-2 align-items-stretch">11</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
</div>
<!-- the same for the other 8 rows -->
</div>
And the associated css:
.p-2 {
border: 1px solid lightgray;
}
.p-2:before {
content:'';
float:left;
padding-top:100%;
}
The actual result is:
I have two problems:
the row number 11 should be stretched until the last column;
the grid items should adapt their size according to the available space
of the container.
How I can reach these goals? Thank you

You can use the Bootstrap grid like this...
Demo: https://www.codeply.com/go/sQA6tvHiZh
<div class="container text-center">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="row">
<div class="col-1">y</div>
<div class="col-11">
<div class="row">
<div class="col">1
</div>
<div class="col">2
</div>
<div class="col">3
</div>
<div class="col">4
</div>
<div class="col">5
</div>
<div class="col">6
</div>
<div class="col">7
</div>
<div class="col">8
</div>
<div class="col">9
</div>
<div class="col">10
</div>
</div>
<!--/row-->
9 more row ...
<div class="row">
<div class="col">x
</div>
</div>
</div>
</div>
</div>
</div>
<!--container-->
</div>

Need help arrange items in a div with bootstrap

I'm trying to arrange a div like this but can't get it to work.
What I'm getting is this
My thought was to keep the image in its own column and then split the other columns into smaller rows and insert there but that doesn't seem to work. Here's my code:
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="row d-flex w-100 justify-content-between products-div">
<div class="col-sm-1">
<img [src]="prod.imagePath" class="product-page-images">
</div>
<div class="row">
<div class="col-sm-10">
<h3 class="mb-1">{{prod.name}}</h3>
<p class="products-price-text">${{prod.price}}</p>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<h5 class="mb-1">{{prod.seller}}</h5>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<p class="mb-1">{{prod.description}}</p>
</div>
</div>
</div>
</a>

HTML
<div class="container">
<div class="row">
<div class="main-container clearfix">
<div class="col-md-1">
<div class="img-con">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" alt="" />
</div>
</div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<div class="clearfix">
<div class="pull-left">
<h3>Name</h3>
<small>Seller</small>
</div>
<div class="pull-right">
<h3>Price</h3>
</div>
</div>
</div>
<div class="col-md-12">
<div class="desc">
description
</div>
</div>
</div>
</div>
</div>
</div></div>
css
.main-container
{
border:1px solid ;
}
.img-con
{
height:100%;
width:100%;
}
.img-con img
{
max-width:inherit;
max-height:inherit;
height:100%;
width:100%;
}
.desc
{
border:1px solid;
}
reference link
and style accordingly.. hope this helps

Need to design 8 boxes in two rows

How to design 8 boxes like following using bootstrap?
Please ignore the colors each box would be similar to a visit card.
They should only be 8 boxes in two rows.
With specific margins to the right and left in big screens and no
margin in small screens. So in tablet should be 2 and in mobile
version only 1 per row. Also need to make sure the size of boxes are
all in the same size.
Demo
<div class="container-fluid">
<div style="border-style: solid;padding:1%;" class="col-md-2 col-md-offset-1">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
<div style="border-style: solid;padding:1%" class="col-md-2">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
<div style="border-style: solid;padding:1%" class="col-md-2">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
<div style="border-style: solid;padding:1%" class="col-md-2">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
</div>

I know the question was about Bootstrap, but I thought it would be helpful for people to see it done with just html and css. I hate seeing people work real hard to make ugly solutions with Bootstrap, when this so basic if you didn't use Bootstrap.
CODEPEN
HTML:
just a list of business cards
<ul>
<li>
<img src="http://lorempixel.com/50/50/sports/" alt="John Doe"/>
<span class="content">
<strong>Johnny Realestate</strong>
johnny#realestate.io
222.333.4444
<address>
1 Real Estate Court<br>
suite 101<br>
Real, AZ 10101
</address>
</span>
</li>
... REPEAT
</ul>
CSS:
mobile first
display:flex;
0 to 599px => mobile layout |=| 1 item across
599px to 1024px => tablet layout |=|=| 2 items across
1024px and greater => desktop layout |=|=|=|=| 4 items across
ul {
list-style:none;
display:flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width:1024px; // should match the page width, this value is also reflected in the media queries
width:100%;
margin: 0 auto; // auto can be replaced with any value
padding: 1em 0;
background: orange;
}
ul li {
width: 100%;
margin: 0 0 1em 0;
box-shadow:0px 0px 1px 1px black;
background: white;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
ul li img {
height:50px;
width: 50px;
margin: 0 5px 0 0;
}
ul li span {
width: calc(100% - 55px);
}
#media (min-width:599px){
ul li {
width: 49%;
margin: 0 2% 1em 0;
}
}
#media (min-width:599px) and (max-width:1024px){
ul li:nth-child(2n + 2){
margin: 0 0 1em 0;
}
}
#media (min-width:1024px){
ul li {
width: 24%;
margin: 0 1.3333333333% 1em 0;
}
ul li:nth-child(4n + 4){
margin: 0 0 1em 0;
}
}
There are lots of ways to optimize this example or tweak it to reach your goals. I hope this helps.
[UPDATE]
I added the prefixes for display:flex; and flex-wrap: wrap;, but if you can, you should add AutoPrefixer to your workflow!

My understanding from your question is that you want the container margin-left and right to be removed on smaller screens, so the cards touch the edge of the screen.
The demo below has the 8 cards in two rows. I have added some padding and margin to even up the spacing of the cards, the nth-child rule is used to apply that to the correct card.
If you want to keep the left and right margin, you can just exclude my media queries.
DEMO HERE
.card-row {
background: lightsalmon;
}
.card .inner {
height: 100px;
padding: 10px;
background: whitesmoke;
color: grey;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
margin: 15px 0;
}
#media screen and (max-width: 991px) {
.container {
width: 100%;
}
.card:nth-child(odd) {
background: orange;
padding-left: 0;
}
.card:nth-child(even) {
background: darkorange;
padding-right: 0;
}
}
#media screen and (max-width: 767px) {
.card:nth-child(odd), .card:nth-child(even) {
background: coral;
padding: 0;
}
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<h3>Heading</h3>
<div class="row card-row">
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>hello</p>
</div>
</div>
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>hello</p>
</div>
</div>
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>Hello, I am beautiful content... please change me!</p>
</div>
</div>
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>hello</p>
</div>
</div>
</div>
<div class="row card-row">
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>hello</p>
</div>
</div>
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>hello</p>
</div>
</div>
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>Hello, I am beautiful content... please change me!</p>
</div>
</div>
<div class="card col-xs-12 col-sm-6 col-md-3">
<div class="inner">
<p>hello</p>
</div>
</div>
</div>
</div>
I have also added some background-color - but you can remove that it's just to help you see the breakpoints and changes when you resize the browser.

you need to add col-lg-3 to your Div some like code Below.
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Thumbnail Gallery</h1>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="#" class="thumbnail">
<img alt="" src="http://placehold.it/400x300" class="img-responsive">
</a>
</div>
</div>
</div>
OR See Link Below
http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/

You can use a simple method is using the clear:both concept after every 4 elements in a row
<style>
.clear{clear: both;}
</style>
<div class="container-fluid">
<div style="border-style: solid;padding:1%;" class="col-md-2 col-md-offset-1">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
<div style="border-style: solid;padding:1%" class="col-md-2">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
<div style="border-style: solid;padding:1%" class="col-md-2">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
<div style="border-style: solid;padding:1%" class="col-md-2">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
<div class="clear"></div>
<div style="border-style: solid;padding:1%;" class="col-md-2 col-md-offset-1">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
<div style="border-style: solid;padding:1%" class="col-md-2">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
<div style="border-style: solid;padding:1%" class="col-md-2">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
<div style="border-style: solid;padding:1%" class="col-md-2">
<div class="row">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
<div class="row">
<p>
Description
</p>
</div>
</div>
<div class="clear"></div>

Use the following markup
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%;">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%;">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%;">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%;">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%; ">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%;">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%;">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div style="border-style: solid; padding: 1%;">
<div class="row">
<div class="col-xs-6">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
<p>
Description
</p>
</div>
<div class="col-xs-6">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>
</div>
</div>
</div>
</div>

Try with this code: Demo
Update Link Demo with background color class
HTML:
<div class="container-fluid">
<div class="row pb10">
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3 mt20">
<div class="card">
<div class="col-md-7">
<h4>Title</h4>
<p>Name</p>
<p>Family</p>
</div>
<div class="col-md-5 pt5">
<img class="img-responsive" src="http://placehold.it/150x150">
</div>
<div class="col-md-12">
<p class="desc">
Description
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
CSS:
.card {
border: 1px solid #333;
padding:1%;
}
.mt20 {
margin-top: 20px;
}
.pt5 {
padding-top:8px;
}
.pb10 {
padding-bottom:10px;
}
.desc {
border-top: 1px solid #999;
padding-top: 10px;
margin-top: 10px;
}

Assuming that you are using bootstrap:-
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
hello
</div>
<div class="col-md-3">
hello
</div>
<div class="col-md-3">
hello
</div>
<div class="col-md-3">
hello
</div>
</div>
</div>
<!--second row-->
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
hello
</div>
<div class="col-md-3">
hello
</div>
<div class="col-md-3">
hello
</div>
<div class="col-md-3">
hello
</div>
</div>
</div>

This one might help
Bootstrap Grid System
Html:
<div class="container-fluid">
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="www.example.com/photo">
</div>
</div>

This one might help
Bootstrap Grid System
Html:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
</div>
</div>

Use the following markup:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="card">Text</div>
</div>
</div>
</div>
css:
.container-fluid{
overflow: hidden;
}
.row{margin: 0 -30px;}
.card{
border: 1px solid red;
margin: 15px 0;
padding: 15px;
background: #f0f0f0;
}
JSFiddle Demo

Resources