I have thumbnail with 4 images. All images have the same height. But in thumbnail they are not the same. I want to make them look the same.
Here what i got:
4 images:
1. 614x830
2. 599x830
3. 599x830
4. 599x830
In layout i get 4 images where 3 has the same height (image 2, 3 and 4) and image 1 has height smaller.
How to fix that problem? And why does it happen? Why it make height smaller if original height of images are the same?
Thanks!
<div class="row">
<div class="col-sm-3">
<div class="thumbnail">
<img src="img/1.jpg" class="img-responsive">
<div class="caption">
<h4 class="text-center"> Text caption</h4>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img src="img/2.jpg" class="img-responsive">
<div class="caption">
<h4 class="text-center"> Text caption</h4>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img src="img/3.jpg" class="img-responsive">
<div class="caption">
<h4 class="text-center"> Text caption</h4>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img src="img/4.jpg" class="img-responsive">
<div class="caption">
<h4 class="text-center"> Fall 2016</h4>
</div>
</div>
</div>
enter image description here
Related
I have a page that displays a lot of divs, in 2 by x grid.. this is the code:
<div class="row d-flex justify-content-around" >
#foreach(auth()->user()->galleries as $gallery)
<div class="col-5
mb-5
p-3
rounded-lg
shadow
d-flex
justify-content-between
align-items-baseline
"
style="background-color: lightgrey;
background-size: 100%;
background-position: center;">
<div class="w-75">
<div class="">
<h2>{{$gallery->galname}}</h2>
</div>
<div class="">
SOME CONTENT...
</div>
</div>
<div class="my-auto">
<div class="d-flex justify-content-around p-1">
<button class="btn btn-primary" type="button" onclick="window.location='/gallery/{{ $gallery->id }}'">View / Edit</button>
</div>
</div>
</div>
#endforeach
</div>
So far it works great, but if i reduce the size of the browser or watch it on a cellphone, then they squish toghether.. I would like it to be responsive and jump to the next row if there is not enoguh space available.. so the 2 by x becomes a 1 by 2x table... how can this be done?
You may add classes for the responsive design after col-5, i.e. col-sm-10 which will change the size of the div in small screens.
.... class="col-5 col-sm-10 mb-5 ...
more info here
I have made the following grid in Bootstrap 4:
<div class="container-fluid">
<div class="row padding">
<div id="workshop1" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_05.jpg" class="img-fluid nopadding" alt="">
</div>
<div class="col-lg-6">
<div class="row">
<div id="workshop2" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_06.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop3" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_08.jpg" class="img-fluid nopadding" alt="">
</div>
</div>
<div class="row">
<div id="workshop4" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_09.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop5" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_07.jpg" class="img-fluid nopadding" alt="">
</div>
</div>
</div>
</div> <!-- end of first row -->
<div class="row padding">
<div id="workshop6" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_01.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop7" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_04.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop8" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_02.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop9" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_03.jpg" class="img-fluid nopadding" alt="">
</div>
</div> <!-- end of second row -->
</div>
The css file looks like this:
.nopadding {
padding-left: 0;
padding-right: 0;
}
Now I have the problem, that there is a small white line between the right part of row 2 and row 3 in Safari and Chrome on my Mac. In Firefox everything looks fine:
Firefox
Chrome & Safari
Does anybody have an idea how fix this? All browsers are up to date.
Thanks in advance.
Regards
Lars
Try adding display: block; to your images or float: left;
Sometimes trying font-size: 0; or line-height: 0; works.
I am trying to load some images in the browser using bootstrap in Express(Handlebars), and although rest of the media contents appear fine , the images are not getting loaded in the Browser(Chrome).
The code in the .hbs file is as follows:
1 <div class="panel panel-default">
2 <div class="panel-heading">
3 <h2 class="panel-title">{{index.title}}</h2>
4 <div>
5 <ul class="media-list">
6 {{#each movies}} <li class="media">
7 <a class="pull-left" href="#"
8 <img class="media-object img-responsive" src= {{ poster_path }} alt=" ">
9 </a>
10 <div class="media-body">{{ title }}<br/><strong class="media-heading">{{ popularity }}</strong>
11 </div>
12 </li>
13 {{/each}} </ul>
14 </div>
15 </div>
16
17 </div>
Here is a screen shot of the page:
https://drive.google.com/file/d/0B0oBZ2pgT9DUQldkaHFfNllFblU/view?usp=sharing
Any comments/suggestions would be much appreciated.
ADDED FIDDLE :
https://jsfiddle.net/chattes/9azgfxex/
Thanks
I was able to figure it out... it was a mistake with the div tags.
Latest fiddle:
https://jsfiddle.net/chattes/9azgfxex/
<title>{{title}}</title>
<body>
<div class="page-header">
<div class="container">
<div class="col-md-1">
<h1>discoverMovie</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<ul class="media-list">
<div class="col-sm-12 col-md-6">
<li class="media">
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" alt="Interstellar" width="200" height="100" class="img-thumbnail">
<div class="media-body">"Interstellar"
<br/><strong class="media-heading">14.524256</strong>
</div>
</li>
</div>
<div class="col-sm-12 col-md-6">
<li class="media">
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg"
I am trying to image and its relevant data in bootstrap. For that I am writing code like below
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail" src="img/uthappizza.png" alt="Uthappiza">
</a>
<div class="media-body">
<h2 class="media-heading">Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
<p><a class="btn btn-primary btn-xs" href="#">More ยป</a></p>
</div>
</div>
</div>
</div>
I am getting output like this:
enter image description here
I want it to be side by side I don't know where I am going wrong.
Add pull-left to your image as a class. Bootply.
So I have two image being used in two locations.
Location 1:
<div class="row">
<div class="col-md-1 col-md-offset-9">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
Location 2
<div class="row">
<div class="col-md-7">
<form autocomplete="off">
<div class="form-group">
<input placeholder="What are you looking for?" type="text" class="form-control" id="search" data-provide="typeahead" data-source='{{keywordsList}}'/>
</div>
</form>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-block{{#if entry}} btn-lg{{/if}}" style="margin-bottom:15pt">or just show me EVERYTHING!</button>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;margin-bottom:4px;">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
The images themselves are big and 512x512 and bootstrap decided to scale it down in location 1 to 79x79. Strangely, with the addition of an input field and a button in location 2, the images get scaled down to 59x59.
This whole scaling thing seems arbitrary to me and I'd really appreciate it if someone could explain the logic behind it to me.
The image width is dependent upon the column size. The reason for the discrepancy in image size between the two locations is because Location 2 was inside a <div class="col-md-10">.
What this did is it made the image smaller since the second location's width is 1/12 of 10/12 versus just 1/12 in location 1.
The image width depend on boostrap column size, if your image is responsive it will occupy all the column width