Laravel - VueJS Bootstrap not working correctly

I made a flash message with VueJS and I want to customize the flash message like this: http://ift.tt/2A8apU4 and I use bootstrap for that like this

<div class="alert alert-success flash-message-succes z-depth-5" role="alert">
  <div class="col-md-2" style="">
    <i class="fa fa-smile-o flash-check" style="font-weight: 100"></i>
  </div>
  <div class="col-md-10">
    <h5 class="mb-0">Gelukt!</h5><p class="mb-0">Uw bericht is succesvol geplaatst!</p>
  </div>
</div>

But for some reason it doesnt work and it shows the flash message like this: http://ift.tt/2hUqXV5

What is causing this? Why does bootstrap columns not work in my view file? My vueJS file looks like this:

<template>
<transition name="bounce" >
    <div class="alert alert-success alert-style z-depth-5" role="alert" v-show="show">
         <div class="col-md-2" style="">
            <i class="fa fa-smile-o flash-succes"></i>
         </div>
        <div class="col-md-10" style=""> 
            <h5 class="mb-0">Succes!</h5><p class="mb-0"></p>
        </div>
    </div>
</transition>

</template>

Thanks in advance!

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2A8arLG
via IFTTT