I am new to front end and struggling when resizing the screen .
I am using 4 cards(Performance,Quality,Availability,Availability) in a card-group class and wants to place two cards in a row when screen is on medium and 1 card in a row when screen is on small .
Below is my code
<div class="row">
<div class="card-group col-lg-8 col-md-12 col-sm-12">
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">Performance</h4>
</div>
<div class="card-body">
<div id="gauge1"></div>
</div>
</div>
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">Quality</h4>
</div>
<div class="card-body">
<div id="gauge2"></div>
</div>
</div>
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">Availability</h4>
</div>
<div class="card-body">
<div id="gauge3"></div>
</div>
</div>
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">OEE
</h4>
</div>
<div class="card-body">
<div id="gauge4" style="text-align: center"></div>
<div id="dvLabel" style="text-align: center; position: absolute; top: 52%; right: 48%; font-size: 25px">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="card mb-4 mr-2" style="height: 119px">
<div class="card-header mt-4">
<h4 class="mb-0">Breakdown Hours</h4>
</div>
<div class="card-body ml-3 mr-3 text-center" style="background-color: #FFFFFF; color: #081A51; height: 50%">
<div>
<h3 class="mb-0"><%= Breakdown_Hours %></h3>
</div>
</div>
</div>
<div class="card mb-4 mr-2" style="height: 119px">
<div class="card-header mt-4">
<h4 class="mb-0">MTBF</h4>
</div>
<div class="card-body ml-3 mr-3 text-center" style="background-color: #FFFFFF; color: #081A51; height: 50%">
<div>
<h3 class="mb-0"><%= MTBF %></h3>
</div>
</div>
</div>
<div class="card mb-4 mr-2" style="height: 119px">
<div class="card-header mt-4">
<h4 class="mb-0">MTTR</h4>
</div>
<div class="card-body ml-3 mr-3 text-center" style="background-color: #FFFFFF; color: #081A51; height: 50%">
<div>
<h3 class="mb-0"><%= MTTR %></h3>
</div>
</div>
</div>
</div>
</div>
It is looking like this in a small screen
wherein I wanted to have these 4 cards placed below one other on small screen and 2 cards in case of medium. I am struggling to find the missing link .
Your second group misses the card-group class. Add it and the last three cards will be positioned side by side. If you want them be aligned with the ones on first row, you can just insert and empty card.
I try to make a 3-column grid with images so that some text overlays these images. I found an example of the linear gradient for this purpose:
.card__content {
position: absolute;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}
So in HTML I have the next:
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="1.jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Matricaria is a genus of flowering plants in the chamomile tribe within the sunflower family</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="2.jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Gulls, or colloquially seagulls, are seabirds of the family Laridae in the suborder Lari</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="3.jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Cirsium arvense is a perennial species of flowering plant in the family Asteraceae</h3>
</div>
</div>
</div>
</div>
</div>
But this gradient doesn't glue to the end of the image and climbs out to the right. And the thumbnail's border doesn't stretch for all length of the block, though without the gradient it did. Here is what it looks like now.
Image
Please help!
I have made a few changes:
.card__content {
position: absolute;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
height: 100%;
display: flex;
align-items: center;
padding: 10px;
color: #fff;
}
.thumbnail {
display: inline-block;
border: 0;
}
.thumbnail img {
width: 100%;
max-width: 100%
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Matricaria is a genus of flowering plants in the chamomile tribe within the sunflower family</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Gulls, or colloquially seagulls, are seabirds of the family Laridae in the suborder Lari</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Cirsium arvense is a perennial species of flowering plant in the family Asteraceae</h3>
</div>
</div>
</div>
</div>
</div>
Be a hard one to explain so I hope that I will provide enough descriptive information. I have a header which takes advantage of the profile container function and also using the profile-stats with stats-col. Currently, it is laid out as the following but I would like to modify it so the lines are consistent and go straight down.
My code for that is the following:
.profile-container .profile-header .profile-stats .stats-col:not(:last-child) {
border-right: 1px solid #eeeeee;
}
.profile-container .profile-header .profile-stats .stats-col .stats-value {
display: block;
margin: 0 auto;
text-align: center;
font-size: 30px;
font-family: 'Open Sans', 'Segoe UI';
HTML
<div ng-hide="isNewSite">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="col-xs-6 col-md-6 text-align-left no-padding-left">
<h4>Site Entitlements View</h4>
</div>
<div class="pull-right">
<button class="btn btn-sky" ng-click="toggleButtonFunctionality()">
{{editButtonText}}
</button>
<button class="btn btn-darkorange" ng-click="handleDelete()" title="{{disableDeletionReason}}">
Delete Site
</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="profile-container">
<div class="profile-header row">
<div class="col-lg-2 col-md-4 col-sm-12 text-center">
<img src="assets/img/PICTURE.png" alt="" class="header-avatar"/>
</div>
<div class="col-lg-5 col-md-8 col-sm-12 profile-info">
<div class="header-fullname">{{targetEntity.siteName}}</div>
<span ng-bind-html="renderEntityState(targetEntity.status)"></span>
<div class="header-information" style="font-size:15px">
{{targetEntity.address1}}
<br>{{targetEntity.city}} </br>
{{targetEntity.postCode}}
<br>{{targetEntity.country}} </br>
</div>
</div>
<div class="col-lg-5 col-md-12 col-sm-12 col-xs-12 profile-stats">
<div class="row" >
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 stats-col" >
<div class="stats-value purple">{{serviceTotal}}</div>
<div class="stats-title">SERVICES</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 stats-col">
<div class="stats-value purple">{{siteSubjectsTotal}}</div>
<div class="stats-title">SUBJECTS</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 stats-col">
<div class="stats-value purple">
<a ui-sref="app.client-details({clientId:entity.clientIdId})"
ui-sref-active="active" class="purple">{{targetEntity.clientName}}
</a>
</div>
<div class="stats-title">CLIENT</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I do know that if I remove the .stats.-col then it does become consistent in the look but I still want the space between the values.
So I am wondering does anyone know what I could do? If you need further explanation I am happy to help.
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 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