• Context of the problem

    • I am following this tutorial and I have gotten to 22:25. My screen does not look like his, it looks like this.

r/webdev - I'm following a very basic tutorial but I can't get my Bootstrap to load

basic navbar with bootstrap code

This is my index.html

Please let me know if you can help

<!DOCTYPE html>
<html lang="en">

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>So you're approaching me?</title>

	<!-- bootstrap css file-->
	<link rel="stylesheet" type="./css/bootstrap.min.css">

	<!-- Font Awsesome Icons -->
	<link rel="stylesheet" type="./css/all.min.css">

	<!-- custom css file -->
	<link rel="stylesheet" type="./css/style.css">

	<!-- - - - - - - Start Header area - - - - - - -->

	<header class="header_area">
		<div class="main-menu">
			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<a class="navbar-brand" href="#">Navbar</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
			  		<span class="navbar-toggler-icon"></span>
				<div class="collapse navbar-collapse" id="navbarNav">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
						<li class="nav-item">
							<a class="nav-link" href="#">Features</a>
						<li class="nav-item">
							<a class="nav-link" href="#">Pricing</a>
						<li class="nav-item">
							<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

	<!-- - - - - - - End Header area - - - - - - -->

	<!-- Jquery -->
	<script src="./js/jquery.3.4.1.js"></script>
	<!-- Bootstrap js file -->
	<script src="./js/bootstrap.min.js"></script>

Source link

Write A Comment