I believe that there is no need to make the column fill the Row 100%, but as I have already commented on this in the question, let’s move on.
What has been done:
I added id for each div of class='box' (A,B,C,D), so that they can independently undergo javascript manipulation.
Added class first which reduces the margin-left of the element in -15px.
Added class last which reduces the margin-right of the element in -15px.
Logic behind the classes first and last:
When the element is the first of his "line" he must stand against the left edge of his parent element (in this case the column).
When the element is the last of his "line" he must stand against the right edge of his parent element (in this case the column).
But why -15px? : 15px is the padding default column defined by bootstrap. Then we define which child element will have -15px of margin to cancel the action of padding.
Using Jquery, I created the function pull over, which is nothing more than the person responsible for the class exchanges defined previously in CSS. (touching the element to the nearest edge).
When there is a line break or a change of media, the function must detect and relocate the div’s correctly.
Logic behind the relocation: Using the offset jquery, it is possible to take the exact position the element is in on the page, so we can take the position of the last element id='D' and subtract by the position of the first element id='A'. As long as they’re on the same line, the distance between them will be 853.5px. This way I can detect the exact time when the line break occurs.
When line breaking occurs, the last element loses class last and gets the class first, why now he’s the first of the bass line.
And of course there’s one element left on the top line, and now he needs to receive the class last.
For div’s relocation to work, I’m using events .ready() and .resize(), that together are able to detect when the page has been fully loaded and every time it is being resized.
I do not believe that this code is in the best possible way, but it fulfills its role in relation to the question asked.
Unfortunately this code only works when we are talking about the 4 div’s created (A,B,C,D).
There is a way to reallocate an undetermined number of Divs?: I believe so, but I was not able to think that way (maybe a little more persistence and I arrive there!).
The view of this code is also available here.
$(document).ready(encostar);
$(window).on('resize',encostar);
function encostar(){
var vet = [];
$('.box').each(function(){
var offset = $(this).offset();
// $(this).text(offset.left+'px');
vet[$(this).attr('id')] = offset.left;
var out = '';
for (var i in vet) {
out += i + ": " + vet[i] + "\n";
}
if(vet['D'] - vet['A'] < 853.5)
{
$('#D').addClass('first');
$('#D').removeClass('last');
if($('#C').hasClass('first'))
{
}
else
{
$('#C').addClass('last');
}
if(vet['B'] === vet['D'])
{
$('#D').removeClass('first');
$('#D').addClass('last');
$('#B').removeClass('first');
$('#B').addClass('last');
}
if(vet['A'] === vet['C']-15)
{
$('#C').addClass('first');
$('#C').removeClass('last');
if($(window).width() < 575)
{
$('#A').addClass('last');
$('#C').addClass('last');
$('#B').addClass('first');
$('#B').addClass('last');
$('#D').addClass('first');
$('#D').addClass('last');
}
else
{
$('#A').removeClass('last');
$('#C').removeClass('last');
$('#B').removeClass('first');
$('#D').removeClass('first');
}
}
}
else
{
$('#D').removeClass('first');
$('#D').addClass('last');
$('#C').removeClass('last');
$('#C').removeClass('first');
$('#B').removeClass('last');
}
});
}
.box {
height: 100px;
margin-bottom: 20px;
border: 1px solid rgba(0,0,0,0.2);
text-align: center;
}
.first{
margin-left: -15px !important;
}
.last{
margin-right: -15px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="margin-top:40px;margin-bottom:40px;border-right: 1px solid red;border-left: 1px solid red;">
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box first" id='A'></div>
</div>
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box" id='B'></div>
</div>
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box" id='C'></div>
</div>
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box last" id='D'></div>
</div>
</div>
</div>
Don’t forget to resize your browser!
Gabriel, what is the need of this occupation 100%? If you take the edges off, you can’t tell if the col is occupying 100% or 90%.. It makes no difference. If we make the column 'stick' in Row, every time the media break happens it will be strange and misaligned.
– Bsalvo
Gabriel, feedback would be interesting!
– Bsalvo