The Bootstrap 4.5 code is not functioning as anticipated

I recently started learning Bootstrap and have been referring to the official documentation. However, I am facing issues with my code even though my folder only contains an index.html file.

Link to Visual Studio Code screenshot.

<!doctype HTML>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRe3js3W69CrMinNGtLdWyYrnnKzHR26vu4tDT5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<title>WeGo</title>
</head>

<body>
<div class="container">
<!-- The part below is causing problems as the Bootstrap styling or classes are not being applied -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand" href="#">WeGo</a>
    </nav>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="79091609091c0b57130a394857484f5749">[email protected]</a>/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEQcxuUJwunvQgZnSQpGTJeEuqjoHcLiYk1xMfooAo"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"></script>
</body>

</html>

Answer №1

If you encountered issues with the integrity attribute and faced file blocking, always ensure that you are using the correct cdn links. It's recommended to obtain the links from the official sources like the Bootstrap website or Bootstrap CDN.

<!doctype HTML>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>WeGo</title>
</head>

<body>
<div class="container">
<!-- This part is not working. The bootstrap styling or classes are not working -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand" href="#">WeGo</a>
    </nav>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11617e616174633f7b6251203f20273f21">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue with VS Code is that it is running the wrong file instead of

Whenever I try to run my Python file, it keeps opening the previous HTML file instead. Despite clicking "run" on my Python file in VS Code, the terminal is not executing (as it normally does), and instead VS Code continues to open the previously opened HT ...

Using jQuery to create a draggable element with a visual indicator that represents a link between two items

Utilizing the "parenting" tool in Adobe AfterEffects allows you to connect layers together. Simply click and hold the icon, then drag it to its destination. A line is drawn from the parent layer to your cursor as a visual guide. I have mastered draggable/ ...

When utilizing Angular, the mat-datepicker is displayed underneath the modal, even after attempting to modify the z-index

I am encountering a problem with a mat-datepicker displaying below a modal in my Angular application. Here are the key details: Html: <div class="col-12"> <mat-form-field appearance="fill"> <mat-label>Start Date ...

Fill the next Thursday with JavaScript

I'm having trouble updating the date for the upcoming Thursday using JavaScript. The current script works fine until the end of the month, but if it's the 25th of August, the output will be "Next Thursday - 8/32/2022". I need a more intelligent s ...

What is the best way to emphasize a div depending on a query outcome?

A new application is in the works for a gaming project. This app is designed to display the location of a specific monster, utilizing a database containing information about monsters and their corresponding maps. Currently, the application functions almos ...

Wondering how to optimize FullCalendar for mobile and touch events?

I am looking to incorporate a drop event feature into the mobile version of fullcalendar. To achieve this, I am utilizing Jquery UI Touch Punch. After researching on various platforms such as Stack Overflow 1, Stack Overflow 2, Stack Overflow 3, Stack Ove ...

Using Node JS to serve an HTML file along with cascading style sheets

As I delve into pure node.js, I encountered an issue related to the HTTP protocol. After spending hours searching and testing my code, I finally managed to serve my HTML page with CSS successfully. Take a look at my code snippet below: const server = http ...

The process of overriding CSS applied through JavaScript

I am using a third-party multi-select dropdown. Similar to Select2, the multi-select dropdown is created using JQuery with select2.min.js and the width of the dropdown is automatically calculated. Is there any way to apply static width to it, as I believe ...

Seeking to duplicate script for a new table without making any changes to the original script

I am working with two tables that require the capability to dynamically add and delete rows using separate scripts. How can I modify the second script so that it only affects the second table and not the first one? Table: <table id="myTable" class=" t ...

Place 2 images side by side within a row using Bootstrap's grid system

https://i.sstatic.net/RVBpK.png Is there a way to center the images for the 2 app download links within the class="row" section? <div class="container"> <div class="row"> <div class="col-xs-4" style="text-align:right"&g ...

Collecting generated Image URIs from JavaScript with SeleniumJS

I've been attempting to develop a Python script that can extract QR codes from WhatsApp web using Selenium. However, I'm facing difficulties with getting it to function properly. The QR image on WhatsApp web is a PNG generated through live JavaS ...

How can I take a screenshot from the client side and save it on the server side using PHP?

Currently, I am exploring the possibility of screen capturing at the client side. It appears that the "imagegrabscreen()" function can only capture screens on the server side. After some research, I discovered a new function that allows for screen capture ...

Transition color seamlessly from the left side to the right side upon hover

Here is a simple code snippet for creating a line that changes color on hover: li::after { height: 2px; display: block; background: rgb(195, 195, 195); border-right: 1px white; content: ''; } li:hover:after { position: relative; ...

Pressing Enter triggers Submit button twice

I’m currently working on a form that includes client-side JS validation using AJAX. The form is a simple contact form with three fields: name, email, and message. If you attempt to submit the form without proper validation, error message divs will appear ...

Breaking Free from Bootstrap Grids

I have a row with two Bootstrap columns - one wide and tall, the other short and narrow https://i.sstatic.net/u7WAf.png However, for mobile devices (targeted below lg), I want to change the column order to split into three sections Photo Consent Organis ...

Internet Explorer is having issues displaying CSS text accurately, particularly in relation to the background-

Having an issue with Internet Explorer not displaying my background clipped text correctly. In other browsers like Chrome and Firefox, the code renders fine: https://i.stack.imgur.com/x9lio.png However, in IE it appears differently: Your code: HTML: & ...

Is it possible for me to use @import to selectively choose what I need and disregard the rest?

If I am utilizing SASS and wish to incorporate a significant portion of another existing stylesheet, whether it is in SASS or CSS format, I have the option to import that particular sheet using @import, then employ @extend to apply some of its rules. Is ...

Displaying a loading spinner while waiting for the Vue.js app to render

Currently, I am developing a Vue.js application and I'm facing a challenge in adding a loading spinner before the app component is rendered. Instagram has a similar feature where they display their logo before showing the page contents. I have tried v ...

Choosing the right framework for implementing push notifications can be a critical decision. Should

I am currently working on a Java application that requires the server to send push notifications to the client every one second. To achieve this, I am using HTML5 server-sent events for one-way communication from the server to the client. However, my conce ...

What is the process of implementing a service in AngularJS?

For my Angular JS project, I am working on creating a module to include my service (file: utils/productos.js) and then load it as a dependency for my ventas module (ventas/ventas.js). However, I encountered the following error: Error: [$injector:nomod] Mo ...