Bootstrap 4 fails to initialize

I'm feeling a bit confused. I put together an HTML, CSS, and JS file to showcase a new design concept and decided to incorporate bootstrap 4 into it.

The structure of the folder is as follows: 

 - projectFolder
  - index.html
   - css
     -- styles.css
   - js
     -- main.js
   - img

I included the necessary links in the header: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

However, it wasn't effective. After verifying the link, I decided to copy and paste the template from the bootstrap 4 website with some additional Row's and Col's.

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,
            shrink-to-fit=no">

        <link rel="stylesheet" href="/css/styles.css">
        <link rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
            integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
            crossorigin="anonymous">

        <title>Hello, world!</title>
    </head>
    <body>
        <h1 class="display-5">Hello, world!</h1>
        <div class="row">
            <div class="col-md-4">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Assumenda nisi natus maxime quam nihil quae mollitia dicta
                deserunt error alias.
            </div>
            <div class="col-md-4">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Assumenda nisi natus maxime quam nihil quae mollitia dicta
                deserunt error alias.
            </div>
            <div class="col-md-4">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Assumenda nisi natus maxime quam nihil quae mollitia dicta
                deserunt error alias.
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
            integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
            crossorigin="anonymous"></script>
        <script
            src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9b9a6b9b9acbbe7a3ba89f8e7f8ffe7f9">[email protected]</a>/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
        <script
            src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>
    </body>
</html>

Upon refreshing the page, it seems that Bootstrap isn't initializing at all.

I'm not sure what the issue could be.

cssbootstrap-4

Answer №1

Afia reported that the CDN for Bootstrap is currently down.

After trying other CDNs suggested to me, I had no success.

As a result, I opted to download Bootstrap - Compiled CSS and JS from here

I then linked it to the header, which successfully resolved the issue for me.

While this may slightly increase the load time, considering the minimal data for my small project, it should not pose a significant issue.

Answer №2

For optimal performance, ensure your Custom CSS is placed after Bootstrap's CSS and remember to eliminate the forward slash "/" at the beginning of your code.

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

Eliminate the empty choice for Angular when dealing with dynamic option objects

Looking for assistance with this code snippet: <select ng-model='item.data.choice' > <option ng-if='item.data.simple_allow_blank == false' ng-show='choice.name' ng-repeat='choice in item.data.simple_choices&ap ...

cssangularjshtml

Unable to show the name of the chosen file

After customizing the input [type = file], I successfully transformed it into a button with a vibrant green background. Here is the code snippet that enabled this transformation: <style> #file { height:0px; opacity:0; } ...

javascripthtmlcss

Is there a way to give only the left corners of a button a rounded look?

Here is the visual representation of the button: https://i.stack.imgur.com/Bjlkp.png ...

htmlcss

Web browser displaying vertical scroll bars centered on the page

I'm new to HTML and have been experimenting with this CSS file to center my form. I've managed to get it working, but the issue now is that it's causing scroll bars to appear on the web browser. How can I resolve this without them? @import ...

htmlcss

Looking for the optimal method to display numerous lines of text in HTML, one by one, at intervals of 60 seconds?

I'm working on a display page for my website. The main text in the center needs to change every 60 seconds. I have over 150 individual lines of text that I want to cycle through on the page. What would be the most efficient way to load all these te ...

javascriptcssajaxhtml

JS seems to kick in only after a couple of page refreshes

I'm facing an issue with my 3 columns that should have equal heights. I've implemented some JavaScript to achieve this, which you can see in action through the DEMO link below. <script> $(document).foundation(); </script> <scri ...

javascriptcssloadingmultiple-columns

Issues arise when inline elements are not behaving correctly when placed alongside inline-block elements

Among the various types of HTML elements, inline and inline-block elements have their differences. One such difference is that inline elements don't support margin-top or margin-bottom properties like inline-block elements do. However, in a specific e ...

htmlcsswebinline

Disable the border and background colors in CloudFlare Turnstile

I have implemented the CloudFlare reCaptcha Turnstile and I am looking to modify the widget by removing the border and background color. I believe this customization can be achieved using CSS or Javascript. Thank you for any assistance! ...

javascriptcssrecaptchacloudflare

Position a div adjacent to a particular, changing Rails component once jQuery has toggled it

Within my Rails application (which is utilizing Bootstrap's grid system), I am featuring a blog post within the left column. On the right side, I have integrated a jQuery toggle effect to reveal a quick form for user interaction such as leaving commen ...

jquerycssruby-on-rails

The hamburger menu icon is not visible

I recently built a website and aimed to ensure it had a responsive design. Following a tutorial on YouTube, I implemented everything exactly as shown in the video. However, I encountered an issue with the hamburger icon not appearing. Can anyone shed som ...

htmlcssresponsive-designhamburger-menu

Styling group headers within an unordered list using pure CSS - possible?

Hey there, I'm looking to spruce up my UL by adding group headers. Here's a sneak peek at the structure I have in mind (keep in mind this is generated dynamically from a database): <ul> <li class='group group-1'> < ...

htmlcsscss-selectors

Emphasizing the content of the text file with the inclusion of span tags

I am relatively new to working with angular js and javascript. I have a document or text file that looks something like this: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dumm ...

javascriptjqueryhtmlcssangularjs

Searching dynamically using class names with JQuery

I am seeking to create a dynamic search input based on the class names within the span tags. However, I am struggling with displaying the class name that I have identified. My goal is to show the class names that match the entered value in the input on the ...

javascripthtmljquerycss

I'm having trouble with my fullscreen menu. Is there something I missed when setting it up?

Hi there! I'm currently working on my website and I seem to have run into an issue with the code. I'm still new to coding, so I would appreciate some assistance in identifying where I went wrong. I've been going through the code diligently t ...

jqueryhtmlcssnavigationbar

Disappearing act: CSS3 transform - rotate makes font vanish

When applying a simple css3 transformation rule to an html element which contains various other elements like h1, h2, inputs, and img, I encounter the following issue: div{ -moz-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skew ...

cssfontsrotationtransform

Utilizing JQuery's .Toggle function in conjunction with a stylish CSS transform button

I am trying to create a toggle menu that shows and hides itself without requiring the button to be clicked twice. I have added e.preventDefault(); which solves the issue, but now the button does not transform as intended. $(document).ready(function() { ...

javascriptjqueryhtmlcss

What is the best way to include a targeted href link within HTML code?

During the process of creating a website using bootstrap 4, I included the following snippet of HTML code: <form action="https://www.youtube.com/watch?v=pQN-pnXPaVg" target="_blank"> <button>Start</button> </form> Despite li ...

htmlbootstrap-4hyperlink

The background image fails to load in ReactJS application

Usually, I have no trouble finding solutions to my problems, but this time I'm really stuck - and I apologize in advance if my question seems silly or trivial. I am currently working on a simple React app where I need to set a background image for th ...

javascripthtmlcssreactjswebpack

Display the page number when printing using CSS

I am struggling to display the page number at the bottom of my printable document. I followed a source on Stack Overflow, but unfortunately, it did not work for me. My current CSS attempt to achieve this is as follows: body { text-align: justify; } /* ...

htmlcss

The use of JQuery repeating fields can cause disruptions to the Bootstrap layout when removing rows

I have been struggling with a form that contains multiple fields that need to be repetitive. My current code is functional, but I'm encountering an issue where clicking on any remove button other than the first one causes the fields in the row to rear ...

javascriptjquerybootstrap-4