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;
}
Related
I'm work on bootstrap project and I try to put uploading image to set grid view, but uploading image are not same size 4 images are difference size, I put the image width and height but its not working image are sketching and not display full image any one know how to fix that issue
Thanks
,
/*image*/
.thumbnail{
width: 164px;
height: 164px;
overflow: hidden;
margin: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row display-flex">
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://exp.cdn-hotels.com/hotels/2000000/1900000/1897400/1897350/7180d426_z.jpg" alt="" class="avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="avatar">
</div>
</div>
</div>
Add class img-fluid on image .
Like this
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="img-fluid">
or
update the following css :
.thumbnail img {
width: 100%;
height: auto;
}
Add Following Css to the code object-fit: cover; May Help You
.thumbnail
{
width: 164px;
height: 164px;
overflow: hidden;
margin: auto;
}
.thumbnail img {
width: 164px;
height: 100%;
object-fit: cover;
}
To make images fit in the containing div, add the class img-fluid to them. This wil give them a width: 100%; height: auto;.
This won't give them all the same height, as they have different sizes/aspect ratios.
/*image*/
.thumbnail{
width: 164px;
height: 164px;
overflow: hidden;
margin: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row display-flex">
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="img-fluid avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="img-fluid avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://exp.cdn-hotels.com/hotels/2000000/1900000/1897400/1897350/7180d426_z.jpg" alt="" class="img-fluid avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="img-fluid avatar">
</div>
</div>
</div>
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; }
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 am having trouble to put in horizontal and vertical lines on my website. Not sure what's wrong with this.
I tried using borders but I am not sure if I am doing it right.
I would like to achieve a criss-cross dividers just like the below image:
Here's what my code looks like:
<div class="container-liquid" style="margin:0px; padding: 0px">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="one"><h5>Rich Media Ad Production</h5><img src="images/richmedia.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="two"><h5>Web Design & Development</h5> <img src="images/web.png" ></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="three"><h5>Mobile Apps Development</h5> <img src="images/mobile.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan" id="four"><h5>Creative Design</h5> <img src="images/mobile.png"> </div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="five"><h5>Web Analytics</h5> <img src="images/analytics.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="six"><h5>Search Engine Marketing</h5> <img src="images/searchengine.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="seven"><h5>Mobile Apps Development</h5> <img src="images/socialmedia.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan" id="eight"><h5>Quality Assurance</h5> <img src="images/qa.png"></div>
<hr>
</div>
</div>
Do you have to use Bootstrap for this? Here's a basic HTML/CSS example for obtaining this look that doesn't use any Bootstrap:
HTML:
<div class="bottom">
<div class="box-content right">Rich Media Ad Production</div>
<div class="box-content right">Web Design & Development</div>
<div class="box-content right">Mobile Apps Development</div>
<div class="box-content">Creative Design</div>
</div>
<div>
<div class="box-content right">Web Analytics</div>
<div class="box-content right">Search Engine Marketing</div>
<div class="box-content right">Social Media</div>
<div class="box-content">Quality Assurance</div>
</div>
CSS:
.box-content {
display: inline-block;
width: 200px;
padding: 10px;
}
.bottom {
border-bottom: 1px solid #ccc;
}
.right {
border-right: 1px solid #ccc;
}
Here is the working Fiddle.
UPDATE
If you must use Bootstrap, here is a semi-responsive example that achieves the same effect, although you may need to write a few additional media queries.
HTML:
<div class="row">
<div class="col-xs-3">Rich Media Ad Production</div>
<div class="col-xs-3">Web Design & Development</div>
<div class="col-xs-3">Mobile Apps Development</div>
<div class="col-xs-3">Creative Design</div>
</div>
<div class="row">
<div class="col-xs-3">Web Analytics</div>
<div class="col-xs-3">Search Engine Marketing</div>
<div class="col-xs-3">Social Media</div>
<div class="col-xs-3">Quality Assurance</div>
</div>
CSS:
.row:not(:last-child) {
border-bottom: 1px solid #ccc;
}
.col-xs-3:not(:last-child) {
border-right: 1px solid #ccc;
}
Here is another working Fiddle.
Note:
Note that you may also use the <hr> element to insert a horizontal divider in Bootstrap as well if you'd like.
The <hr> should be placed inside a <div> for proper functioning.
Place it like this to get desired width
`
<div class='row'>
<div class='col-lg-8 col-lg-offset-2'>
<hr>
</div>
</div>
`
Hope this helps a future reader!
Add the right lines this way and and the horizontal borders using HR or border-bottom or .col-right-line:after. Don't forget media queries to get rid of the lines on small devices.
.col-right-line:before {
position: absolute;
content: " ";
top: 0;
right: 0;
height: 100%;
width: 1px;
background-color: #color-neutral;
}
I know this is an "older" post. This question and the provided answers helped me get ideas for my own problem. I think this solution addresses the OP question (intersecting borders with 4 and 2 columns depending on display)
Fiddle:
https://jsfiddle.net/tqmfpwhv/1/
css based on OP information, media query at end is for med & lg view.
.vr-all {
padding:0px;
border-right:1px solid #CC0000;
}
.vr-xs {
padding:0px;
}
.vr-md {
padding:0px;
}
.hrspacing { padding:0px; }
.hrcolor {
border-color: #CC0000;
border-style: solid;
border-bottom: 1px;
margin:0px;
padding:0px;
}
/* for medium and up */
#media(min-width:992px){
.vr-xs {
border-right:1px solid #CC0000;
}
}
html adjustments to OP provided code. Red border and Img links for example.
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="one">
<h5>Rich Media Ad Production</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" />
</div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-xs" id="two">
<h5>Web Design & Development</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<!-- hr for only x-small/small viewports -->
<div class="col-xs-12 col-sm-12 hidden-md hidden-lg hrspacing"><hr class="hrcolor"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="three">
<h5>Mobile Apps Development</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-md" id="four">
<h5>Creative Design</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<!-- hr for for all viewports -->
<div class="col-xs-12 hrspacing"><hr class="hrcolor"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="five">
<h5>Web Analytics</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-xs" id="six">
<h5>Search Engine Marketing</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<!-- hr for only x-small/small viewports -->
<div class="col-xs-12 col-sm-12 hidden-md hidden-lg hrspacing"><hr class="hrcolor"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="seven">
<h5>Mobile Apps Development</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-md" id="eight">
<h5>Quality Assurance</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
</div>
</div>
I made the following little scss mixin to build for all the bootstrap breakpoints...
With it I get .col-xs-divider-left or col-lg-divider-right etc.
Note: this uses v4-alpha bootstrap syntax...
#import 'variables';
$divider-height: 100%;
#mixin make-column-dividers($breakpoints: $grid-breakpoints) {
// Common properties for all breakpoints
%col-divider {
position: absolute;
content: " ";
top: (100% - $divider-height)/2;
height: $divider-height;
width: $hr-border-width;
background-color: $hr-border-color;
}
#each $breakpoint in map-keys($breakpoints) {
.col-#{$breakpoint}-divider-right:before {
#include media-breakpoint-up($breakpoint) {
#extend %col-divider;
right: 0;
}
}
.col-#{$breakpoint}-divider-left:before {
#include media-breakpoint-up($breakpoint) {
#extend %col-divider;
left: 0;
}
}
}
}
CSS
.vr {
border-right: 1px solid #ccc !important;
}
HTML
<div class="row">
<div class="col-md-6 vr">
<p>Column 1</p>
</div>
<div class="col-md-6">
<p>Column 2</p>
</div>
</div
Now, we can use class vr wherever we need to have a vertical-divider kind of appearance.
Hope it helps!
You can achieve this by adding border class of bootstrap
like for border left ,you can use border-left
working code
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right border-bottom" id="one"><h5>Rich Media Ad Production</h5><img src="images/richmedia.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right border-bottom" id="two"><h5>Web Design & Development</h5> <img src="images/web.png" ></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right border-bottom" id="three"><h5>Mobile Apps Development</h5> <img src="images/mobile.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan border-bottom" id="four"><h5>Creative Design</h5> <img src="images/mobile.png"> </div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right" id="five"><h5>Web Analytics</h5> <img src="images/analytics.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right" id="six"><h5>Search Engine Marketing</h5> <img src="images/searchengine.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right" id="seven"><h5>Mobile Apps Development</h5> <img src="images/socialmedia.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan" id="eight"><h5>Quality Assurance</h5> <img src="images/qa.png"></div>
<hr>
</div>
for more refrence al bootstrap classes
all classes ,search for border