Border of Boostrap cards - css

Hi I want to use Bootstrap v4.0.0-beta Cards.
First the class "card-block" not works for me. Only if I use the class "card-body" it looks like the examples.
How can I remove the double border between my cards? Every card has a border of 1px - between them there is a border of 2px, I want only 1px. Is there a simple possibility?
This is my code:
<div class="row no-gutters">
<div class="card col-sm-6 col-lg-3">
<div class="card-img-top"><img src="pic.jpg" /></div>
<div class="card-body">
<p class="card-text">my text</div>
<div class="card-footer">my footer</div>
</div>
<div class="card col-sm-6 col-lg-3">
<div class="card-img-top"><img src="pic.jpg" /></div>
<div class="card-body">
<p class="card-text">my text</div>
<div class="card-footer">my footer</div>
</div>
<div class="card col-sm-6 col-lg-3">
<div class="card-img-top"><img src="pic.jpg" /></div>
<div class="card-body">
<p class="card-text">my text</div>
<div class="card-footer">my footer</div>
</div>
<div class="card col-sm-6 col-lg-3">
<div class="card-img-top"><img src="pic.jpg" /></div>
<div class="card-body">
<p class="card-text">my text</div>
<div class="card-footer">my footer</div>
</div>
</div>
Thank's for your help.


Use the border utilities...
https://www.codeply.com/go/tukHrs1GLz
<div class="row no-gutters">
<div class="card col-sm-6 col-lg-3 border-right-0">
<div class="card-img-top"><img src="pic.jpg" /></div>
<div class="card-body">
<p class="card-text">my text</div>
<div class="card-footer">my footer</div>
</div>
<div class="card col-sm-6 col-lg-3 border-right-0">
<div class="card-img-top"><img src="pic.jpg" /></div>
<div class="card-body">
<p class="card-text">my text</div>
<div class="card-footer">my footer</div>
</div>
<div class="card col-sm-6 col-lg-3 border-right-0">
<div class="card-img-top"><img src="pic.jpg" /></div>
<div class="card-body">
<p class="card-text">my text</div>
<div class="card-footer">my footer</div>
</div>
<div class="card col-sm-6 col-lg-3">
<div class="card-img-top"><img src="pic.jpg" /></div>
<div class="card-body">
<p class="card-text">my text</div>
<div class="card-footer">my footer</div>
</div>
</div>
Also note, card-block changed to card-body from alpha 6 to beta
It would be better to put the cards inside the columns.


Bootstrap 4 has a border classes that you can add to your cards. Here's your code with the border-right-0 class added to all of the cards except the last one.
<div class="row no-gutters">
<div class="card col-sm-6 col-lg-3 border-right-0">
<div class="card-img-top"><img src="pic.jpg" /></div>
<div class="card-body">
<p class="card-text">my text</div>
<div class="card-footer">my footer</div>
</div>
<div class="card col-sm-6 col-lg-3 border-right-0">
<div class="card-img-top"><img src="pic.jpg" /></div>
<div class="card-body">
<p class="card-text">my text</div>
<div class="card-footer">my footer</div>
</div>
<div class="card col-sm-6 col-lg-3 border-right-0">
<div class="card-img-top"><img src="pic.jpg" /></div>
<div class="card-body">
<p class="card-text">my text</div>
<div class="card-footer">my footer</div>
</div>
<div class="card col-sm-6 col-lg-3">
<div class="card-img-top"><img src="pic.jpg" /></div>
<div class="card-body">
<p class="card-text">my text</div>
<div class="card-footer">my footer</div>
</div>
</div>
https://codepen.io/cowanjt/pen/xLyPZG

Related

Is there a way to equally level the <div class ="card"> in bootstrap?

I'm struggling on how to level this card equally to each other:
As you can see in the picture below. The card for the top reason for downtime doesn't match what is on the other cards or vice-versa. I want them to on the same height with each other regardless of what is inside on them.
Below is my code:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Reason for downtime
</h5>
<div class="card-body">
<ul id="top5Downtime">
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Down Terminals:
</h5>
<div class="card-body">
<ol id="mostDown">
</ol>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Up Terminals:
</h5>
<div class="card-body">
<ol id="mostUp">
</ol>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="bar-chart">
</div>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="lineChart">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card shadow mb-3">
<h5 class="card-header">
Planned vs Unplanned Event
</h5>
<div class="card-body">
<div id="pieChart"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow mb-3">
<h5 class="card-header">
Downtime vs Uptime
</h5>
<div class="card-body">
<div id="pieChart2"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart2">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart3">
</div>
</div>
</div>
</div>
</div>
<!--END OF div.row-->
<!--END OF div.row-->
</div>
I've tried using the align-self-stretch but it only broke my design. How could I proceed?

Applying display: flex (or .d-flex class) to each of the .cols in same row will make them have equal height:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Reason for downtime
</h5>
<div class="card-body">
<ul id="top5Downtime">
</ul>
</div>
</div>
</div>
<div class="col-md-5 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Down Terminals:
</h5>
<div class="card-body">
<ol id="mostDown">
</ol>
</div>
</div>
</div>
<div class="col-md-4 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Up Terminals:
</h5>
<div class="card-body">
<ol id="mostUp">
</ol>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="bar-chart">
</div>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="lineChart">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 d-flex">
<div class="card shadow mb-3 w-100">
<h5 class="card-header">
Planned vs Unplanned Event
</h5>
<div class="card-body">
<div id="pieChart"></div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="card shadow mb-3 w-100">
<h5 class="card-header">
Downtime vs Uptime
</h5>
<div class="card-body">
<div id="pieChart2"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart2">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart3">
</div>
</div>
</div>
</div>
</div>
<!--END OF div.row-->
<!--END OF div.row-->
</div>
You also have to apply .w-100 to cards inside .d-flex cols, to make them stretch to full column width on smaller responsiveness intervals.
Important note: this solution relies on the fact you only have 1 card in each .col. If you have more than one, you'll need to add .flex-column to your .col as well.
But, for your example, .d-flex to .cols is enough.

Bootstrap grid displaying column out of row in small screen

How can I display my Hello-div-2 after Hello-div-3 in small screen?
Right now the flow is
Hello-div-1, Hello-div-2, Hello-div-3, Hello-div-4.
It should be
Hello-div-1, Hello-div-3, Hello-div-2, Hello-div-4.
<div class="container">
<div class="row">
<div class="col-md-8 col-12 bg-primary">
<h2 class="font-weight-light">Hello-div-1</h2>
</div>
<div class="col-md-4 col-12 bg-success">
<h2 class="font-weight-light ">Hello-div-2</h2>
</div>
</div>
<div class="row">
<div class="col-md-8 col-12 bg-info">
<h2 class="font-weight-light">Hello-div-3</h2>
</div>
<div class="col-md-4 col-12 bg-warning">
<h2 class="font-weight-light">Hello-div-4</h2>
</div>
</div>
</div>

if you can't change structure only solution which i can think of is
<div class="container">
<div class="row">
<div class="col-md-8 col-12 bg-primary">
<h2 class="font-weight-light">Hello-div-1</h2>
</div>
<!-- hide this in small screen -->
<div class="col-md-4 col-12 bg-success">
<h2 class="font-weight-light ">Hello-div-2</h2>
</div>
</div>
<div class="row">
<div class="col-md-8 col-12 bg-info">
<h2 class="font-weight-light">Hello-div-3</h2>
</div>
<!-- show this in small screen -->
<div class="col-md-4 col-12 bg-success">
<h2 class="font-weight-light ">Hello-div-2</h2>
</div>
<div class="col-md-4 col-12 bg-warning">
<h2 class="font-weight-light">Hello-div-4</h2>
</div>
</div>
</div>

Put them all in the same .row and use the .order- classes...
<div class="container">
<div class="row">
<div class="col-md-8 col-12 bg-primary order-0 order-md-0">
<h2 class="font-weight-light">Hello-div-1</h2>
</div>
<div class="col-md-4 col-12 bg-success order-2 order-md-0">
<h2 class="font-weight-light ">Hello-div-2</h2>
</div>
<div class="col-md-8 col-12 bg-info order-1 order-md-0">
<h2 class="font-weight-light">Hello-div-3</h2>
</div>
<div class="col-md-4 col-12 bg-warning order-3 order-md-0">
<h2 class="font-weight-light">Hello-div-4</h2>
</div>
</div>
</div>
https://codeply.com/p/m8sgEDDmp2

How can I get the nth-child of a Bootstrap .card body

I'm trying to set the background-color of card-body in bootstrap 4, however I'm not sure how I can obtain the card-body element as each body has a different parent (I think my understanding of this is correct), is it possible to do this using the below code?
I've put a sample snippet below which shows the paragraphs working, but the cards are not working here:
.bg-alt:nth-child(5n+1){background-color: #5bc0de;}
.bg-alt:nth-child(5n+2){background-color: #ed9c28;}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p class="bg-alt"><span>test 1</span></p>
<p class="bg-alt"><span>test 1</span></p>
<p class="bg-alt"><span>test 1</span></p>
<p class="bg-alt"><span>test 1</span></p>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin ">
<div class="card">
<div class="bg-alt">
98787667f
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
45645656u57u5
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
456456456456
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
123123123
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
123123
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
324234234
</div>
</div>
</div>
</div>
</body>
</html>

The "card-body" is always the ONLY child (never the fifth), as the "nth-child" selector only references immediate siblings.
Try:
.col-xl-2:nth-child(5n+1) .bg-alt {background-color: #5bc0de;}
.col-xl-2:nth-child(5n+2) .bg-alt {background-color: #ed9c28;}

Can't get bootstrap columns to work the way I want it to

So I am trying to a section on the page so that there is 2 sets of an image and words on each row when the screen is in lg and md modes.
so it should go something like this...
(img) (words...) (img)(words...)
(img) (words...) (img)(words...)
<div class="container rowSpacing">
<h1 class="text-center">We Capture All Memories...</h1>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<img src="images/NewLogo.png" class="img-responsive" alt="...">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<h2>Your loved ones...</h2>
</div>
<div class="clearfix"></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<img src="images/NewLogo.png" class="img-responsive" alt="...">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<h2>Your special day...</h2>
</div>
<div class="clearfix"></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<img src="images/NewLogo.png" class="img-responsive" alt="...">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<h2>Your last moments...</h2>
</div>
<div class="clearfix"></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<img src="images/NewLogo.png" class="img-responsive" alt="...">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<h2>Your beautiful moments...</h2>
</div>
</div>
</div>

Try removing the
<div class="clearfix"></div>
and setting each of your columns to a set height

<div class="container rowSpacing">
<h1 class="text-center">We Capture All Memories...</h1>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<img src="images/NewLogo.png" class="img-responsive" alt="...">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<h2>Your loved ones...</h2>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<img src="images/NewLogo.png" class="img-responsive" alt="...">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<h2>Your special day...</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<img src="images/NewLogo.png" class="img-responsive" alt="...">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<h2>Your last moments...</h2>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<img src="images/NewLogo.png" class="img-responsive" alt="...">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<h2>Your beautiful moments...</h2>
</div>
</div>
</div>
sample code

You just need to remove the clearfix DIV after the second and after the sixth pair of image+texts:
http://codepen.io/anon/pen/aJLYeZ

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