0
I’m creating a page with a Grid Bootstrap and I put four blue balls in one of the columns... The problem is that I cannot place the blue balls in the center of the column (they are always positioned on the left side either in the starting position and also when the page is reduced). How do I make the 4 blue balls always stay in the center of the column and responsive?
https://www.clubesorte.org/e_tombolas/a_originais/lotarias-e-rifas_1x/t1_as_ca4.html
WRONG POSITION
CORRECT POSITION
`
<!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="http://clubesorte.org/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>
<div class="container-fluid">
<div class="row">
<!-- Coluna 1 - Logotipo -->
<div class="col-md-3 text-center" style="background-color:lavenderblush;">
<img style="width:200px;" class="logo" src="https://www.clubesorte.org/rifas-e-brindes/x_rifas-clubesorte/z_jogar/rifas5x/img/outras/logo_blank.png">
</div>
<!-- Coluna 2 - Nada -->
<div class="col-md-1 text-center" style="background-color:lavender;">
</div>
<!-- Coluna 3 - Nada -->
<div class="col-md-3 text-center" style="background-color:lavenderblush;">
</div>
<!-- Coluna 4 - Nada -->
<div class="col-md-1 text-center" style="background-color:lavender;">
</div>
<!-- Coluna 5 - Nada -->
<div class="col-md-4 text-center" style="background-color:lavenderblush;">
</div></div>
<br>
<div class="row mx-md-n5">
<div class="col-md-3 text-center" style="background-color:lavenderblush;"></div>
<div class="col-md-1 text-center" style="background-color:lavender;"></div>
<div class="col-md-3 text-center" style="background-color:lavenderblush;">
<div style="margin-left:0px;" id="d4w4" ></div></div>
<div class="col-md-1 text-center" style="background-color:lavender;"></div>
<div class="col-md-4 mt-4 text-center" style="background-color:lavenderblush;">
<h3>SUPER-PRÉMIO</h3>
<h1>Boa-sorte!</h1>
<p>FORM</p>
</div></div></div>
<div class="row mt-4">
<!-- Coluna 1 - BUTTONS -->
<div class="col-md-3 text-center" style="background-color:lavenderblush;">
<a href="#" class="btn btn-info btn-sm" data-toggle="modal" data-target="#portfolioModal9" style="font-size: 11px; margin-left: -1px; z-index: 1;">VER RESULTADOS</a>
<a href="#" target="_blank" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal" style="font-size: 11px; margin-left: -1px; z-index: 1;">PATROCINADOR</a>
</div>
<!-- Coluna 2 - Nada -->
<div class="col-md-1 text-center" style="background-color:lavender;">
</div>
<!-- Coluna 3 - Nada -->
<div class="col-md-3 text-center" style="background-color:lavenderblush;">
</div>
<!-- Coluna 4 - Nada -->
<div class="col-md-1 text-center" style="background-color:lavender;">
</div>
<!-- Coluna 5 - Nada -->
<div class="col-md-4 text-center" style="background-color:lavenderblush;">
</div> </div>
<div class="row mt-4">
<!-- Coluna 1 - PPALYER -->
<div class="col-md-3 text-center" style="background-color:lavenderblush;">
<audio id="audio" controls tabindex="0" style="width:220px; height:25px;">
<source type="audio/mp3" src="https://www.clubesorte.org/c_elements/musicas/presentation/Quirky%20-%20AShamaluevMusic.mp3">
Sorry, your browser does not support HTML5 audio.
</audio>
<ul id="playlist" style="display:none">
<li class="active"><a href="https://www.clubesorte.org/c_elements/musicas/lotarias/Who%20Wants%20To%20Be%20A%20Millionaire%20-%20Full%20Version.mp3">---</a></li>
<li><a href="https://www.clubesorte.org/c_elements/musicas/lotarias/Who%20Wants%20To%20Be%20A%20Millionaire%20-%20Full%20Version.mp3">---</a></li></ul>
</div>
<!-- Coluna 2 - Nada -->
<div class="col-md-1 text-center" style="background-color:lavender;">
</div>
<!-- Coluna 3 - Nada -->
<div class="col-md-3 text-center" style="background-color:lavenderblush;">
</div>
<!-- Coluna 4 - Nada -->
<div class="col-md-1 text-center" style="background-color:lavender;">
</div>
<!-- Coluna 5 - Nada -->
<div class="col-md-4 text-center" style="background-color:lavenderblush;">
</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>
<script type="text/javascript" src="./js/LottiDynamic_apenasortear_chavealeatoria.js"></script>
</body>
</html>`
Thanks to Pedro Paulo for the tip... but if you delete the css of " d4w4 {/* width:164px;" it also doesn’t work... because you remove the length of the lines and so when you put more balls, for example 10 balls, they are all in line and I intend that each line has 4 balls (4 horizontally and 4 vertically), as shown in the new drawings I put in its edition.
– Meireles