0
How to insert elements in the left column does not affect the height of the rows in the right column; that is, how I make two columns totally independent so that when inserting elements in one column it does not affect at all the other?
If I insert an image in the left column (in this case logo_blank.png), the image of the bike (product1), which is in the right column, moves down. Now, how to make the bike not move it has to stay where it is?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link href="./css/lotti.css" rel="stylesheet" type="text/css">
<title>Tombola Dinamica</title>
<!-- Custom fonts for this template -->
<link href="./b_styles/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7]>
<style type="text/css">
img { behavior: url("pngfix.htc"); }
</style>
<![endif]-->
</head>
<body scroll="no" style="overflow: auto">
<header class="image-background">
<div class="container">
<div class="row mx-md-n5">
<div class="col-md-7">
<img id="logo" src="./img/outras/logo_blank.png" class="rounded float-left logo" alt="...">
<img id="logo" src="./img/outras/logo_blank.png" class="rounded float-left logo" alt="...">
</div>
<div class="col-md-5">
</div>
</div>
<div class="row mt-3">
<div class="col-md-7">
</div>
<div class="col-md-5">
<img id="apostSort" src="./img/outras/product1.jpg" class="rounded float-left" alt="...">
</div>
</div>
<div class="row mt-4">
<div class="col-md-7">
</div>
<div class="col-md-5">
<div id="d4w4" >
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-7">
</div>
<div class="col-md-5 ">
<div id="d4w3"></div>
</div>
</div>
<div class="row mt-1">
<div class="col-md-7">
</div>
<div class="col-md-5">
<div id="d4w2"></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
</html>
Do you have any code? Without enough information you can’t try to help.
– edson alves
Face of more details... Do not affect the height of the column of the side in which direction? Put what version of Bootstrap is in trouble, if possible put a layout image and what you already have of code...
– hugocsl
I then published the code. If you insert an image in the left column the image of the bike that is in the right column moves down. Now, how to make the bike not move?
– user110243
@user1856464 If you have another question (even if related to this one of the publication) ask a new question with your updated code and the new problem.
– Jéf Bueno
With the explanation of hugocsl I already understood the problem better. Thank you.
– user110243