javascript - How to animate col resize in bootstrap 4?

Question

I have a layout structure like a row with two columns, at the page start i should see only one column with full screen width, so i set it to col-sm-12 while once an event is triggered i have to show the right side column with column set to col-sm-4 and the main column from col-sm-12 should become col-sm-8.

So the layout looks like this and i've made an example that when the col-sm-12 is clicked i'd show the other column:

$('.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/[email protected]/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>

question from:https://stackoverflow.com/questions/66059383/how-to-animate-col-resize-in-bootstrap-4

Answer 1

I think the transition css property should do the thing, but I am not sure. Try to set: div[class*="col-"] { transition: .3s ease; } and let me know.