Having trouble getting Bootstrap to function correctly on an HTML page

I am facing difficulty in identifying the issue. I have replaced the body content with that of another website, which works perfectly fine. However, despite trying to initialize bootstrap elements through both relative paths and CDN, they are not showing up.

As I have not done any CSS styling yet, this seems to be an HTML problem that I am unable to locate. All brackets should be closed properly

<!DOCTYPE html>
<html>
<head>
    <title>MyJewlls</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>;

<body>;
    <div class="container-fluid">
        <div class="container">
            <div class="row" id="padding">
                <div class="col-lg-2">
                    <input type="search" id="search" name="search" placeholder="Search.." />
                </div>
                <div class="col-lg-8">
                    <div class="row" id="absolute">
                        <h1>MyJewlls</h1></div>
                </div>
                <div class="col-lg-2">
                    <ul class="nav nav-pills" id="lista">
                        <li>Log in
                            <li>
                                <li>Register
                                    <li>
                                        <li class="none">My wishlist
                                            <li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="navbar">
                        <a href="#home">Home</a>
                        <a href="#news">News</a>
                        <div class="dropdown">
                            <button class="dropbtn">Dropdown
                                <i class="fa fa-caret-down"></i>
                            </button>
                            <div class="dropdown-content">
                                <a href="#">Link 1</a>
                                <a href="#">Link 2</a>
                                <a href="#">Link 3</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    <div class="container-fluid" id="slajder">
        <div class="row">
            <div class="col-lg-12">
            </div>
        </div>
        <!-- row-->
    </div>
    <div class="container" id="sredina prva">
        <div class="col-lg-12">
            <h2>Jewellery</h2></div>
        <div class="row" id="padding">
            <div class="col-lg-7">
                <a href=""><img class="img-responsive" src="images/bella.jpg" alt="" />
                    <p>jdhydgefwgdggsgfvdsfsffdsg</p>
                </a>
            </div>
            <div class="col-lg-5">
                <a href=""><img class="img-responsive " src="images/rings.jpg" alt="" />
                    <p>mdnvnfhdhjcvjhsdggh</p>
                </a>
            </div>
        </div>
    </div>
    <div class="container" id="sredina druga">
        <div class="col-lg-12">
            <h2>Watches</h2></div>
        <div class="row" id="padding">
            <div class="col-lg-4">
                <a href=""><img class="img-responsive" src="images/bella.jpg" alt="" />
                    <p>jdhydgefwgdggsgfvdsfsffdsg</p>
                </a>
            </div>
            <div class="col-lg-4">
                <a href=""><img class="img-responsive " src="images/rings.jpg" alt="" />
                    <p>mdnvnfhdhjcvjhsdggh</p>
                </a>
            </div>
            <div class="col-lg-4">
                <a href=""><img class="img-responsive" src="images/bella.jpg" alt="" />
                    <p>jdhydgefwgdggsgfvdsfsffdsg</p>
                </a>
            </div>
        </div>
    </div>
    <div class="container" id="sredina treca">
        <div class="col-lg-12">
            <h2>Fragrances</h2></div>
        <div class="row" id="padding">
            <div class="col-lg-5">
                <a href=""><img class="img-responsive" src="images/bella.jpg" alt="" />
                    <p>jdhydgefwgdggsgfvdsfsffdsg</p>
                </a>
            </div>
            <div class="col-lg-7">
                <a href=""><img class="img-responsive " src="images/rings.jpg" alt="" />
                    <p>mdnvnfhdhjcvjhsdggh</p>
                </a>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="container">
            <div class="row">
            </div>
        </div>
    </div>
</body>;

</html>

htmlcsstwitter-bootstrap-3

Answer №1

Initially, there seems to be an issue with the list items inside the list with the 'lista' id (line 26) as they are not properly closed.

<ul class="nav nav-pills" id="lista">
    <li>Log in
    <li>
        <li>Register
            <li>
                <li class="none">My wishlist
                    <li>
</ul>

Furthermore, there are some unclosed div tags at lines 49, 53, and 54 which need attention. It is recommended to use the following link from Bootstrap Official site:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Update: To optimize page rendering speed, consider placing 'script' tags at the bottom of the 'body' section for a faster loading experience. Here is the revised structure:

<!DOCTYPE html>
<html>
<head>
  <title>MyJewlls</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
  <div class="container-fluid">
    <div class="container">
      <div class="row" id="padding">
        <div class="col-lg-2">
          <input type="search" id="search" name="search" placeholder="Search.." />
        </div>
        <div class="col-lg-8">
          <div class="row" id="absolute">
            <h1>MyJewlls</h1>
          </div>
        </div>
        <div class="col-lg-2">
          <ul class="nav nav-pills" id="lista">
            <li>Log in</li>
            <li>Register</li>
            <li class="none">My wishlist</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="container"> <!-- Additional content here -->
      <div class="row">

      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>

Answer №2

Everything appears to be in order with the code, consider clearing your browser's cache or utilizing private browsing mode (press CTRL+Shift+P on Chrome)

Warm regards, M

Answer №3

For enhanced performance, consider updating your bootstrap css link to the following 

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

<!DOCTYPE html>
<html>
<head>
    <title>MyJewlls</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 </head>
 <body>
    <div class="container-fluid">
    <div class="container" >
        <div class="row" id="padding">  
            <div class="col-lg-2">
                <input type="search" id="search" name="search" placeholder="Search.."/>
            </div>  
            <div class="col-lg-8">
                <div  class="row" id="absolute"><h1>MyJewlls</h1></div>
            </div>
            <div class="col-lg-2">
                <ul class="nav nav-pills" id="lista">
                    <li>Log in<li>
                    <li>Register<li>
                    <li class="none">My wishlist<li>
                </ul>
            </div>  
        </div>  
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="navbar">
                 <a href="#home">Home</a>
                 <a href="#news">News</a>
                 <div class="dropdown">
                   <button class="dropbtn">Dropdown 
                   <i class="fa fa-caret-down"></i>
                   </button>
                   <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                   </div>
                  </div> 
                </div>
            </div>
        </div>
    </div>
    </div>

    <div class="container-fluid" id="slajder">
        <div class="row">
            <div class="col-lg-12">

            </div>
        </div>  <!-- row-->
    </div>
    <div class="container" id="sredina prva">
        <div class="col-lg-12"><h2>Jewellery</h2></div>
        <div class="row" id="padding">
            <div class="col-lg-7"><a href=""><img class="img-responsive"src="images/bella.jpg" alt=""/><p>jdhydgefwgdggsgfvdsfsffdsg</p></a></div>
            <div class="col-lg-5"><a href=""><img class="img-responsive "src="images/rings.jpg" alt=""/><p>mdnvnfhdhjcvjhsdggh</p></a></div>
        </div>
    </div>
    <div class="container" id="sredina druga">
        <div class="col-lg-12"><h2>Watches</h2></div>
        <div class="row" id="padding">
            <div class="col-lg-4"><a href=""><img class="img-responsive"src="images/bella.jpg" alt=""/><p>jdhydgefwgdggsgfvdsfsffdsg</p></a></div>
            <div class="col-lg-4"><a href=""><img class="img-responsive "src="images/rings.jpg" alt=""/><p>mdnvnfhdhjcvjhsdggh</p></a></div>
            <div class="col-lg-4"><a href=""><img class="img-responsive"src="images/bella.jpg" alt=""/><p>jdhydgefwgdggsgfvdsfsffdsg</p></a></div>
        </div>
    </div>
    <div class="container" id="sredina treca">
        <div class="col-lg-12"><h2>Fragrances</h2></div>
        <div class="row" id="padding">
            <div class="col-lg-5"><a href=""><img class="img-responsive"src="images/bella.jpg" alt=""/><p>jdhydgefwgdggsgfvdsfsffdsg</p></a></div>
            <div class="col-lg-7"><a href=""><img class="img-responsive "src="images/rings.jpg" alt=""/><p>mdnvnfhdhjcvjhsdggh</p></a></div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="container">
        <div class="row">

        </div>
        </div>
    </div>
</body>

Answer №4

Once you have rectified your bootstrap.css path (you can utilize the public URL, etc).

  1. Prioritize importing jquery.min.js before bootstrap.min.js as bootstrap relies on it.
  2. It appears that some of the bootstrap styling for your components is missing. Take a look at my code snippet. I have only fixed your Navigation menu, but it should give you an idea.

Cheers!

<html>
<head>
    <title>MyJewlls</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
 
</head>
 <body>
    <div class="container-fluid">
    <div class="container" >
        <div class="row" id="padding">  
            <div class="col-lg-2">
                <input type="search" id="search" name="search" placeholder="Search.."/>
            </div>  
            <div class="col-lg-8">
                <div  class="row" id="absolute"><h1>MyJewlls</h1></div>
            </div>
            <div class="col-lg-2">
                <ul class="nav nav-pills" id="lista">
                    <li>Log in<li>
                    <li>Register<li>
                    <li class="none">My wishlist<li>
                </ul>
            </div>  
        </div>  
    </div>
<!--NAVIGATION FIX START---->
  <div id="main_navbar" class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="navbar">
 <a href="#home">Home</a>
 <a href="#news">News</a>
 <div class="dropdown">
   <button  class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 
<i class="fa fa-caret-down"></i>
   </button>
   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
   </div>
  </div> 
</div>
</div>
</div>
</div>
</div>
<!--NAVIGATION FIX START END---->
</div>
    <div class="container-fluid" id="slajder">
        <div class="row">
            <div class="col-lg-12">

            </div>
        </div>  <!-- row-->
    </div>
    <div class="container" id="sredina prva">
        <div class="col-lg-12"><h2>Jewellery</h2></div>
        <div class="row" id="padding">
            <div class="col-lg-7"><a href=""><img class="img-responsive"src="images/bella.jpg" alt=""/><p>jdhydgefwgdggsgfvdsfsffdsg</p></a></div>
            <div class="col-lg-5"><a href=""><img class="img-responsive "src="images/rings.jpg" alt=""/><p>mdnvnfhdhjcvjhsdggh</p></a></div>
        </div>
    </div>
    <div class="container" id="sredina druga">
        <div class="col-lg-12"><h2>Watches</h2></div>
        <div class="row" id="padding">
            <div class="col-lg-4"><a href=""><img class="img-responsive"src="images/bella.jpg" alt=""/><p>jdhydgefwgdggsgfvdsfsffdsg</p></a></div>
            <div class="col-lg-4"><a href=""><img class="img-responsive "src="images/rings.jpg" alt=""/><p>mdnvnfhdhjcvjhsdggh</p></a></div>
            <div class="col-lg-4"><a href=""><img class="img-responsive"src="images/bella.jpg" alt=""/><p>jdhydgefwgdggsgfvdsfsffdsg</p></a></div>
        </div>
    </div>
    <div class="container" id="sredina treca">
        <div class="col-lg-12"><h2>Fragrances</h2></div>
        <div class="row" id="padding">
            <div class="col-lg-5"><a href=""><img class="img-responsive"src="images/bella.jpg" alt=""/><p>jdhydgefwgdggsgfvdsfsffdsg</p></a></div>
            <div class="col-lg-7"><a href=""><img class="img-responsive "src="images/rings.jpg" alt=""/><p>mdnvnfhdhjcvjhsdggh</p></a></div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="container">
        <div class="row">

        </div>
        </div>
    </div>
</body>

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 Codepen demo for SemanticUI is not functioning properly

Click here to view the example on CodePen $('.ui.sidebar').sidebar({ context: $('.bottom.segment') }) .sidebar('attach events', '.menu .item'); I am currently trying to replicate this specific functiona ...

javascripthtml

Need help displaying a file link from a server using the href attribute in a PHP echo statement?

Having some trouble creating a table with PHP. I managed to create the table, but I'm trying to link a file from an FTP server in a td tag. When I use href, it gives me an error. Can you please help me correct my code? echo "<a href = '../pub ...

phphtml

Is there a way to conceal my button menu when printing?

I'm trying to create a button that prints out the current page, but I want to hide my menu of buttons (which is contained inside 'mainMenuDiv') when I go to print. However, so far, all my attempts have resulted in an error saying 'uncau ...

javascripthtmlreactjsprintinghide

While attempting to dynamically add styles to a stylesheet using JavaScript, an error message was encountered stating "Cannot read property 'length' of undefined"

I am currently developing a custom polyfill that enables older browsers like Internet Explorer to interpret and run media queries using traditional CSS selectors. The process is outlined as follows: Iterate through each stylesheet found in the document A ...

javascriptcssmedia-queriespolyfills

Do CSS Modules consistently generate the same class name for a specific CSS class defined within the module?

I have defined the following classes in my CSS module: .container-styles { height: 20px; width: 90%; background-color: rgb(128 , 128 , 128); } .filler-styles { height: 100%; border-radius: inherit; background-color: rgb(27, 150, 40); text-al ...

htmlcssreactjscss-modules

Employing Bootstrap, incorporate a vertical divider in the center to split three icons on the left and three icons on the right, all while ensuring the design remains responsive

I have been struggling with a layout issue for the past couple of days and I am in need of assistance from someone who can help me. Unfortunately, I am unable to upload an image here as I am new and do not yet have enough reputation points. The Layout Str ...

htmlcsstwitter-bootstrap

Display validation messages when the user either clicks out of the textbox or finishes typing

Here are some validation messages: <form name="dnaform" novalidate> <div style="padding-bottom:5px" ng-show="dnaform.uEmail.$pristine || dnaform.uEmail.$valid">Active directory account </div> <div style="padding-bottom:5px;" n ...

javascripthtmlcssangularjs

Why does the font on my website appear altered compared to the font in the ttf/woff files?

This is an example of the font's appearance. Here's how the font appears in the .ttf file format. And this is the visual representation of the font on my website. #top { margin: 30px 30px 0px 150px; border: ...

cssfont-face

The $mdSticky feature in AngularJS Material seems to be malfunctioning

It's been a challenge for me to get the md-toolbar to stay in the top position. I decided to create a custom directive using the $mdSticky service in AngularJS. var app=angular.module('app',['ngMaterial']); app.controller(&apos ...

javascriptcssangularjsangular-materialsticky

The orientation of my bootstrap navbar menu is vertical instead of horizontal

I've been struggling with this issue for hours now. Despite searching online for solutions, I haven't been able to make my navbar list go vertical or get the "logout" and "My Posts" options to drop down when "Author" is selected as it should. Her ...

htmlcssruby-on-railsbootstrap-4navbar

The Order of Transitions Reversed in CSS

I have a unique situation that I'm hoping to get some help with. I've been trying to create an effect where I move text away and lift up a gray box, and then when my mouse moves away from the gray box, the box goes down first before the text move ...

htmlcsstransition

What could be the reason for my new course not being recognized?

Looking to modify the behavior of a button where, when clicked, it hides a specific div element, changes its text display, and toggles between classes using addClass/removeClass for subsequent click events. Unfortunately, the intended functionality is not ...

jquerycsshtml

Python-JavaScript Integration Problem

I'm a beginner when it comes to Javascript, Python, and PHP. In my Javascript program, I have a button that triggers a Python script and displays the returned value on the screen. My goal is to steer clear of using Jquery and Json. Here are the snipp ...

javascriptpythonhtml

What is the method for generating three inputs simultaneously in a single line?

I'm facing a challenge in my code where I want each line to contain only three input fields. Whenever I try to add a fourth input field, the first one remains on the previous line while the other three move to the next line. Oddly enough, this issue o ...

javascripthtmlbootstrap-4

What could be causing the malfunction of the ::after selector in my code?

I am currently utilizing bootstrap 4 in my code and have implemented the following ::after styling for certain elements: .navbar-light .navbar-nav > li >a::after{ content: " "; height: 50px; width: 10%; background-image: linear-gradi ...

htmlcssbootstrap-4

Performing AJAX post/get requests between two HTML pages using JavaScript

I am currently in the process of developing my first website. I have created a new HTML design that will serve as a ticket for the site. This ticket will be loaded from the main page when users click on the "See Ticket" button. The HTML file contains a tab ...

javascriptjqueryhtmlajaxjson

Steps for creating a scrollable pane in Internet Explorer

I'm working on creating a new HTML template that features a header that remains fixed at the top of the screen, a footer that stays at the bottom, and the remaining space for text with a scrollbar when needed. The code below functions correctly in Fi ...

htmlcssinternet-explorerscrollbar

Use PHP to open a text file and display its contents in a textarea

I have a textarea on my website and I'm trying to figure out how to populate it with the content of a text file. I followed a tutorial that guided me through writing some code, but when I implement it, I'm facing an issue where the words from the ...

phphtmltextfopenfread

At what point is the rendering process of ng-switch completed?

I am currently utilizing ui-router and facing a challenge in instantiating a widget that requires a DOM element specified by its id as a parameter. The specific DOM element is nested within a <div ng-switch>, and I need to ensure the widget construct ...

javascripthtmlangularjsangular-ui-routerng-switch

Having trouble with the functionality of the cascading menu?

I am having trouble with a drop-down menu. The first level works fine, but I can't seem to get the second level of the menu to display. Appreciate any help you can offer. Thank you. javascript <script type="text/javascript"> $(document).ready( ...

javascriptjqueryhtmlcss