i have problem in Bootstrap Thumbnails.
my thumbnails is like that:
img01. but want to be horizontal.
What am i doing ?
My Code:
HTML:
<div class="hrs" align="center">
<div class="row">
<div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
<div class="thumbnail">
<img src="img/AxMahsool.jpg" alt="AxMahsool01" class="img-responsive" />
<img src="img/AxMahsool.jpg" alt="AxMahsool02" class=" img-responsive" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
<div class="thumbnail">
<img src="img/AxMahsool.jpg" alt="AxMahsool03" class=" img-responsive" />
<img src="img/AxMahsool.jpg" alt="AxMahsool04" class=" img-responsive" />
</div>
</div>
</div>
</div>
Css:
.hrs{
display: table;
margin: 0 auto;
padding: 20px;
color: white;
It's because you have them in separate <div class="row"> containers. What you should do is put all of your images in the same row container(so take out the second <div class="row">) -and/or- try adding this code to your CSS:
.thumbnail>img { display: inline-block; }
Related
My images are stretching into the padding/margin that bootstrap uses to divide the columns. I want to keep the columns divided but not have the images stretch. I have been able to shrink the image using padding but then the whitespace between the columns is clickable which is not what I want.
<div id="cont_divider" class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_1">
<div class="row">
<p class="stair_image_font_style">Straight<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/straight.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_2">
<div class="row">
<p class="stair_image_font_style">Single Winder<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/single_winder.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_3">
<div class="row">
<p class="stair_image_font_style">Double Winder<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/double_winder.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_4">
<div class="row">
<p class="stair_image_font_style">Triple Winder<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/triple_winder.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
CSS:
#inner_cont_1{
background-color: #336699;
}
#inner_cont_2{
background-color: #cc6633;
}
#inner_cont_3{
background-color: #ff6633;
}
#inner_cont_4{
background-color: #ffcc66;
}
.staircase_imgs{
box-sizing: border-box;
width: 100%;
display: block;
padding: 0 1.238em 0.3em 1.238em;
}
.stair_image_font_style{
font-size: 2em;
color: #ffffff;
line-height: 1em;
padding: 0.8em 0.938em;
margin: 0;
}
.col_divide{
margin-top: 1em;
margin-bottom: 1em;
}
That's because you're using .row without a .col- class. .row has negative left and right margins which will extend the content area out beyond the parent. The padding of a .col- class nullifies this affect. Remove .row.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
#inner_cont_1 {
background-color: #336699;
}
#inner_cont_2 {
background-color: #cc6633;
}
#inner_cont_3 {
background-color: #ff6633;
}
#inner_cont_4 {
background-color: #ffcc66;
}
.stair_image_font_style {
font-size: 2em;
color: #ffffff;
line-height: 1em;
padding: 0.8em 0.938em;
margin: 0;
}
.col_divide {
margin-top: 1em;
margin-bottom: 1em;
}
<div id="cont_divider" class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<div class="col-md-12">
<a href="#" class="image_link_styling">
<div id="inner_cont_1">
<p class="stair_image_font_style">Straight<br/>Staircase</p>
<img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
</div>
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<div class="col-md-12">
<a href="#" class="image_link_styling">
<div id="inner_cont_2">
<p class="stair_image_font_style">Single Winder<br/>Staircase</p>
<img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
</div>
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<div class="col-md-12">
<a href="#" class="image_link_styling">
<div id="inner_cont_3">
<p class="stair_image_font_style">Double Winder<br/>Staircase</p>
<img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
</div>
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<div class="col-md-12">
<a href="#" class="image_link_styling">
<div id="inner_cont_4">
<p class="stair_image_font_style">Triple Winder<br/>Staircase</p>
<img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
</div>
</a>
</div>
</div>
</div>
</div>
</div>
P.S. I also removed your .staircase_imgs class as it's not required once you remove the .row elements. I also rearranged some of your markup like a to inside the Bootstrap column element. This way the white space around the column element isn't clickable.
Remove the extra <div class="row"> you have. This creates margin: 0 -15px; for .col to rest in, but you do not have a -col in this .row ... so simply remove it.
Like this:
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_3">
<div class="row"> <!-- REMOVE THIS DIV -->
<p class="stair_image_font_style">Double Winder<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/double_winder.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
First of all, you should place your a tag inside bootstrap column, in order to be inside that padding column. Second, you added unnecessary .row classes.
Your structure should be something like this:
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<div class="col-md-12">
<div id="inner_cont_1">
<a href="#" class="image_link_styling">
<p class="stair_image_font_style">Straight<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/straight.jpg" alt="straight staircase">
</a>
</div>
</div>
</div>
</div>
I made a fiddle with your code: fiddle
Hope this helps!
your <a> tag starts way outside of the <img> tag. Instead of using the link over the multiple <div>'s try placing the <a> tag just around the <img> See the example below:
<div class="col-md-12">
<a href="..">
<img src="..." class="img-responsive">
</a>
</div>
In my school project. I am trying to create a photo gallery like view but I need that between two photos some space comes the code is here
<div class="container">
<h2 style="text-align: center;">Physics</h2>
<br>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-2" style="background-color: aliceblue;">
<img class="img-responsive" class="thumbnail" class="img-center center-block" src="assets/GirishJain2.JPG" alt="Girish Jain">
<p style="text-align:justify;">
<b> Girish Jain</b> <br>
b.Tech,IIT-Delhi<br></br>
Exp 14 years
</p>
</div>
<div class="col-sm-6"></div>
<div class="col-md-2" style="background-color: lavender;">
<img class="img-responsive" src="assets/prateek.JPG" alt="Prateek Jain">
<p style="text-align:justify;">
<b> Prateek Jain</b> <br>
b.Tech-MNIT,Jaipu<br></br>
Exp 7 years
</p>
</div>
<div class="col-md-2" style="background-color: aliceblue;">
<img class="img-responsive" class="thumbnail" class="img-center center-block" src="assets/sidharthjain.JPG" alt="Siddharth Jain">
<p style="text-align:justify;">
<b> Sidharth Jain</b> <br>
b.Tech-MNIT,Jaipur<br></br>
Exp 14 years
</p>
</div>
</div>
</div>
and the pages like
below the physics section I want a some space between each photo
Allow the col-md-4 to continue to serve it's current purpose. You want the image to be inside of a div who's job will be to give space.
HTML
<div class="col-md-4 col-xs-4 col-sm-4">
<div class="image-padding">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame"/>
</div>
</div>
CSS
.image-padding {
padding: 5px;
}
.image-padding img {
width: 100%;
}
CodePen
http://codepen.io/Goosecode/pen/oxaEjR
use the below it will work fine with you wrap it inside your container div
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame&w=970"/>
</div>
<div class="col-md-6 col-xs-6 col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame&w=970"/>
</div>
</div>
<hr>
<!--for other images !-->
<div class="row">
<div class="col-md-4 col-xs-4 col-sm-4">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame"/>
</div>
<div class="col-md-4 col-xs-4 col-sm-4">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame"/>
</div>
<div class="col-md-4 col-xs-4 col-sm-4">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame"/>
</div>
</div>
This can be easily achieved using Bootstrap.
HTML
<div class="col-md-4" id="element">
Your Content.
</div>
CSS
#element {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
Stupid question: I have three images in a row, but they are aligned to the left in their column. How can I align them to the center of the column?
This is my code:
<div class="container partners">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="ogon.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="congaz.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
</div>
And CSS:
.partners {
display:block;
margin: 0 auto;
vertical-align:middle;
}
Add the text-center class to your column divs
<div class="col-md-4 col-sm-4 col-xs-4 text-center">
First of all you can not write 2 class tag on same element
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
instead of this you can write class="img-circle img-responsive"
for center aligning u can use "text-center" class to parent div..
or you can also apply style="float:none; margin:0 auto;" to img.
thanks, hope this will help you.
The idea is to make image block element and margin of auto. but as the margin:auto won't work except you assign some width of the elemet.
.partners img{
display: block;
margin: auto;
text-align: center;
width: 150px;
}
.partners {
display:block;
margin: 0 auto;
vertical-align:middle;
}
.partners img{
display: block;
margin: auto;
text-align: center;
width: 150px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container partners">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="ogon.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="congaz.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
</div>
<div class="text-center">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
it would work defiantly.
I need the images be in the same height and at the same time responsive, but I don't understand how to do this.
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="container">
<div class="row" style="text-align: center">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img style="width : 100%" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc3/t1/1743484_1417876895127107_960615052_n.jpg" alt="" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img style="width : 100%" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/t1/1016354_762185537132820_936517474_n.jpg" alt="" />
</div>
</div>
</div>
</div>
http://jsfiddle.net/G26mN/
try this one:
img {
width: inherit; /* Make images fill their parent's space. Solves IE8. */
max-width: 100%; /* Add !important if needed. */
height: auto; /* Add !important if needed. */
}
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="container">
<div class="row" style="text-align: center">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img class="img-responsive" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc3/t1/1743484_1417876895127107_960615052_n.jpg" alt="" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img class="img-responsive" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/t1/1016354_762185537132820_936517474_n.jpg" alt="" />
</div>
</div>
</div>
</div>
I want to center my images inside the Bootstrap grid like this - http://i.imgur.com/weTvp5Q.jpg; the image should be centered in the blue box (both on desktop and mobile).
here's my html:
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="image img-responsive">
<img class="img-responsive " src="http://i.imgur.com/GFZbJZr.jpg" border="0">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="image img-responsive">
<img class="img-responsive " src="http://i.imgur.com/pJF2nvM.jpg" border="0">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="image img-responsive">
<img class="img-responsive " src="http://i.imgur.com/JYYrpgD.jpg" border="0">
</div>
</div>
</div>
Just use the Bootstrap 3 center-block class in your images...
Demo: http://bootply.com/104077
I also simplfied your markup to remove unnecessary nesting..
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<img class="img-responsive center-block" src="http://i.imgur.com/GFZbJZr.jpg" border="0">
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<img class="img-responsive center-block" src="http://i.imgur.com/pJF2nvM.jpg" border="0">
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<img class="img-responsive center-block" src="http://i.imgur.com/JYYrpgD.jpg" border="0">
</div>
</div>
should be just a matter of css
.image a {
display: block;
}
.image a img {
margin 0 auto;
display: block;
}
Try this.
img {
margin:0 auto;
width:50%
}
This will do the trick ;)
.image.img-responsive {
text-align: center;
}
Try to add in your css:
div.image {
text-align: center;
}