Develop Reference

How to separate two images in the same row?

do you know how to separate two images in the same row?
Thank you so much for your help.
I will post the image under this sentence.
Image
<div id="portfolio">
<div class="container-fluid w-75">
<div class="row">
<div class="col-sm-6 col-xs-12 text-center">
<div class="zgrade">
<img class="img-fluid" src="assets/img/szgrade/zgradaA.jpg" alt="..." />
<h2 class="zgrade-txt" style="color:white"> Zgrada A </h2>
</div>
</div>
<div class="col-sm-6 col-xs-12 text-center">
<div class="zgrade">
<img class="img-fluid" src="assets/img/szgrade/zgradaB.jpg" alt="..." />
<h2 class="zgrade-txt" style="color:white"> Zgrada B </h2>
</div>
</div>
</div>
</div>
</div>
Css
.zgrade {
position: relative;
border: 1px solid #333;
overflow: hidden;
width: 745px;
}
.zgradeimg {
width: 500px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.4s ease-in-out;
}
.zgrade:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.zgrade-txt {
position: absolute;
top: 250px;
left: 0;
width: 100%;
Edit: Added CSS code, I tried adding br and span in HTML code.

We could use simple css to add a margin to the element. This would create empty space between the elements.
Add this to your external stylesheet or in your html file(best place is head):
<style>
.img-fluid {
margin-right: 20px; /*feel free to change this to any amount*/
}
</style>
or
style="margin-right:20px"
Margin is space outside of an element, which mostly acts like white space. It is counted in the element size but it is outside the border and background color does not effect it.

I solved the problem, I increased w of the container from 75 to 80, but I needed to add a new class in CSS (that would be w-80).

adding a button to each card to flip

So my basic idea is to add a button to each card which then flips the card and resets the previously flipped card. Now how do I make a button specific to each card which can flip/unflip the card and unflip the previously flipped card (when needed to)
I have this JSFiddle which I found in this question. I looked around the internet but couldn't find any solutions to this specific problem. It might be similar to this. Hope this could help :)
something like this too maybe
$('.flip-container .flipper').click(function() {
// flip back previous hovered element
$('.flip-container.hover').toggleClass('hover');
// flip current element
$(this).closest('.flip-container').toggleClass('hover');
});
/* flip the pane when hovered */
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 250px;
height: 250px;
}
/* flip speed */
.flipper {
transition: 0.8s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background-color: #fff;
}
.artist-1 {
background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>

It seems you just need to add a button and add it to the selector
$('.flip-container .flipper button').click(function() {
// flip back previous hovered element
$('.flip-container.hover').toggleClass('hover');
// flip current element
$(this).closest('.flip-container').toggleClass('hover');
});
/* flip the pane when hovered */
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 250px;
height: 250px;
}
/* flip speed */
.flipper {
transition: 0.8s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background-color: #fff;
}
.artist-1 {
background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
<button>Flip</button>
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
<button>Flip</button>
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>

vertical-text sidebar with position:fixed

div.row {position: fixed;}
#vertical {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
<div class="container">
<div class="row">
<div class="col-md-10">
<p id="testo">
Cor is an Italian artist based in Belgium.<br>
Cor is both analogic and digital<br>
Cor looks towards vernacular, surrealist<br>
and pop culture.<br>
</p>
</div>
<div class="col-md-2" id="vertical">
<a class="contact" href="#">Instagram </a>
<a class="contact" href="#">Email </a>
<a class="contact" href="#">Credits </a>
</div>
</div>
</div>
i'm tryng to insert in a bootstrap container (containing only text with position:fixed) a vertical-text rotated list of contacts ( like email, instagram ecc) that must be at the right edge of the screen (inside the container, so with position:fixed as well) but i'm have troubles with the positioning , could you help?

Like #Imvain2, I moved your vertical text out of the container; in fact, Bootstrap may not be necessary here.
<div class="container">
<div class="row">
<div class="col-md-10">
<p id="testo">
Cor is an Italian artist based in Belgium.<br>
Cor is both analogic and digital<br>
Cor looks towards vernacular, surrealist<br>
and pop culture.<br>
</p>
</div>
</div>
</div>
<div id="vertical">
<div class="wrapper">
<a class="contact" href="#">Instagram</a>
<a class="contact" href="#">Email</a>
<a class="contact" href="#">Credits</a>
</div>
</div>
I also styled your vertical text a little more, so that it's flush to the right of the viewport. Most importantly, the wrapper for the vertical text has to have a width of 100vh, since it's being rotated.
#vertical {
position: fixed;
background-color:#cccccc;
top: 0;
bottom: 0;
right: 0;
left: calc(100% - 48px);
}
.wrapper {
position: absolute;
margin-right: -100%;
transform: rotate(90deg) translate(0, -15px);
transform-origin: left bottom;
width: 100vh;
}
See the pen.

Your row needs to be 100% width. Add this CSS to your page:
.row {
width: 100%;
}
div#vertical {
position: absolute;
top: 85px;
right: -35px;
}

I modified your HTML to have the side nav outside of container and fixed just that div with the vertical text.
.side-nav {
position:fixed;
right:0;
top:100px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
background:#c0c0c0;
}
.row{/*just to see nav is fixed*/
height:1000px;
}
<div class="side-nav">
<a class="contact" href="#">Instagram </a>
<a class="contact" href="#">Email </a>
<a class="contact" href="#">Credits </a>
</div>
<div class="container">
<div class="row">
<p id="testo">
Cor is an Italian artist based in Belgium.<br>
Cor is both analogic and digital<br>
Cor looks towards vernacular, surrealist<br>
and pop culture.</p>
</div>
</div>

issues with injected content sizing

I am creating a "live search" feature, this works fine functionally, however, on responsive testing, it breaks almost as soon as you get to tablet/mobile size.
I am using bootstrap for layout and the injected content from the live search is basically just a template that is injected.
Here is my HTML, SCSS and JS as it stands:
$(function() {
$(".brand-page-search-box").on("input", function(e) {
e.preventDefault();
var containerTemplate,
itemTemplate,
root = 'http://jsonplaceholder.typicode.com';
containerTemplate = `<div class="row search-result-item-container"></div>`;
$.ajax({
url: root + '/posts/1',
method: 'GET'
}).then(function(data) {
$(".search-results").html(containerTemplate);
let returnedJSONToObj = JSON.parse(JSON.stringify(data)),
userID = returnedJSONToObj.userId,
id = returnedJSONToObj.id,
title = returnedJSONToObj.title,
body = returnedJSONToObj.body;
itemTemplate = `<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="flip-container">
<div class="card card-inverse">
<div class="front">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
<div class="back">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="flip-container">
<div class="card card-inverse">
<div class="front">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
<div class="back">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
</div>
</div>
</div>`;
$(".search-result-item-container").append(itemTemplate);
});
return false;
});
});
.flip-container {
-webkit-perspective: 1000;
perspective: 1000;
.card {
position: relative;
-webkit-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
&: hover {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.front,
.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front {
z-index: 2;
.card-block {
background: url("http://lorempixel.com/1920/1080/");
}
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
.card-block {
background: url("http://lorempixel.com/900/500/");
}
}
}
}
<div class="container-fluid brand-search-bar">
<div class="row">
<div class="col-xs-12">
<nav class="navbar">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item">
<form action="#" id="form">
<div class="input-group">
<input type="text" class="form-control brand-page-search-box" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="container brand-img-container search-results"></div>
Now, the cards inject into the post fine, but look at the following screens to see how the sizing goes:
Desktop:
Laptop/Tablet:
Mobile:
As you can see, on mobile, it totally breaks for some reason and the cards "fold" into one another, but if bootstrap is meant to be handling the layout, why is this happening?
The inspector isnt being much help, nor are some of the articles I have been reading on here and elsewhere, unusually, anyone got any ideas on how to fix this?
I am using bootstrap 4 and jquery 2 if that helps.
If you have any questions, comments or requests, please do ask in the comments below.

You need to fix the flip effect css. Nothing to do with twitter bootstrap.
Your .flip-container is not getting height, so in xs when many containers stack you see the probleme.
You could set a fixed height for your .flip-container but since you want dynamic height here is a solution
Add .front{ position:relative} and .back{top: 0}
.flip-container {
-webkit-perspective: 1000;
perspective: 1000;
.card {
position: relative;
-webkit-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
&:hover {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.front,
.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front {
z-index: 2;
position:relative; <---
.card-block {
background: url("http://lorempixel.com/1920/1080/");
}
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
top:0; <---
.card-block {
background: url("http://lorempixel.com/900/500/");
}
}
}
}

HTML5 translate relative to page

How can you apply a translate to an element but make it move to a point on the page rather than relative to itself?
For example, in the code below the "card" elements will move 50, 100 relative to their starting position. What I want instead is for it to move to the center of the page.
<html>
<head>
<style>
.face {
-webkit-backface-visibility: hidden;
position: absolute;
height: 140;
width: 80;
overflow: hidden;
}
.card {
height: 100;
width: 80;
float: left;
-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
margin-left: 5px;
-webkit-transition-property: transform;
-webkit-transition-duration: 0.25s;
-webkit-transition-timing-function: ease-out;
}
.activated {
-webkit-transform: scale(2) translate(50px, 100px);
-webkit-transition-duration: 0.35s;
-webkit-transition-timing-function: ease-in;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {
$('.card').click(function (e) {
e.preventDefault();
$(this).toggleClass("activated");
});
});
</script>
</head>
<body>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
</body>
</html>

I don't think you should be using translate() for that. I suppose you could simply calculate the correct values or manipulate the transform-origin using JavaScript, but that kind of defeats the purpose of using CSS transforms.
You can animate properties as well, so you could remove the translate() from .activate and change the transition property for .card to:
-webkit-transition-property: all;
You can then use "regular" CSS to do the positioning and the transition will do the rest. E.g. add these properties to .activated:
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -40px;
There is rather a bit of a problem with that, though. While CSS can smoothly transition the top, left and margin properties nicely, it can't smoothly transition the position property, so when a card gets activated it'll jump to the top left first and then move smoothly to the center of the page.
I'm not sure if there's a solution to that other than positioning the original cards absolutely as well.
Also, using the translate(), the position of the other cards isn't affected when you activate one of them. In my example, though, the activated card is taken out of the flow, so the other cards will move left to fill up the gap (as floating elements do). That might not be what you want either. That wouldn't happen if you absolutely position all of them to start with, though.
Of course, there are plenty of questions in the specs themselves about issues like this considering they're still experimental:
CSS 2D Transforms
CSS Transitions