The Bootstrap columns that fall within div with the .row class are pasted ( link ). But I'd like to "strip" them somehow, putting a spacing between them at least 20px.
I have tried with css (using margin in column class: link ), I already tried to use div.row at all but did not solve .
Example of how it is attached:
Mycode: link
Dude has a technique that can suit you. It's like a column of 12 inside a column of 3, so you get a padding inside the column of 3 and create that space between the columns.
<div class="col-md-3">
<div class="col-md-12 col-bg-color">
<div class="row">
</div>
</div>
</div>
Execute in "All Page" to see better because you are responsive and small in this way.
* {margin: 0; padding: 0;}
body {background-color: #00192f !important; color: aliceblue !important;}
.logo {max-width: 30% !important; height: 30% !important; margin-left: 30px;}
.separador {border-bottom: thin solid #5a5a5a !important;}
.espaco-cima {padding-top: 15px;}
.espaco-tudo {padding: 10px 10px 5px 10px;}
.pqn {font-size: 10px;}
.col-bg-color {background-color: #00213e !important; color: aliceblue !important; border: thin solid #5a5a5a; border-radius: 10px;}
.margin {margin: 0px 0px 0px 0px;}
#login-dp{min-width: 250px; padding: 14px 14px 0; overflow: hidden; background-color:rgba(0,0,0,.9);}
#login-dp .help-block{font-size:12px}
#login-dp .bottom{background-color:rgba(0,0,0,.9); border-top:1px solid #ddd; clear:both; padding:14px;}
#login-dp .form-group {margin-bottom: 10px;}
@media(max-width:768px) {
.logo {max-width: 20% !important; height: 20% !important;}
#login-dp{background-color: inherit; color: #fff;}
#login-dp .bottom{background-color: inherit; border-top:0 none;}
}
::-webkit-scrollbar-track {background-color: #000867;}
::-webkit-scrollbar {width: 6px; background: #000867;}
::-webkit-scrollbar-thumb {background: #1400ff;}<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="col-md-12 col-bg-color">
<div class="row">
<a><img src="https://i.imgur.com/j03ymqv.jpg"style="width:100%; height: auto; border-radius: 10px;" alt="Campeonato Zula"></a>
</div>
<div class="row separador espaco-tudo">
<h4>Seletiva Zula Brasil Mundial</h4>
</div>
<div class="row separador espaco-tudo">
<p>Criador: Zula Pro League</p>
</div>
<div class="row espaco-tudo">
<div class="col-md-6" style="padding: 0px !important;">
<div class="table-responsive">
<table class="table" style="margin-bottom: 5px !important;">
<tbody>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Data</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">19/03/18 </td>
</tr>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Horário</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">22:00 </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-6" style="padding: 0px !important;">
<div class="table-responsive">
<table class="table" style="margin-bottom: 5px !important;">
<tbody>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong> Organizadora</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">ZPL</td>
</tr>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong> Vagas</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="col-md-12 col-bg-color">
<div class="row">
<a><img src="https://i.imgur.com/j03ymqv.jpg"style="width:100%; height: auto; border-radius: 10px;" alt="Campeonato Zula"></a>
</div>
<div class="row separador espaco-tudo">
<h4>Seletiva Zula Brasil Mundial</h4>
</div>
<div class="row separador espaco-tudo">
<p>Criador: Zula Pro League</p>
</div>
<div class="row espaco-tudo">
<div class="col-md-6" style="padding: 0px !important;">
<div class="table-responsive">
<table class="table" style="margin-bottom: 5px !important;">
<tbody>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Data</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">19/03/18 </td>
</tr>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Horário</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">22:00 </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-6" style="padding: 0px !important;">
<div class="table-responsive">
<table class="table" style="margin-bottom: 5px !important;">
<tbody>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong> Organizadora</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">ZPL</td>
</tr>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong> Vagas</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="col-md-12 col-bg-color">
<div class="row">
<a><img src="https://i.imgur.com/j03ymqv.jpg"style="width:100%; height: auto; border-radius: 10px;" alt="Campeonato Zula"></a>
</div>
<div class="row separador espaco-tudo">
<h4>Seletiva Zula Brasil Mundial</h4>
</div>
<div class="row separador espaco-tudo">
<p>Criador: Zula Pro League</p>
</div>
<div class="row espaco-tudo">
<div class="col-md-6" style="padding: 0px !important;">
<div class="table-responsive">
<table class="table" style="margin-bottom: 5px !important;">
<tbody>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Data</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">19/03/18 </td>
</tr>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Horário</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">22:00 </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-6" style="padding: 0px !important;">
<div class="table-responsive">
<table class="table" style="margin-bottom: 5px !important;">
<tbody>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong> Organizadora</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">ZPL</td>
</tr>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong> Vagas</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="col-md-12 col-bg-color">
<div class="row">
<a><img src="https://i.imgur.com/j03ymqv.jpg"style="width:100%; height: auto; border-radius: 10px;" alt="Campeonato Zula"></a>
</div>
<div class="row separador espaco-tudo">
<h4>Seletiva Zula Brasil Mundial</h4>
</div>
<div class="row separador espaco-tudo">
<p>Criador: Zula Pro League</p>
</div>
<div class="row espaco-tudo">
<div class="col-md-6" style="padding: 0px !important;">
<div class="table-responsive">
<table class="table" style="margin-bottom: 5px !important;">
<tbody>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Data</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">19/03/18 </td>
</tr>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Horário</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">22:00 </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-6" style="padding: 0px !important;">
<div class="table-responsive">
<table class="table" style="margin-bottom: 5px !important;">
<tbody>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong> Organizadora</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">ZPL</td>
</tr>
<tr>
<td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong> Vagas</strong></td>
<td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>