Bootstrap Collapse - No Animation - html

Question

I am implementing Bootstrap Collapse to my website by clicking an icon from the Font Awesome library. When I press it, the content collapses, but there is no animation, it just pops up. What am I doing wrong?
Here's my code
<div class="container col-sm-12 banner">
<i class="fa fa-plus" aria-hidden="true" data-toggle="collapse" data-target="#moreInfo"></i>
</div>
<div id="moreInfo" class="collapse">
<div class="hiddenInfo">
123
</div>
</div>

Answer 1

You're running into a conflict due to your improper implementation of Bootstrap's Grid system. .container and .col-sm-12 cannot be combined in this fashion; it results in a series of floating errors that conflicts with the transition effect.
Once you correctly implement Bootstrap's Grid (and address clear issues with your other float) the transition animates as expected.
.banner {
background-color: #1194f0;
padding: 20px;
}
.banner i {
font-size: 40px;
float: right;
line-height: 50px;
}
.hiddenInfo {
background-color: black;
color: white;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="banner clearfix">
<i class="fa fa-plus" aria-hidden="true" data-toggle="collapse" data-target="#moreInfo"></i>
</div>
</div>
<div class="col-sm-12">
<div id="moreInfo" class="collapse">
<div class="hiddenInfo">
123
</div>
</div>
</div>
</div>
</div>