1
Bootstrap speakers inside the div with class .row stick together ( http://prntscr.com/io5hbg ). But I would like to "untangle" them somehow by putting a spacing between them of at least 20px.
I’ve tried it with css ( using margin in column class: http://prntscr.com/io5kyk ), I’ve tried to use more div.row in everything but not solved.
Example of how it sticks:
My code: https://hastebin.com/savuwuzifo.xml
4
Cara has a technique that can fit you. It as a 12 column inside a 3 column, so you get a padding inside the 3 column and creates this space between the columns.
<div class="col-md-3">
<div class="col-md-12 col-bg-color">
<div class="row">
</div>
</div>
</div>
Take the example. (as I said no need for CSS just nestle the divs col- )
Run "Whole Page" to see better, as it is responsive and is small 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>has to enjoy twice the answer ?
Haha was worth @Otto , this trick breaks a branch even!
Nothing breaks the tree all kkk
Caraca how sensational! I spent a week trying to fix this kkkkkk thank you even, worked perfectly. Best technique!!
Browser other questions tagged html twitter-bootstrap bootstrap-3
You are not signed in. Login or sign up in order to post.
The columns stick together, but they have
paddingconfigured, ie, the content within them will already get the space you want.– Oeslei
Worst of all, @Oeslei, look: http://prntscr.com/io6ypm src: http://prntscr.com/io6yzt
– Lucas Josivan
is in Bootstrap 4 right?
– Leandro RR
@Leandrorr by the question tag is Bootstrap3... Put your tip there, it is always valid to have another option.
– hugocsl
Valew Ugo, and I’m sorry anything
– Leandro RR
@Lucasjosivan places the
backgroundon the tagp, or even better, puts adivbetween thecol-*and thepspecific to this. It’s similar to the @hugocsl response, but I believe it’s not necessary to put the class againcol-*.– Oeslei