<meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <!--Supporting All devices width-->
<meta name="description" content="Lowa State University Library">
<meta name="keywords" content="For a Web Design Assignment">
<meta name="author" content="Tharuka Dananjaya">
<link rel="stylesheet" href="./css/style.css">
<!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">-->
</head>
<body>
<header>
<div class="container">
<div id="head_top">
<h1>LOWA STATE UNIVERSITY | <span class="highlight"> LIBRARY</span></a></h1>
</div>
<nav>
<ul>
<li>
<li class="current"><a href="librarian_home.php">Home</a></li>
<div class="dropdown">
<button class="button_book">Books</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
</div>
<!--<a href="loginindex.php">Login</a>
<a href="registerindex.php">Register</a>-->
<a href="student_info.php" class="ma">Student Info</a>
</ul>
</nav>
</header>
<section id="search_bar">
<div class="container">
<form>
<input type="text" placeholder="Search">
<button type="search" class="button_1">search</button>
`I have included an external CSS file and Bootstrap. The CSS stylesheet is already linked and working perfectly on my page. However, when I tried to create a table using Bootstrap, linking the Bootstrap files caused a change in all the styles, such as the header fonts and everything else. How can I successfully link both the CSS styles and Bootstrap while maintaining the desired appearance? After linking the Bootstrap file