<div class="col-lg-12 text-center">
<div class="for-video-background" style="background-image: url('./assets/images/back-video.png');">
<a href="#">
<img src="./assets/images/play-icon.png" alt="" class="img-fluid" style="width: 5rem;">
</a>
</div>
</div>
I want the background image to take full height and the sub-image must align the center of the background image.
And at last it must be responsive.
Use width:100vh to make full height and use left and right make the image become center.
Use the background-size: cover to resize the background image to cover the entire container.
<div class="col-lg-12 text-center">
<div class="for-video-background" >
<a href="#">
<img src="./assets/images/play-icon.png" alt="" class="img-fluid" >
</a>
</div>
</div>
CSS:
body{
margin: 0;
}
img{
width:5rem;
position: absolute;
left: 47.5%;
top: 47.5%;
}
.for-video-background{
height: 100vh;
background-size: cover;
background-image: url('./assets/images/back-video.png')
}
You have to use "height:100vh"
<div class="col-lg-12 text-center">
<div class="for-video-background" style="background-image: url('./assets/images/back-video.png');">
<a href="#">
<img src="./assets/images/play-icon.png" alt="" class="img-fluid" style="width: 5rem;height: 100vh">
</a>
</div>
</div>
Related
I have two adjacent responsive images, each with a button that I would like to be centered in the image. Right now the buttons are just sitting below the images. Here is my code
<!--LAB1-->
<div class="row">
<div class="col-lg-2 col-md-6 col-lg-6">
<div class="view overlay">
<img class="img-fluid" src="img/lab1.jpeg" alt="Card image cap">
<div class="text center">
<a href="https://www.google.com" target="_blank" class="btn btn-secondary" role="button">Lab1 Website
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
</div>
<div style="height: 10px"></div>
<!--LAB2-->
<div class="col-lg-2 col-md-6 col-lg-6"
<div class="view overlay">
<img class="img-fluid" src="img/lab2.jpg" alt="Card image cap">
<a href="https://www.google.com" target="_blank" class="btn btn-secondary" role="button">Lab2 Website
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
</div>
attached an image of what I currently have
Here is a reference link you can use
https://www.w3schools.com/howto/howto_css_button_on_image.asp
Or else
Simply add below CSS code for button
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
Here is fiddle
http://jsfiddle.net/L1aknvgs/1/
Add position relative to the parent of button. Then add position absolute to the button.
.btn{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
Attached an example: CODEPEN
In bootstrap 4, You can use this as follow and in CSS the left and top percentage depend on the pixels of an image, below I provide your code with modification.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-6 col-lg-6">
<div class="view overlay">
<img class="img-fluid" src="https://dummyimage.com/600x400/000/fff" alt="Card image cap">
<div class="text center">
Lab1 Website
</div>
</div>
</div>
</div>
</div>
And CSS
.button_position {
position: absolute;
left: 30%;
top: 40%;
}
and here is the fiddle,
https://jsfiddle.net/vbsgfo9k/1/
I am using a carousel where I put 5 images with different height and width but there are some issues with images, some images are stretched some images are the center of the carousel.
I want that all images fit inside the carousel.
Here is my code :
<div uib-carousel active="active" class="filter-carousel" interval="false" no-wrap="noWrapSlides" ng-if="vm.temp.length">
<div uib-slide ng-repeat="img in vm.temp" index="$index">
<img ng-src="{{img.src}}" height="650">
</div>
You can use the "background-image" attribute of the div tag. And set the "background-size" attribute to contain or cover. Eg :
.owl-carousel .item img
{
display: none;
}
.owl-carousel .item img + div
{
display: block;
width: 100%;
height: 210px; /* option */
background-repeat: no-repeat;
background-position: center center; /* 0 0 */
background-size: contain; /* or cover */
}
<div class="owl-carousel owl-theme">
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
</div>
You can use the object-fit property in CSS to define how an image should fit into a container. You can use fill, contain, cover, none or scale down.
.the-carousel img {
object-fit: cover;
}
I'm trying to create a grid of photos where you can hover over them and they will change into other images. I've tried placing the image on CSS as background image but when you hover, the other picture doesn't seem to be exactly the same size (when it actually is).
I also tried using two images method (one on top of the other) and it works well with only one image on the page but with a grid of images, it doesn't work because of the position: absolute.
The only way that I found that "sort of" works is by replacing one image for the other but then you don't have a smooth transition (fade into another image).
Here is the access to code pen (seems to work better):
Code:
css:
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<section class="container pages-content">
<div class="row">
<div class="col-md-12 bottom">
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/>
<!-- trying to use hover to change images
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> -->
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 right">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-6 col-sm-12 bottom left">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
</div>
<!-- Second block -->
<div class="row">
<div class="col-md-6 col-sm-12 right ">
<div class="row">
<div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
</div>
</div>
</div><!--./col-md-6-->
<div class="col-md-6 bottom col-sm-12 left project-image">
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
</div>
</div><!--./block 2-->
</section>
</body>
I am not sure if this is what you were looking for.
.row {
display: flex;
flex-direction: row;
}
.flex-item {
min-width: 200px;
min-height: 200px;
}
.hover-img {
transition: background-image 1s ease-in-out;
background-size: cover;
}
.img-1 {
background-image: url(https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg);
width: 400px;
/*
height: 200px;*/
flex-grow: 2;
}
.img-1:hover {
background-image: url(http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg);
}
.img-2 {
background-image: url(http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg);
/* width: 200px;
height: 200px;*/
flex-grow: 1;
}
.img-2:hover {
background-image: url(http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif);
}
.img-3 {
background-image: url(http://donsmaps.com/clickphotos/dolnivi200x100.jpg);
/*width: 200px;
height: 200px;*/
flex-grow: 1;
}
.img-3:hover {
background-image: url(http://markcarson.com/images/SunBird-7-200x200.png);
}
.img-4 {
/*max-width:400px;*/
flex-grow: 2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<body>
<section class="container pages-content">
<div class="row">
<div class="flex-item hover-img img-1"></div>
<div class="flex-item hover-img img-2"></div>
<div class="flex-item hover-img img-3"></div>
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" class="flex-item img-4" />
</div>
</section>
</body>
Ok so I have been playing around with your problem for a bit. I came up with this solution: http://codepen.io/anon/pen/Rpwewg. It appears to be working the way you want it. I ran into two issues figuring it out.
The first one was that you are using the position: absolute on the images. it will place the image relative to the closest parent that is relatively positioned. Since in your example the parent div was a bootstrap class I decided to create a new div with position: relative assigned to it and gave it a class of images-wrapper.
Now I just needed to overlap the images over each other, just as you did in the example. But...If I make both images position: absolute the browser won't have an height assigned to the images-wrapper class. Therefore I decided to give one of the images a relative position and the other one absolute so it would overlap.
hope it helps :).
html
<body>
<section class="container pages-content">
<div class="row">
<div class="col-md-12 bottom">
<!--img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/-->
<!-- trying to use hover to change images-->
<div class="images-wrapper"><img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> <!---->
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="images-wrapper"><img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/>
</div>
</div>
<div class="col-md-6 col-sm-12 bottom left">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
</div>
<!-- Second block -->
<div class="row">
<div class="col-md-6 col-sm-12 right ">
<div class="row">
<div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
</div>
</div>
</div><!--./col-md-6-->
<div class="col-md-6 bottom col-sm-12 left project-image">
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
</div>
</div><!--./block 2-->
</body>
css
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
position: absolute;
z-index: 10;
opacity: 1;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
z-index: 9;
opacity: 1;
position: relative;
}
.images-wrapper{
position: relative;
}
The best way to achieve this is to set the images as background and hover background, then set background-size:cover to keep the image display "uniform" in size. No need for Javascript code at all.
Here, I forked your Codepen for a demo. I only applied the hover effect to the first image for you to check out. Let me know if it helps.
For the "smooth transition", CSS also takes care of it for you. Feel free to change the div width (and height) to serve your needs better:
div.row div {
cursor: pointer;
transition: ease 0.5s all;
}
div.row .col-md-12:first-child {
background-image: url('https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg');
background-size: cover;
height: 200px;
margin-bottom: 10px;
}
div.row .col-md-12:first-child:hover {
background-image: url('http://donsmaps.com/clickphotos/dolnivi200x100.jpg');
}
Hello kinda new here,
I just want my all images from my instafeed will all be the same size, shouldn't be distorted and image will resize freely (responsive), and i want it to look exactly like this
enter image description here
I tested it here http://jsfiddle.net/jazzu20/1c9yf61x/
<div class="livery-instafeed-section col-md-12">
<div id="instafeed">
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9JOiOdMLo5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/11251638_621920521284538_937019183_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Gp4RjMLgE/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/s640x640/sh0.08/e35/1390058_175285799480082_576833592_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9FJpd7MLts/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12093236_443227142549068_286565452_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9D_lqkMLqV/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12145135_1069396733117579_706096349_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Bb92JMLhh/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12093429_1668694736699760_1827692759_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9ACbbHMLlD/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12135431_1733638416868070_1024332902_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/8_BXkSsLn5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12105054_849750965144841_2082888771_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/89fRuosLje/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12107557_866233773472414_1869843871_n.jpg">
</a>
</div>
</div>
You can do this:
Note: The images are not same. The best you can do is to adapt the images.
CSS
#instafeed div a{
display: block;
border: solid 10px #fff;
}
#instafeed div a img{
width: 100%;
vertical-align: top;
}
DEMO HERE
ANOTHER SOLUTION
CSS
#instafeed div a{
position: relative;
display: block;
position:relative;
overflow: hidden;
height: 250px;
}
#instafeed div a img{
position: absolute;
vertical-align: top;
z-index:-1;
left: -50%;
top: -50%;
}
DEMO HERE
I am trying to make an responsive web page.
I have used this question and answer, to form mine icon circle for this project.
But I would like to make it more responsive, because I need to wrap some jQuery toggle() inside.
<div class="jumbotron">
<div class="circle-container">
<div class="row">
<span data-scrollreveal="enter top, wait 1.0s">
<a href="#" class="center hvr-grow"><img src="img/specialoffers.jpg" class="img-circle" alt="">
</a>
</span>
<span data-scrollreveal="enter right, wait 1.2s">
<img src="img/circle/special.png" class="img-circle" alt="">
</span>
<span data-scrollreveal="enter right, wait 1.4s">
<img src="img/specialoffers.jpg" class="img-circle" alt="">
</span>
<span data-scrollreveal="enter right, wait 1.6s">
<img src="img/specialoffers.jpg" class="img-circle" alt="">
</span>
<span data-scrollreveal="enter left, wait 1.8s">
<img src="img/specialoffers.jpg" class="img-circle" alt="">
</span>
<span data-scrollreveal="enter left, wait 2.0s">
<img src="img/specialoffers.jpg" class="img-circle" alt="">
/* Position icons into sircle */
.circle-container {
position: relative;
width: 35em;
height: 35em;
padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
border: none;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
overflow: hidden;
position: absolute;
top: 50%; left: 50%;
width: 6em; height: 6em;
margin: -2em; /* 2em = 4em/2 */ /* half the width */
}
.circle-container img {
display: block; width: 100%;
}
.deg0 { transform: translate(18em); } /* 12em= half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(18em) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(18em) rotate(-135deg); }
.deg180 { transform: translate(-18em); }
.deg225 { transform: rotate(225deg) translate(18em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(18em) rotate(-315deg); }
.circle-container a.deg45:hover, a.deg45:activate { img-size: 150%; }
</span>
<span data-scrollreveal="enter left, wait 2.2s">
<img src="img/specialoffers.jpg" class="img-circle" alt="">
</span>
</div>
</div><!--end circle-container-->
</div>
CSS for this div:
/* Position icons into sircle */
.circle-container {
position: relative;
width: 35em;
height: 35em;
padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
border: none;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
overflow: hidden;
position: absolute;
top: 50%; left: 50%;
width: 6em; height: 6em;
margin: -2em; /* 2em = 4em/2 */ /* half the width */
}
.circle-container img {
display: block; width: 100%;
}
.deg0 { transform: translate(18em); } /* 12em= half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(18em) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(18em) rotate(-135deg); }
.deg180 { transform: translate(-18em); }
.deg225 { transform: rotate(225deg) translate(18em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(18em) rotate(-315deg); }
.circle-container a.deg45:hover, a.deg45:activate { img-size: 150%; }
I want to wrap mine images inside div's and position them to form the circle, so they become responsive.
Is that possible?
Please Help.
Tank you.
I am using bootstrap and html5boilerplate for this project.
I need to make this to be responsive., on smaller viewport it would look like this
Can you check the JsFiddle I created for you https://jsfiddle.net/1et5s06h/ to check try to resize the preview pane.
FYI my answer depends on bootstrap's Grid system and Responsive utilities. You may want to read them to get a better understanding of the grid system and responsive utility classes and to customize my answer to better fit into your needs.
Refer to the below code (that uses your css):
<div class="jumbotron">
<div class="circle-container hidden-xs hidden-sm">
<div class="row">
<span data-scrollreveal="enter top, wait 1.0s">
<a href="#" class="center hvr-grow">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" alt="">
</a>
</span>
<span data-scrollreveal="enter right, wait 1.2s">
<a href="#" class="deg0">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
</span>
<span data-scrollreveal="enter right, wait 1.4s">
<a href="#" class="deg45">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
</span>
<span data-scrollreveal="enter right, wait 1.6s">
<a href="#" class="deg135">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
</span>
<span data-scrollreveal="enter left, wait 1.8s">
<a href="#" class="deg180">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
</span>
<span data-scrollreveal="enter left, wait 2.0s">
<a href="#" class="deg225">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
</span>
<span data-scrollreveal="enter left, wait 2.2s">
<a href="#" class="deg315">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
</span>
</div>
</div>
<!--end circle-container-->
<div class='container hidden-lg hidden-md '>
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg' class="img-circle" alt=""></a>
</div>
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg' class="img-circle" alt=""></a>
</div>
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg' class="img-circle" alt=""></a>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg' class="img-circle" alt=""></a>
</div>
<div class="col-sm-4 col-xs-4">Strange book here :)</div>
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg' class="img-circle" alt=""></a>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1992-17-a-thumb.jpg' class="img-circle" alt=""></a>
</div>
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg' class="img-circle" alt=""></a>
</div>
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg' class="img-circle" alt=""></a>
</div>
</div>
</div>
</div>
Update: I made a little enhancement here that is to show grid interface only in extra small devices (xs) and centered the images within their containers by adding the following css:
div.container.hidden-lg.hidden-md.hidden-sm div.row div.col-sm-4.col-xs-4 a img.img-circle
{
display:block;margin:10px auto;
}
and I thought I'd better state the idea behind my answer more vivid: I basically create two instances of your content and using responsive utility classes I made your circle of images visible for:
Large devices (large desktops, 1200px and up) (lg)
Medium devices (desktops, 992px and up) (md)
Small devices (tablets, 768px and up) (sm)
and hide circle placement and made grid placement visible in:
Extra small devices (phones, less than 768px) (xs)
Of course, to emphasize again, my update note explains the altered code presented here.