I am experiencing difficulties with my bootstrap module not loading

Could you please investigate why my module isn't loading? The module is supposed to load under the specified conditions in the third last column, but when I test the code, it doesn't work. Can you assist me in identifying what might be causing the issue? Thank you.

Stefan

https://i.sstatic.net/UCizH.png

<!DOCTYPE html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Lato:100,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
     <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
     <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
  </head>
<body>

<div class="container">
<div class="row">
    <div class="col-md-6">
        <img class="title-logo" src="http://placehold.it/100x100"></div>
<div class="col-md-6 text-right text-uppercase">
<h1 class="title-super text-thin">Stefan Schwarzer</h1>
<h3>Front-end Ninja</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
  <hr>
<img class="img-responsive" src="images/2_1140x350.png">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="text-muted">Featured Work</h2>
  </div>
</div>
<div class="row text-center">
  <div class="col-md-4">
        <img class="img-responsive" src="images/1_350x150.png" data-toggle="modal" data-target="project1">
        <h3 clss="text-uppercase">Javascript Project</h3>
        <p><a href="http://github.com">Link to project</a></p>
  </div>
  <div class="col-md-4">
        <img class="img-responsive" src="images/2_350x150.png">
        <h3 clss="text-uppercase">my Hobbies</h3>
        <p><a href="http://github.com">my Hobbies</a></p>
  </div>
  <div class="col-md-4">
        <img class="img-responsive" src="http://placehold.it/350x150">
        <h3 clss="text-uppercase">my Work</h3>
        <p><a href="http://github.com"></a>my Work</p>
  </div>
</div>
</div>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="project1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Javascript Project</h4>
      </div>
      <div class="modal-body">
        hello how are you
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Answer ā„–1

Check out this updated version for successful implementation, happy coding

<button type="button" class="btn register-now btn-lg" data-toggle="modal" data-target="#register">Save changes</button>

    <div id="register" class="modal fade">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header register-now">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Save Changes here</h4>
                </div>
                <div class="modal-body">
                hey there, how's it going
                    ...
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->  

Answer ā„–2

Make sure to indicate the current directory when referencing your libraries by using "./"

 <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
 <link rel="stylesheet" href="./css/style.css">
 <script type="text/javascript" src="./bootstrap/js/jquery.min.js"></script>
 <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js">

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

Tips for retrieving text without a class or id using selenium and python

I am attempting to extract a list of variables (date, size, medium, etc.) from the following webpage using python/selenium: Getting the titles was straightforward with: titles = driver.find_elements_by_class_name("sln_lot_show") for title in titles ...

The background image does not fully extend across the entire space

I am struggling to find the solution to a simple issue on my website, michelleforboe.com. The background image in a div is not covering the entire space as intended. I have tried using calc to set the height of the div, but it seems to be slightly off. A ...

When applying a cell formatter to change the color of a Tabulator cell, the text displayed is being

I am attempting to dynamically change the color of a tabulator cell based on its input. My initial approach was to simply try changing the cell's color. After running the following code, here is what I observed: function testFormatter(cell, formatt ...

What is the best way to set the tab as "active" in the first iteration of a PHP while loop?

When using a while loop to populate tabs with PHP, maintaining only one active tab at a time can be tricky. I have grasped that assigning the 'active' class within the loop causes all tabs to become active. So, how should I modify the script if I ...

Button click triggers CSS animation

Check out the interactive demo $(document).ready(function(){ $('#btn-animate').click(function(){ animate(); }); $('#btn-remove').click(function(){ $('.to-animate').removeClass('animate'); }); func ...

Issue with HTML and CSS where the header is displayed behind the rest of the content

I'm having issues with creating a fixed header for my webpage. It seems to be hiding behind the rest of the content on the screen even though I have tried adjusting the z-index without success. Here is a snippet of my HTML code: body { m ...

Alignment of badge-pill and h2 in a horizontal position

I'm currently working on mastering Bootstrap. My goal is to have a prominent heading followed by three small badge-pills that are horizontally centered on the page. However, I've run into a couple of issues: 1- The badge-pills are appearing stac ...

Steps to activate highlighting for the initial value in a quarterly datepicker

Concerning the quarterPicker feature in the Bootstrap datePicker (SO: how-to-change-bootstrap-datepicker-month-view-to-display-quarters, jsfiddle: jsFiddle): Is there a way to highlight an initial value upon startup? I have tried setting a value in win ...

incorporating a timer into a JavaScript game

I am currently working on a memory card game where I want to include a stopwatch feature. I'm looking to display the time elapsed from when the user selects the first card until they win. However, I am struggling with keeping the stopwatch running smo ...

Responsive background styling with CSS

I'm currently learning how to create responsive websites, and I've encountered an issue. When I resize the website horizontally to a point just before the edge of the screen touches one of the elements, the background also shrinks, leaving white ...

How can HtmlUnit be used to identify and address website pages that display errors?

I've encountered an issue while trying to access this Ajax page through my Java program using the HtmlUnit 2.15 API. It seems that the problem arises from a broken link to a missing file located here. This is the snippet of code I'm working with ...

Incorporating External Content into Your HTML Website

Looking to incorporate third-party content in the form of an HTML page within my own website, I considered utilizing iframes. This would allow me to embed the external HTML page within my site while keeping their libraries and CSS separate from mine. Howe ...

adjust back side height of flip box does not function on IE web browser

I'm currently working on flipping a div/box, and while it's functioning correctly, I'm facing an issue with the height of the back side exceeding that of the front side. This causes the flipped div to always push down to the next element (e. ...

Utilizing intricate nested loops in Angular.JS for maximum efficiency and functionality

Struggling to work with data looping in Angular.JS, especially when it comes to specific formatting Let's illustrate what I'm aiming for using Java Here's a snippet: int itemCount = 0; for(int i = 0; i < JSON.length(); i = i + 3) { ...

Troubles with Placing Image on WordPress

Working on a Wordpress component for a website where I placed a "SOLD OUT" image over text. However, the issue arises when viewing the site on mobile devices, as the images are smaller and not in their correct positions due to using absolute positioning. ...

"Exploring the versatility of using variables in jquery's .css

Iā€™m facing an issue where I need the rotation of a div to be based on the value stored in "anVar." This is what I currently have: function something() { $('.class').css('-webkit-transform:rotate('anVar'deg)') } The desi ...

Damaged background in Bootstrap interface modal

https://i.stack.imgur.com/nTAnK.png Is there anyone who can assist me in identifying the issue causing the broken or irregular backdrop in the background of overlays or pop-ups? $scope.Modal = $modal.open({ animation: true, ...

When I click on the button, the page reloads instead of executing the essential code

On my website, there is a settings page where users can edit their profiles. After editing, they click the update button which triggers the updateProfileData function. This works smoothly in Chrome browser, but in Firefox, the page reloads as soon as the b ...

css malfunctioning user interface

I'm struggling to figure out how to design a CSS toolbar. My goal is to create a 22x22 button toolbar with 4 buttons. I have this PNG image: and the following code: <style> #nav {background: url(content/images/crtoolbar.png) no-repeat;height: ...

Trouble keeping HTML/Javascript/CSS Collapsible Menu closed after refreshing the page

My issue is that the collapsible menu I have created does not remain closed when the page is refreshed. Upon reloading the page, the collapsible menu is always fully expanded, even if it was collapsed before the refresh. This creates a problem as there is ...