수정2...

src/components/layout/HeaderLayout.vue

@@ -1,42 +1,47 @@
 <template>
-  <nav class="navbar navbar-expand-lg bg-light">
-    <div class="container-fluid">
-      <a class="navbar-brand" href="#">Navbar</a>
-      <button
-        class="navbar-toggler"
-        type="button"
-        data-bs-toggle="collapse"
-        data-bs-target="#navbarSupportedContent"
-        aria-controls="navbarSupportedContent"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
+  <b-navbar toggleable="lg" type="dark" variant="info">
+    <b-navbar-brand href="#">NavBar</b-navbar-brand>
+
+    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+    <b-collapse id="nav-collapse" is-nav>
+      <b-navbar-nav>
+        <b-nav-item href="#">Link</b-nav-item>
+        <b-nav-item href="#" disabled>Disabled</b-nav-item>
+        <b-nav-item href="/todo">Todo</b-nav-item>
+      </b-navbar-nav>
+
+      <!-- Right aligned nav items -->
+      <b-navbar-nav class="ml-auto">
+        <b-nav-form>
+          <b-form-input
+            size="sm"
+            class="mr-sm-2"
+            placeholder="Search"
+          ></b-form-input>
+          <b-button size="sm" class="my-2 my-sm-0" type="submit"
+            >Search</b-button
           >
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-          <li class="nav-item">
-            <a class="nav-link active" aria-current="page" href="#">Home</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="/todo">Todo</a>
-          </li>
-        </ul>
-        <form class="d-flex" role="search">
-          <input
-            class="form-control me-2"
-            type="search"
-            placeholder="통합검색"
-            aria-label="Search"
-          />
-          <button class="btn btn-outline-success" type="submit">Search</button>
-        </form>
-      </div>
-    </div>
-  </nav>
+        </b-nav-form>
+
+        <!-- <b-nav-item-dropdown text="Lang" right>
+          <b-dropdown-item href="#">EN</b-dropdown-item>
+          <b-dropdown-item href="#">ES</b-dropdown-item>
+          <b-dropdown-item href="#">RU</b-dropdown-item>
+          <b-dropdown-item href="#">FA</b-dropdown-item>
+        </b-nav-item-dropdown> -->
+
+        <b-nav-item-dropdown right>
+          <!-- Using 'button-content' slot -->
+          <template #button-content>
+            <em>User</em>
+          </template>
+          <b-dropdown-item href="#">Profile</b-dropdown-item>
+          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
+        </b-nav-item-dropdown>
+      </b-navbar-nav>
+    </b-collapse>
+  </b-navbar>
 </template>
 <script>
 export default {

src/components/todo/ListComponent.vue

@@ -36,13 +36,11 @@
         </b-col>
         <b-col cols="4" class="border">
           <b-input-group>
-            <label class="input-group-text">
             <b-form-select
               class="d-flex flex-nowrap"
               v-model="filterDateField"
               :options="filterDateFieldOptions"
             ></b-form-select>
-            </label>
             <b-form-input v-model="filterDateStart" type="date"></b-form-input>
             ~
             <b-form-input v-model="filterDateEnd" type="date"></b-form-input>
@@ -60,7 +58,7 @@
           </b-input-group>
         </b-col>
       </b-row>
-      <b-row class="overflow-auto">
+    </b-container>
     <b-table
       id="todoTable"
       ref="todoTable"
@@ -142,7 +140,7 @@
         </div>
       </template>
     </b-table>
-      </b-row>
+    <b-container fluid>
       <b-row>
         <b-col>
           <p>{{ selectedRows }}</p>