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.
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 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 a problem with my website: screenshot.
How do I make what I circled be in the middle, parallel with the navbar?
This is my code :
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<img src="" alt="">
<div class="caption">
<h4>label</h4>
<p>adadasdasd</p>
add to chart
</div>
</div>
</div>
</div>
</div>
I would recommend using the .col-md-offset-* class. So in your case when it has a width of 4 units, offset it 4 units with col-md-offset-4 so that it will have 4 units on each side and be centered.
First, maybe you can read this:
http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
With the grid basic, you know col-12 is the whole width.
If you want to make it in the middle try this:
(This might not be the best code here, but should work).
<div class="col-md-4"></div>
<div class="col-md-4">
<YOUR BOX GO HERE>
</div>
<div class="col-md-4"></div>
Let me know if it was helpful.
Thanks
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.
Hey Guys!
I'm currently working on a website using twitter bootstrap 3 but I've got some issues. I'm trying to center the 3 thumbnails I've got. The text is centered, image is centered but I can't seem to get the thumbnails centered. Here is my code:
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="img/test.png">
<div class="caption">
<p>test</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="img/test.png">
<div class="caption">
<p>test</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="img/test.png>
<div class="caption">
<p>test</p>
</div>
</div>
</div>
CSS:
.thumbnail {
background-color: #cecece;
border: 1px solid #666;
text-align:center;
}
to center your content on the page, wrap the row in a containter ()
Notice that Bootstrap uses a 12 column grid. To fill your row with tree thumbs for the medium (md) grid, consider to use the col-md-4 class (3 x 4 = 12) class for your columns. ON the small (sm) grid you now have 3 columns of 50% by using three times the col-sm-6 class. Consider to use only one class, only the col-md-4 class will give you 3 columns for a screen width of 992px or wider and only the col-sm-4 class does the same but for screen widths of 768px and wider. Below the 992 or 768 the columns will stack.
The text can be centered by applying the text-center class, also see http://getbootstrap.com/css/#type-alignment
Also see: http://www.bootply.com/WAFUzlJs8s