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.
Related
My code:
.items {
display: grid;
grid-template-columns: repeat(3, 1fr);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
}
How can I properly display my images as a 3 column grid?
<section id="work-a" class="text-center py-3">
<div class="container">
<h2 class="section-title">My Work</h2>
<div class="bottom-line"></div>
<p class="lead">
Check out some of my projects
</p>
<div class="items">
<div class="item">
<div class="item-image">
<img src="img/items/item1.png" alt="">
</div>
<div class="item-text">
<div class="item-text-wrap">
<p class="item-text-category">Design</p>
<h2 class="item-text-title">Great Gradients</h2>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="img/items/item2.png" alt="">
</div>
<div class="item-text">
<div class="item-text-wrap">
<p class="item-text-category">Design</p>
<h2 class="item-text-title">Great Gradients</h2>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="img/items/item3.png" alt="">
</div>
<div class="item-text">
<div class="item-text-wrap">
<p class="item-text-category">Design</p>
<h2 class="item-text-title">Great Gradients</h2>
</div>
</div>
</div>
</div>
</div>
</section>
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
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 built this mock-up:
I was wondering if this type of gallery is possible to build with bootstrap, I did not start to code yet because I think that it will not work because of the rows.
I would like some second opinions, from people who have worked with bootstrap for longer than me.
I found something that actualy works!! and it's responsive! :D
.poligono, .poligono div {
margin: 0 auto;
transform-origin: 50% 50%;
overflow: hidden;
width: 250px;
height: 250px;
}
.poligono {
transform: rotate(45deg) translateY(10px);
}
.poligono .los1 {
width: 355px;
height: 355px;
transform: rotate(-45deg) translateY(-74px);
}
.poligono .los1 img {
width: 100%;
height: auto;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.poligono:hover img {
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
<div id="projects" class="projects">
<div class="container">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<h2>Projects</h2>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
<p class="descricao">Cenas maradas acontecem</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-4">
<div class="poligono img-responsive">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono img-responsive">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
</div>
</div>
If you are asking if there is a default bootstrap for this the answer is no.
But yes this is possible with your own css.
I don't see why not you could not skew the image with something like the following:
img.tilted{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
If you want this "mask like behaviour" i don't see why you couldn't put all the images on a layer bellow and put a transparent image on the top
Or you can try to css clip it like this http://www.html5rocks.com/en/tutorials/masking/adobe/
I'm currently working with bootstrap grid system and got the following problem:
the solution should be work like that: http://ciiznv.axshare.com/#c=2
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12 bg-two col-sm-height col-middle nopadding">
<div class="col-md-6 col-sm-12 col-xs-12 col-sm-height col-middle">
<div class="item">
<div class="content">
<h2>Text one</h2>
<p>lorem ipsum dorem</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 col-sm-height col-middle nopadding ">
<div class="item nopadding">
<div class="content">
<img class="lazyload" sizes="(min-width: 40em) 80vw, 100vw"
srcset="http://lorempixel.com/356/150/ 375w, http://lorempixel.com/480/150/ 480w, http://lorempixel.com/768/250/ 768w, http://lorempixel.com/480/480/ 800w" alt="a picture" />
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 bg-three col-sm-height col-middle nopadding">
<div class="col-md-6 col-sm-12 col-xs-12 col-sm-height col-middle">
<div class="item">
<div class="content">
<h2>Text two</h2>
<p>lorem ipsum dorem dolor</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 col-sm-height col-middle nopadding">
<div class="item nopadding">
<div class="content">
<img class="lazyload" sizes="(min-width: 40em) 80vw, 100vw"
data-srcset="http://lorempixel.com/356/150/ 375w, http://lorempixel.com/480/150/ 480w, http://lorempixel.com/768/250/ 768w, http://lorempixel.com/480/480/ 800w" alt="a picture" />
</div>
</div>
</div>
</div>
</div>
But in view of 768px, the image will not be displayed
I think that you are missing the .img-responsive class on your images.
See this fiddle