I hope someone can shed some light on this issue I'm having with Bootstrap.
I've noticed that my "container-fluid" divs that contain responsive images are slightly smaller than the "container-fluid" divs I have that just contain text.
I'm not sure why this, and it means the site I'm building has inconsistent sizing on the pages with responsive images. For example:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-4"> <p> Test Paragrapgh </p> </div>
<div class="col-sm-6 col-md-4"> <p> Test Paragrapgh </p> </div>
<div class="col-sm-6 col-md-4"> <p> Test Paragrapgh </p> </div>
</div>
</div>
When I inspect the container-fluid element in chrome its size is 1600x50 px, yet when I replace the paragraphs with images:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-4"> <img class="img-responsive" src="myimage.jpg" alt=""> </div>
<div class="col-sm-6 col-md-4"> <img class="img-responsive" src="myimage.jpg" alt=""> </div>
<div class="col-sm-6 col-md-4"> <img class="img-responsive" src="myimage.jpg" alt=""> </div>
</div>
</div>
The container-fluid element in chrome its size is now 1583x333 px, and every container-fluid on the page has shrunk to this smaller width. This means the navbar is a different size on this page compared to the others on my site - not good!
The css for img-responsive is fairly innocuous:
.img-responsive{
display: center-block;
max-width: 100%;
height: auto;}
So I'm stumped. I've looked at changing the margins on the img and img-responsive classes in the css but had no joy. Any suggestions will be greatly appreciated!
Thanks for the input. It turns out the problem was due to the images taking up more vertical space than the viewport could show, necessitating the addition of a scrollbar, which in chrome alters the width of the screen. This question has been asked already and answered elsewhere on stackoverflow.
Related
I'm trying to use Bootstrap, and having an issue that in medium resolution two columns that should be side-by-side, are displaying underneath each other, see screenshot http://dynanetics.com/problem-screenshot.png, the code is at http://dynanetics.com
At higher resolutions (large and xlarge) this works correctly. Why is this happening at medium resolution?
Any help would be appreciated, thanks.
The relevant code is below:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-3 d-block float-left">
<img src="logo-sitesmall.png" class="d-block float-none">
</div>
<div class="col-md-6 d-block float-left text-center">
<h1 class="brandname">Test site name</h1>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
I think your div="col-md-4", after first row div is too small for both the content to be on same line in medium resolution, try to increase it.
I wanted three images in each row...
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/2103864/pexels-photo-2103864.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1476321/pexels-photo-1476321.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>
I expected it to be inside the border and all the images should have been of same size (three in each row) ...But its not.. help...
You have <div class="thumbnail">, but the built-in bootstrap 3 thumbnail classname is <div class="img-thumbnail">.
You say you want all images to be the same size, but your images have different proportions. Their pixel sizes are: 500x333, 500x750, and 500x375. What behavior do you want exactly? You could force them to all be the same height and width by setting adding styles for height=500px; width=500px;, but then the images will be distorted and squashed.
What you'll want to do is remove &w=500 from the image URLs so they scale to the dynamic width of the Bootstrap grid, and maybe also change the class on the columns to col-md-4 or col-sm-4 to make sure the images sit next to each other on smaller screens.
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/2103864/pexels-photo-2103864.jpeg?auto=compress&cs=tinysrgb&dpr=1">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1476321/pexels-photo-1476321.jpeg?auto=compress&cs=tinysrgb&dpr=1">
</div>
</div>
</div>
If you want all three images to have the same height as well, you could do something like this:
.thumbnail img {
max-height: 300px;
}
To achieve true dynamic uniformity, you should look at using Bootstrap 4 card groups instead.
I'm struggling with making the image on the right stretch to full width in a moment when you'll make the screen size smaller so it transitions to mobile view.
Is there any other class in bootstrap that would do similar work that "img-fluid" does but display image full width when it goes below the text in bootstrap grid system?
<div class="row">
<div class="col-md-6 d-flex">
<div class="align-self-center">
<p class="lead font-weight-bold">sometext</p>
</div>
</div>
<div class="col-sm-6">
<img class="img-fluid" src="someimage.jpg">
</div>
</div>
Here is my fiddle: http://jsfiddle.net/x1hphsvb/2220/
To see what I mean simply lower the width of display window. Image goes below the text and fills only half of the div when I want it to fill it fully and behave as it does right now before the transition.
Both the columns should have the same breakpoint (ie; md/sm) so that they become full-width at the same time...
<div class="row">
<div class="col-md-6 d-flex">
<div class="align-self-center">
<p class="lead font-weight-bold">sometext</p>
</div>
</div>
<div class="col-md-6">
<img class="img-fluid" src="someimage.jpg">
</div>
</div>
http://jsfiddle.net/dwnu5zjq/
I wish to have a group of centered images arranged in a certain way on the homepage of a bootstrap site. To look like the image below:
I want them to remain centered and then shrink when we go to mobile, with the "freeshipping block" not displaying so it just the two horizontal blocks below 750px.
I have set up a Plunker with the code I have
https://plnkr.co/edit/l6rbmEZQbqGZYifBmF5k?p=preview
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12 customer-greeting">
<p class="intro_text">My opening blurb of text</p>
<div class="offerscontainer">
<div class="offeroftheday">
<a href="product_info.php?products_id=221">
<img class="img-responsive" src="http://i.imgur.com/TQ6gwoO.jpg">
</a>
</div>
<div class="freeshipping">
<img class="img-responsive" src="http://i.imgur.com/Xqw75nl.jpg">
</div>
<div class="24hrdelivery">
<a href="index.php?cPath=53">
<img class="img-responsive" src="http://i.imgur.com/F3JTlas.jpg">
</a>
</div>
</div>
</div>
Should I be adding float classes or should they all be bootstrap col-8-sm, col-4-sm etc?
PS - Should #queries be used in Bootstrap sites or should they pretty much all layout be handled in the HTML code with col-8-sm (bootstrap classes) etc
You can do it like this..
HTML
<div class="container">
<div class="row">
<div class="col-sm-8">
<img class="img-responsive width-100" src="http://i.imgur.com/TQ6gwoO.jpg">
<br>
<img class="img-responsive width-100" src="http://i.imgur.com/TQ6gwoO.jpg">
<br>
</div>
<div class="col-sm-4">
<img class="img-responsive width-100" src="http://i.imgur.com/Xqw75nl.jpg">
</div>
</div>
</div>
CSS
.width-100 { width: 100%; }
You can write col-md-* or col-sm-* depending on your requirement!
I have an image that's 1300px wide, using bootstrap I want this image to fill the full width of my container which is set to 1300px. I create a row, give it a full 12 columns and then add in the image with a class of image responsive. With this set up I get the output below.
I want my image to stretch all the way along to where my image is in my content, here is my code.
<div class="row">
<div class="container">
<div class="col-md-12">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/homeBanner.jpg" alt="placeholder 960" class="img-responsive"/>
</div>
</div>
</div>
The image is set to width 100% so not sure why it isn't filling the container.
In bootstrap 4.1, the w-100 class is required along with img-fluid for images smaller than the page to be stretched:
<div class="container">
<div class="row">
<img class='img-fluid w-100' src="#" alt="" />
</div>
</div>
see closed issue: https://github.com/twbs/bootstrap/issues/20830
(As of 2018-04-20, the documentation is wrong: https://getbootstrap.com/docs/4.1/content/images/ says that img-fluid applies max-width: 100%; height: auto;" but img-fluid does not resolve the issue, and neither does manually adding those style attributes with or without bootstrap classes on the img tag.)
Check if this solves the problem:
<div class="container-fluid no-padding">
<div class="row">
<div class="col-md-12">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
</div>
</div>
</div>
CSS
.no-padding {
padding-left: 0;
padding-right: 0;
}
Css class no-padding will override default bootstrap container padding.
Full example here.
#Update
If you use bootstrap 4 it could be done even simpler
<div class="container-fluid px-0">
<div class="row">
<div class="col-md-12">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
</div>
</div>
</div>
Updated example here.
First of all if the size of the image is smaller than the container, then only "img-fluid" class will not solve your problem. you have to set the width of image to 100%, for that you can use Bootstrap class "w-100".
keep in mind that "container-fluid" and "col-12" class sets left and right padding to 15px and "row" class sets left and right margin to "-15px" by default.
make sure to set them to 0.
Note:
"px-0" is a bootstrap class which sets left and right padding to 0 and
"mx-0" is a bootstrap class which sets left and right margin to 0
P.S. i am using Bootstrap 4.0 version.
<div class="container-fluid px-0">
<div class="row mx-0">
<div class="col-12 px-0">
<img src="images/top.jpg" class="img-fluid w-100">
</div>
</div>
</div>
Here's what worked for me. Note: Adding the image within a row introduces some space so I've intentionally used only a div to encapsulate the image.
<div class="container-fluid w-100 h-auto m-0 p-0">
<img src="someimg.jpg" class="img-fluid w-100 h-auto p-0 m-0" alt="Patience">
</div>
container class has 15px left & right padding, so if you want to remove this padding, use following, because row class has -15px left & right margin.
<div class="container">
<div class="row">
<img class='img-responsive' src="#" alt="" />
</div>
</div>
Codepen: http://codepen.io/m-dehghani/pen/jqeKgv
This will do the same as many of the other answers, but will make sides flush with the window, so there is no scroll bars.
<div class="container-fluid">
<div class="row">
<div class="col" style="padding: 0;">
<img src="example.jpg" class="img-responsive" alt="Example">
</div>
</div>
</div>