Automatically adjust column width in bootstrap - html

Question

I am not that much good in designs and I have a design issue which is dragging me for hours. If anyone can help me on that would be appreciable.
I have a div with a .container class and inside that, we have three div's. One with a class .col-md-3 another with a class .col-md-6 and the third one with class .col-md-3. The third column shouldn't be there at all. In some cases, it only the first and second div will be there.
Can we make the second div taken the space of third one if it is not there ? Is there any method in bootstrap for this.
Please help me.

Answer 1

you can use col classes to div. it will automatically adjust if one div is removed from the row
check https://getbootstrap.com/docs/4.1/layout/grid/#equal-width for more information
.col {
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
you can check by removing one column from the row

Answer 2

You heck a little but on bootstrap 3. by adding some of custom CSS.
Please View in full page mode
$('button').click(function(){
$('#toggle_col').toggle();
});
.col-sm-3 {
background-color: red;
}
.col-sm-6 {
background-color: blue;
}
/* this will do the trick */
#media (min-width: 768px)
.flex-row {
display: flex;
flex-wrap: wrap;
}
}
.flex-col {
flex: 1 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row flex-row">
<div class="col-sm-3">3</div>
<div class="col-sm-6 flex-col">6</div>
<div class="col-sm-3" id="toggle_col">3</div>
</div>
</div>
<button>Toggle Column</button>