good day, I have a goal of aligning all images and test in my 12 grid bootstrap column. i divided it in 6, 4, and 2 but the icons in the 2 column does not match the length with the other columns. i have images of the current one and the layout that i intended to create.
<div class="container-full col-md-12">
<div class="row">
<div class="col-md-6">
<img src="img/pic1.jpg" class="display_img">
</div>
<div class="col-md-4">
<h1 class="text-center">A Wealth of Deals for Wellness</h1>
</div>
<div class="col-md-2">
<img src="img/link_beauty.png">
<img src="img/link_health.png">
<img src="img/link_wellness.png">
<img src="img/link_partners.png">
</div>
</div>
</div>
You can add class="img-responsive" class to <img> tag for creating the images responsive. Please see the below updated code:
<div class="container-full col-md-12">
<div class="row">
<div class="col-md-6">
<img src="img/pic1.jpg" class="display_img img-responsive">
</div>
<div class="col-md-4">
<h1 class="text-center">A Wealth of Deals for Wellness</h1>
</div>
<div class="col-md-2">
<img src="img/link_beauty.png" class="img-responsive">
<img src="img/link_health.png" class="img-responsive">
<img src="img/link_wellness.png" class="img-responsive">
<img src="img/link_partners.png" class="img-responsive">
</div>
</div>
</div>
Related
I'm using bootstrap and I have a row with 1 column and another row with 2 columns.
All items have one picture in it, and should take up all the avaible space inside the column.
So far I can't get the first image on the first row to fill the div width,this image resizes correctly when I reduce the window, but when I enlarge it, the picture will
resize to its original maximum size when I want it to be always same as the div width
Here is the snippet : https://jsfiddle.net/gd0obgg9/
Here is the code :
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Portfolio Item
</h1>
</div>
</div>
<div class="row">
<div></div>
<div class="col-md-12">
<img class="img-responsive" src="http://placehold.it/550x200" alt="">
</div>
<div></div>
</div>
<div class="row">
<hr>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
</div>
</div>
</body>
I want my 550x200 to fill enterely the width
Any advice ? thanks
If I understood you correctly, to give the image full width use:
.img-responsive {
width: 100%;
}
Note that this will, in some cases, distort the image to cover the full div
In my test:
Update your css to set the width of img elements inside your columns to 100%.
you should add width:100% to your img
here the new code
<body>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Heading -->
<div class="row">
<div class="col-lg-12 col-xs-12 col-md-12">
<h1 class="page-header">Portfolio Item
<small>Item Subheading</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Portfolio Item Row -->
<div class="row">
<div>
</div>
<div class="col-md-12">
<img class="img-responsive" style="width:100%" src="http://placehold.it/550x200" alt="">
</div>
<div>
</div>
</div>
<!-- /.row -->
<!-- Related Projects Row -->
<div class="row">
<hr>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
</div>
</div>
</body>
I am having a hard time getting 5 img-responsives classes in a row with bootstrap. I am new to bootstrap so I may be way off here but this is what I have right now.
HTML:
<div class="container" id="pics" >
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<img class="img-responsive" src="img/usscreenshot.png">
<h3> Make a real time post with your friends!</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<img class="img-responsive" src="img/mainscreenshot-01.png">
<h3> Discover new groups of people nearby!</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<img class="img-responsive" src="img/conversationsscreenshot-01.png">
<h3>Chat with interesting groups!</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<img class="img-responsive" src="img/eventscreenshot-01.png">
<h3>Find cool places to go!</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<img class="img-responsive" src="img/eventscreenshot-01.png">
<h3>Find cool places to go!</h3>
</div>
</div>
</div>
</div>
</section>
I can get 4 img's in a nice row with proper spacing and it seems I have plenty of margin on either side for one more. I would like all 5 img's to be on one row and to all be responsive?
As far as mobile goes, I would only need 1 column scroll of all 5 images, I can get that to work just fine with what I have.
Thanks for any help.
You are using col-md-3 which will separate row in 4 equal column and the last column will move to next line instead set offset of 1 column and make each column of 2 point like col-md-2
<div class="container" id="pics" >
<div class="row">
<div class="col-md-2 col-md-offset-1 text-center">
<div class="service-box">
<img class="img-responsive" src="img/usscreenshot.png">
<h3> Make a real time post with your friends!</h3>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-box">
<img class="img-responsive" src="img/mainscreenshot-01.png">
<h3> Discover new groups of people nearby!</h3>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-box">
<img class="img-responsive" src="img/conversationsscreenshot-01.png">
<h3>Chat with interesting groups!</h3>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-box">
<img class="img-responsive" src="img/eventscreenshot-01.png">
<h3>Find cool places to go!</h3>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-box">
<img class="img-responsive" src="img/eventscreenshot-01.png">
<h3>Find cool places to go!</h3>
</div>
</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
In my nested column (col-md-6) I included two rows. Unfortunately the (smaller) pictures in the second row do not horizontally align to the left with the first column and the rest of the whole page content. Is there any different margin in col-md-4 than in col-md-12 or is is there any other reason?
Thank you!
<div class="col-md-6 col-md-height">
<div class="row">
<div class="col-md-12">
<a href="images/e1/expose1.jpg" data-lightbox="roadtrip">
<img src="images/e1/expose1.jpg" class="center-block img-responsive" width="100%">
</a>
blabla
</div>
</div>
<div clas="row">
<div class="col-md-4">
<a href="images/e1/s1.jpg" data-lightbox="roadtrip">
<img src="images/e1/s1.jpg" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<img src="images/e1/s2.jpg" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="images/e1/s3.jpg" class="img-thumbnail" >
</div>
</div>
</div>
It maybe because of the img-thumbnail class you are using on the last two images.
Try converting them to img-responsive
I can not solve the problem, please help. I do adaptive site with the bootstrap grid and can not locate four images in one line. images should be near without any interval and spacing.
I have my code:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img src="img/four.png" />
</div>
</div>
</div>
</div>
</div>
Images are 295x150 and with intervals in browser
Add the class img-responsive to each <img> tag like so:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img class="img-responsive" src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img class="img-responsive" src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img class="img-responsive" src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img class="img-responsive" src="img/four.png" />
</div>
</div>
</div>
</div>
</div>
I have made a fiddle with no margin/ padding like this:
http://jsfiddle.net/Le6oosvo/2/
I used this HTML:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="one">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="two">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="three">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="four">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
</div>
</div>
</div>
And this little bit of CSS:
.main_boxes .col-sm-3 {
padding-left: 0px;
padding-right: 0px;
}
I used .col-sm-3 in stead of .com-md-3 to make the images align on the side of each other longer (when you squeeze it down). I also added bootstrap class to make the images responsive.
Suppose your images are 200px wide and 200px high. You could try something like
<div class="container">
<div class="row">
</div>
<div class="col-md-3">
<image src="image1.jpg"></img>
</div>
<div class="col-md-3">
<image src="image2.jpg"></img>
</div>
<div class="col-md-3">
<image src="image3.jpg"></img>
</div>
<div class="col-md-3">
<image src="image4.jpg"></img>
</div>
</div>
The bootstrap grid is 12 columns wide. Which means the columns have to add up to 12. You can do this by making four divs of three columns each. It would look something like this when done
Image 1 Image 2 Image 3 Image 4
Hope this helps.