Having trouble getting Bootstrap CSS to load in an .ejs file?

I am new to ejs and Node.js. I have a Node.js file. Whenever the localhost receives a get request, I redirect to the index.ejs file. The data is displayed in the browser, but the CSS is not loaded. Can someone help me identify the issue in this code? I have included a sample of the code below. Thanks in advance.

index.ejs


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>Document</title>
    <link ref="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="jumbotron text-center">
            <h1>User Authentication with Passport, Express 4 and MongoDB</h1>
            <h3>Login or Register with...</h3>
            <a href="/login" class="btn btn-lg btn-success">Login</a>
            <a href="/register" class="btn btn-lg btn-info">Register</a>
        </div>
    </div>
</body>
</html>

cssnode.jsbootstrap-4ejs

Answer №1

My implementation includes the following:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

Everything is functioning perfectly...

Answer №2

opt for rel="style" over ref="style"

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

Learn how to separate two SCSS files and compile them into individual CSS files

Currently, I have two SCSS files that need to be compiled into separate CSS files. For one of the SCSS files, my script looks like this: "watch:sass": "node-sass assets/stylesheets/custom.scss assets/stylesheets/custom.css -w", "compile:sass": "node-sass ...

cssnpmsasscompilationwatch

The function 'Message.Create' cannot be implemented in the Sequelize CLI

I have added mysql sequelize to my project and created a Message Model using the sequelize command, which generates both the model and migration files. I have also provided the database credentials in the config.json file. Now, when trying to insert a reco ...

mysqlnode.jsexpresssequelize.jssequelize-cli

What happened to the BrowserFetcher feature in Puppeteer?

Currently, all information regarding createBrowserFetcher and BrowserFetcher has been deleted. I have not been keeping up with the developments in puppeteer, so I am unsure of what transpired. Can someone provide me with some guidance? I needed to manuall ...

node.jspuppeteerchromium

Access denied message received even after authenticating with user's JWT

When using ThunderClient, a tool similar to Postman, I am unable to access an employee API that requires a JWT, even though I have confirmed that I am authorized. Below is the code snippet: const usersDB = { users: require("../model/users.json" ...

node.jsexpressjwtthunderclient

Can you guide me on implementing a transition animation through class toggling?

I am facing an issue where certain elements need to be highlighted or unhighlighted conditionally. To achieve this, I have assigned a class called highlight to the elements that require highlighting with a transition animation. The challenge arises when t ...

htmlcsscss-transitions

Utilizing jQuery to dynamically load CSS files on a webpage

For my website, I have implemented 4 different .css files to handle various screen resolutions. Here is the innovative jquery code I've developed to dynamically load these files based on the width of the screen. <link id="size-stylesheet" rel="st ...

jqueryhtmlcss

Utilizing props to define the background-color of the '&:hover' state

I'm adapting Material UI's Chip component to accept custom values for the colors prop, rather than being limited to "primary" and "secondary". Additionally, I want the chip to exhibit a hover effect when clicked, transitioning to a different colo ...

cssreactjsmaterial-uijsx

Guide on adding CSS3 ribbons to elements on both sides

I recently came across a tutorial that teaches how to create a CSS ribbon. However, after following the tutorial, I found that the ribbon only appears on one side of the element. This has left me wondering if it's possible to have the ribbon display o ...

css

Can an excess of CSS impact the speed and performance of a website?

After conducting thorough research on this specific topic, I was unable to locate the precise answer that I require. For instance, there are numerous divs within my project that necessitate a border. One approach is to create a distinct CSS class such as ...

htmlcss

What is the process for creating a Popover in Rails 4.2.5 with the bootstrap-sass gem (Bootstrap 2)?

Recently, I made the decision to upgrade my Rails 4.2.2 application to Rails 4.2.5 due to a security update. The previous version was running on Ruby 2.2.2 and utilized the gem twitter-bootstrap-rails for Bootstrap 2. However, I encountered a Ruby error wh ...

ruby-on-railstwitter-bootstrapcsssasspopover

Creating pagination using AJAX to fetch data from an API while maintaining the same query parameters

Writing a title for this may be a bit tricky, but I'll try my best. On the webpage located at the /music-maker endpoint, there is a modal that contains an input field. This input field captures user input and sends it to the backend using AJAX. The u ...

javascriptjquerynode.jsajaxexpress

Styling multiple checkbox items in an Angular Material Autocomplete

Is there a way to adjust the height of autocomplete multiple checkbox items in Angular Material? I'd like it to look like this With a line item height of 18px But instead, it looks like this when using multiple checkboxes With a different checkbox ...

cssangularsassangular-material

The fusion of functional programming with SQL concepts

Looking for simple FP functions to fetch records from MySQL using Node.js. For instance: exec(select('users'), where({active: 1})) // SELECT * FROM users WHERE active = 1 However, if the where clause is complex or involves a join, how can we m ...

sqlnode.jsdatabasefunctional-programming

Encrypting data using AES in android and decrypting it using Node.js

During my experimentation with encryption in Android and decryption on a Node.js server, I encountered an issue. I created an AES 128-bit key and used the AES algorithm to encrypt it, then further encrypted this generated key using the RSA algorithm before ...

javanode.jsencryptionaesrsa

Tips for creating a cursor follower that mirrors the position and size of another div when hovering over it

I am trying to create a cursor element that follows the mouse X and Y position. When this cursor hovers over a text element in the menu, I want it to change in size and position. The size of the cursor should match the width and height of the text being h ...

javascripthtmljquerycss

PHP incorporate diverse files from various subfolders located within the main directory

My question is similar to PHP include file strategy needed. I have the following folder structure: /root/pages.php /root/articles/pages.php /root/includes/include_files.php /root/img/images.jpg All pages in the "/root" and "/root/art ...

phphtmlcssimageinclude

The combined power of NodeJs and Protractor allows for the retrieval of a value from a common

this.fetchMailData = function(mailUrl, callBack) { request.get({url: mailUrl}, function (error, response, body) { if (error) { return console.error('Something went wrong:', error); } else { callBack(body); } }); }; th ...

node.jsprotractor

"async.each function: only triggers a single callback once all tasks have been completed

I am using an async.each function to carry out the following tasks in order: 1. Retrieve image size from an array. 2. Crop the image. 3. Upload the cropped image to AWS S3. Now, I want to display a single success message after all uploads have complete ...

node.jsexpressasynchronousasync.js

Populate your website with both a Bootstrap Popover and Modal for interactive user engagement through hover

Here's the situation: I want to showcase a user's name with a popover that reveals a snippet of their profile information. I've got that part down, where it dynamically generates and displays the popover content as needed. The popover functi ...

javascripthtmlcsstwitter-bootstrapmodal-dialog

Error handling middleware delivering a response promptly

Issue with my express application: Even after reaching the error middleware, the second middleware function is still being executed after res.json. As per the documentation: The response object (res) methods mentioned below can send a response to the cl ...

javascriptnode.jsexpressmiddleware