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;
}
Related
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; }
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>
--FIRST IMAGE IS DESIRE OUTPUT---
I got it to work on my screen but when I put it on bigger monitor doesn't seem to scale right. Any Recommendations ?
<div style="margin-left: 100px;margin-right: 100px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<img src="img/NUESTROS EVENTOS -1.png">
</div>
<div class="col-sm-3">
<img s src="img/NUESTROS EVENTOS -2.png">
</div>
<div class="col-sm-3">
<img src="img/NUESTROS EVENTOS -3.png">
</div>
<div class="col-sm-3">
<img src="img/NUESTROS EVENTOS -5.png">
</div>
</div>
</div>
This is what I get with this other code, centers but can't get rid the spaces.
---THIS IS WHAT I GET---
<div class="row" style="margin-bottom: 70px;">
<!-- column -->
<div class="col-xs-6 col-sm-5cols wow bounceInLeft ">
<div class="thumbnail ">
<img src="img/NUESTROS EVENTOS -1.png">
</div>
</div>
<!-- column -->
<div class="col-xs-6 col-sm-5cols wow bounceInLeft ">
<div class="thumbnail">
<img src="img/NUESTROS EVENTOS -2.png">
</div>
</div>
<!-- column -->
<div class="col-xs-6 col-sm-5cols wow swing ">
<div class="thumbnail">
<img src="img/NUESTROS EVENTOS -3.png">
</div>
</div>
<!-- column -->
<!-- column -->
<div class="col-xs-6 col-sm-5cols wow bounceInRight ">
<div class="thumbnail">
<img src="img/NUESTROS EVENTOS -5.png">
</div>
</div>
</div>
You can use inline-block elements, I have created inline-block class to wrap img and gave text-center class to row to align images in center.
.row-custom .inline-block{
display:inline-block;
}
.row-custom .inline-block img{
max-width:100px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-custom text-center">
<div class="inline-block">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
<div class="inline-block">
<img s src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
<div class="inline-block">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
<div class="inline-block">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
</div>
Don't need to change or add more into CSS, You can use the Bootstrap class:
<div class="row">
<div class="col-sm-3">
<img class="img-responsive center-block" src="img/NUESTROS EVENTOS -1.png">
</div>
<div class="col-sm-3">
<img class="img-responsive center-block" src="img/NUESTROS EVENTOS -2.png">
</div>
<div class="col-sm-3">
<img class="img-responsive center-block" src="img/NUESTROS EVENTOS -3.png">
</div>
<div class="col-sm-3">
<img class="img-responsive center-block" src="img/NUESTROS EVENTOS -5.png">
</div>
</div>
Do these 3 things to achieve the desire result-
1. Add .img-responsive class to your img tags as its a way to make images responsive in bootstrap framework. You can also check this link for reference .
2. Add width="100%" to images to take up full space available in the image.
3. Add nopadding class to columns so that it will remove the padding space.
Update your code as below:
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-3 nopadding">
<img src="https://dummyimage.com/600x400/000/fff" width="100%" class="img-responsive">
</div>
<div class="col-xs-3 nopadding">
<img s src="https://dummyimage.com/600x400/000/fff" class="img-responsive" width="100%">
</div>
<div class="col-xs-3 nopadding">
<img src="https://dummyimage.com/600x400/000/fff" class="img-responsive" width="100%">
</div>
<div class="col-xs-3 nopadding">
<img src="https://dummyimage.com/600x400/000/fff" class="img-responsive" width="100%">
</div>
</div>
</div>
I am trying to build this footer with bootstrap 3.3. The footer looks like this:
Text Left - Social Icons - Text Right
Here is what I tried:
http://jsfiddle.net/bsumgcpk/1/
<div class="container black">
<div class="col-xs-6 col-sm-4 white"><p> COPYRIGHT © 2014</p></div>
<div class="col-xs-6 col-sm-4 white text-center">
<img src="icon-g-.png" alt="google+">
<img src="icon-twitter.png" alt="twitter">
<img src="icon-fb.png" alt="facebook">
</div>
<div class="col-xs-6 col-sm-4 right"><p> right text</p></div>
</div>
You forgot to put the columns inside row div.Bootstrap has 12 column grid system, so the sum of your columns should be 12.Thats why i used 3 columns of size 4.
Working JSFiddle.
p {
color: white;
}
.black {
background: #000;
}
.right {
text-align:right;
}
<link href="http://www.kissingerassoc.com/~order-portal/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container black">
<div class="row">
<div class="col-xs-4 col-sm-4 white">
<p>COPYRIGHT © BITPHONE.ES 2014</p>
</div>
<div class="col-xs-4 col-sm-4 white text-center">
<img src="https://bitphone.es/wp-content/uploads/2015/07/icon-g-.png" alt="google+" />
<img src="https://bitphone.es/wp-content/uploads/2015/07/icon-twitter.png" alt="twitter" />
<img src="https://bitphone.es/wp-content/uploads/2015/07/icon-fb.png" alt="facebook" />
</div>
<div class="col-xs-4 col-sm-4 right">
<p>right text</p>
</div>
</div>
</div>
I have a problem and I can't find a good solution right now. What I want to achieve is this (on screen size >= medium):
In black boxes there will be images. The white color represents the user screen view. I would like for those two horizontal boxes to fully fit to the screen edges.
<link href="http://cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=1" alt="" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=2" alt="" />
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-4">
<!-- make it span to the right edge of the screen on resolution >= medium -->
<img class="img-responsive" src="http://placehold.it/1920x300&text=3" alt="" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<!-- make it span to the left edge of the screen on resolution >= medium -->
<img class="img-responsive" src="http://placehold.it/1920x300&text=4" alt="" />
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=5" alt="" />
</div>
<div class="hidden-xs col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=6" alt="" />
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=7" alt="" />
</div>
<div class="hidden-xs hidden-sm col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=8" alt="" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=9" alt="" />
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">some more content that is in container class, the total width of those three images above should be equal to this container so it fits nicely</div>
</div>
</div>
I give you the basic grid with elements that I want to see based on user screen size.
Any help with this would be great.
BTW: this need to be in the container because there will be content above and below those images and it needs to be somehow aligned to be consistent.
I think this should work for you
<div class="container">
<div class="row">
<div class="col-sm-2 col-sm-offset-3"></div>
<div class="col-sm-2"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
</div>
<div class="row">
<div class="col-sm-2 col-sm-offset-3"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
</div>
</div>
You can use the col-md-offset-x class to achieve the gabs. For example a row with a gab at the beginning:
<div class="col-md-2 col-md-offset-2">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
Note that you created a grid with 5 'places'. This is not possible in standard bootstrap, as bootstrap's grid is based upon 12 'places' (12 modulo 5 = 2).
AFAIK, the only way to acheive this is with nesting and column offsets. Also, you have to use container-fluid if you want to fill the entire screen width. The use the grid columns to limit the width of the 3rd row. You're basically turning the 12 column grid into a 10 column grid.
http://codeply.com/go/k8LNUgjaa0
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11 col-md-offset-2">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-11 col-md-offset-2">
<div class="row">
<div class="col-md-3 col-md-push-3">
</div>
<div class="col-md-3 col-md-push-3">
</div>
<div class="col-md-6 col-md-pull-9">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-11 col-md-offset-2">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
</div>
</div>
Hi you can use customized column like below
<style>
.col-md-offset-sp { margin-left:20% }
#media (min-width:992px) { .col-md-sp { position:relative;min-height:1px;padding-right:15px;padding-left:15px;float:left; width: 20%; }}
#media (min-width:992px) { .col-md-2sp { position:relative;min-height:1px;padding-right:15px;padding-left:15px;float:left; width: 40%; }}
</style>
<div class="container">
<div class="row">
<div class="col-md-sp col-md-offset-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-2sp"><img src="http://placehold.it/500x150" /></div>
<div class="col-md-2sp"><img src="http://placehold.it/500x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp col-md-offset-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
</div>
</div>
Here col-md-sp and col-md-2sp take care of 5 column layout (width 20% & 40%). While col-md-offset-sp take care of margin for 5 column layout (margin-left 20%).
Note : other rules are just copied from bootstrap.css file