CODEWITHSUNDEEP
javascripthtmljquerycssbootstrap-4
NiceToMytyuk
NiceToMytyuk

Reputation: 4277

How to animate col resize in bootstrap 4?

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>

At this how could i animate the column width change from col-sm-12 to col-sm-8? i would do something like the hidden column will push the other by stretching it or any other fancy animation...

Upvotes: 1

Views: 769

Answers (1)

jozpac
jozpac

Reputation: 122

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.

Upvotes: 1

Related Questions