bootstrap and ms edge bug? - html

Question

I have create website (bootstrap). On chrome/firefox etc is working but on edge I have problem. look at this page at bottom part, there are 4 buttons. When they hovered they move and don't get back to normal position.
I searching online but can't find anything about this error. Or it's my wrong code? What do you think?
Code below
#bottom_fourth_row {
display: table;
margin-top: 15px;
}
#bottom_fourth_row [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
position: relative;
padding-bottom: 45px;
/*display: table-cell;
vertical-align: top;
position: relative;
padding-bottom: 45px;*/
}
#bottom_fourth_row>.col-sm-3>img {}
#bottom_fourth_row>.col-sm-3>h3 {
font-family: avenir_light;
height: 50px;
text-align: left;
color: #027a9e;
padding: 0;
font-size: 22px;
font-weight: bold;
}
#bottom_fourth_row>.col-sm-3>h4 {
font-family: avenir_light;
text-align: left;
padding: 0;
color: #7d7d7d;
font-size: 18px;
line-height: 1.3em;
}
#bottom_fourth_row [class*="col-"] button {
position: absolute;
bottom: 0;
right: 20px;
margin-left: auto;
margin-right: auto;
width: 90px;
height: 40px;
background-color: #2aa3c3;
font-family: basic;
font-size: 20px;
color: #ffffff;
}
#bottom_fourth_row [class*="col-"] button>a,
#bottom_fourth_row [class*="col-"] button>a:focus,
#bottom_fourth_row [class*="col-"] button>a:hover,
#bottom_fourth_row [class*="col-"] button>a:visited {
color: #ffffff;
}
<div class="row" id="bottom_fourth_row">
<div class="col-xs-12 col-sm-3"> <img src="http://placehold.it/350x150">
<h3>text</h3>
<h4>text</h4>
<form>
<div class="form-inline">
<input type="text" name="email" id="email" placeholder="Email" />
<input type="hidden" name="list" value="wgPkaIHO7pFCp9G65wvXXw" />
<button type="submit" name="submit" id="submit" class="btn">submit</button>
</div>
</form>
</div>
<div class="col-xs-12 col-sm-3"> <img src="http://placehold.it/350x150">
<h3>text</h3>
<h4>text</h4>
<button class="btn">more</button>
</div>
<div class="col-xs-12 col-sm-3"> <img src="http://placehold.it/350x150">
<h3>text</h3>
<h4>text</h4>
<button class="btn">more</button>
</div>
<div class="col-xs-12 col-sm-3"> <img src="http://placehold.it/350x150">
<h3>text</h3>
<h4>text</h4>
<button class="btn">more</button>
</div>
</div>

Answer 1

So I found reason why Edge play with me.
In #bottom_fourth_row [class*="col-"]
I remove:
float: none;
display: table-cell;
and add:
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
this help with this problem.
It's interesting that this was only with Edge.