card

public/style.css

@@ -0,0 +1,5 @@
+.card {
+    width: 20rem;
+    top: 50px;
+    left: 225px;
+}

src/App.vue

@@ -3,7 +3,9 @@
     <h1 style="text-align: center;">Letenka</h1>
     <div class="wrapper">
       <div class="col">
-        <h2>Parametry letu</h2>
+        <div class="card">
+          <div class="card-body">
+            <h4 class="card-title">Parametry letu</h4>
             <div>
               <p>Typ letenky:
                 <select v-model="travelType">
@@ -30,6 +32,7 @@
             </div>
             <div>
               <p>
+                Datum odletu: 
                 <v-date-picker v-model="departureDate" :min-date="new Date()" value="" />
               </p>
             </div>
@@ -51,10 +54,16 @@
               </div>
             </div>
             <button v-on:klick="chosenSeats=[]">Odebrat všechna sedadla</button>
-        
           </div>
+          </div>
+        </div>
+        
+        
+
       <div class="col">
-        <h2>Objednavka</h2>
+        <div class="card">
+          <div class="card-body">
+            <h4 class="card-title">Objednavka</h4>
             <p v-if="travelType">
               Typ cesty: <span style="text-transform: lowercase;">{{ travelType.text }}</span> 
             </p>
@@ -73,7 +82,6 @@
             <p>
               Počet cestujcích: {{ personCount }}
             </p>
-
             <div v-if="chosenSeats.length">
               Vybraná místa:
               <div class="seat" v-for="seat in chosenSeats" :key="seat">{{ seat }}</div>
@@ -81,6 +89,8 @@
           </div>
         </div>     
       </div>
+    </div>
+  </div>
 </template>
 
 <script>