I am working with a layout structure that consists of a row with two columns. At the beginning of the page, I want to display only one column with full screen width, so I have set it to col-sm-12. However, once a specific event is triggered, I need to show the right side column with its width set to col-sm-4, and the main column (initially set to col-sm-12) should shrink to col-sm-8.
The layout appears as follows:
$('.main').on('click', function() {
$('.main').removeClass('col-sm-12')
$('.main').addClass('col-sm-8')
$('.side').removeClass('d-none')
})html,
body {
height: 100%;
}
.main {
background-color: #ff23;
}
.side {
background-color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2c21213a3d3a3c3a312a32272d206562637ca03b">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-12 main">
</div>
<div class="col-sm-4 d-none side">
</div>
</div>
</div>How can I animate the transition in column width from col-sm-12 to col-sm-8? I would like something where the hidden column pushes the other by stretching or utilizing another type of fancy animation...