Bootstrap Custom Card Example

by Alejandro M

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<header>Header</header>
<aside>Sidebar</aside>
<main>Main Content</main>
<footer>Footer</footer>

CSS

body {
            margin: 0;
            height: 100vh;
        }

        header {
            background: #3498db;
            color: white;
            padding: 20px;
            text-align: center;
        }

        aside {
            background: #2ecc71;
            color: white;
            padding: 20px;
        }

        main {
            background: #f1c40f;
            padding: 20px;
        }

        footer {
            background: #e74c3c;
            color: white;
            text-align: center;
            padding: 20px;
        }