<template>
  <div class="fullwidth">
    <div class="col_footer col_one">
        <slot name="col_one"></slot>
    </div>
    <div class="col_footer col_two">
        <slot name="col_two"></slot>
    </div>
    <div class="col_footer col_three">
        <slot name="col_three"></slot>
    </div>
    <div class="col_footer col_four">
        <slot name="col_four"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'FourColumns'
})
</script>

<style scoped>
  .col_one {
      width:25%; float: left;
  }
  .col_two {
      width:25%;float: left;
  }
  .col_three {
      width:25%;float: left;
  }
  .col_four {
      width:25%;float: left;
  }
</style>