What is causing the malfunction in my bootstrap navigation bar?

After manually downloading Bootstrap from http://getbootstrap.com/ version 4.0, I encountered issues with the navigation, XS, and panel classes not working as expected. Despite searching for "xs" in boostrap.min.css, it was not found. This has caused frustration as some classes are functioning correctly (sm, md, lg) while others are not. I have spent the past three weeks trying to resolve this problem without success. Can anyone provide a solution? Here is an excerpt of my code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-compatible" Content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

</head>
<body>


<div class="navbar navbar-default" role="navigation">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="fa fa-align-justify"></span>
            </button>
            <span class="navbar-brand">Diffie</span>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
                <li><a href="#">Link5</a></li>
            </ul>
        </div>

    </div>
<div class="container">



    <div class="row">
        <div class="col-sm-6">
            <p class="hidden-xs"><b>AAA Ipsum is simply dummy text of the printing</b> and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>

        <div class="col-sm-6">
            <p>AAA Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>      
    </div>

    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div>

        <!-- Additional rows and columns go here -->

    </div>
</div>

</body>
</html>

Answer №1

The latest version of bootstrap, 4.0, has removed the use of -xs. Now, using just col-2, or any other appropriate classes, should yield similar results.

According to information from the official bootstrap website:

...the -xs infix has been eliminated from our smallest (extra small) breakpoint. xs is not a responsive breakpoint like sm, md, lg, and xl because it does not start applying styles at a minimum width. It simply applies globally as there is no specific @media query for it.

Answer №2

It seems like you might have overlooked including a bookstore in the header:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

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 closing a sidecart by clicking outside of it

I am currently exploring how to implement the functionality of closing my sidecart when I click outside of it. Below is the script I am using: const toggler = document.getElementById('menu-toggle'); const cartWrapper = document.getElementById( ...

Arranging divs in a stack and implementing a toggle function for displaying and hiding them

I am currently enrolled in a web development course and am eager to explore beyond the limitations of the class. I successfully created a jQuery slide show in one div, and now I want to showcase additional features in two other divs, stack them together in ...

Alignment issue with reCAPTCHA box detected

Why can't I seem to align the reCAPTCHA form properly on my registration page? Even though the div it is within has its text-align property set to center, the form still displays on the left side of the page: However, when I use JavaScript to chang ...

Is there a way to make the right column stay fixed in the bootstrap-vue table?

How can I achieve fixed columns on both the left and right sides of a bootstrap-vue table? The Sticky function in the documentation only supports fixing columns to the left. Is there a way to also fix the right side or last columns? I am looking for a sol ...

Achieve the hidden div scroll effect in React by initially hiding the div and then allowing

I am currently working on a web chat application using next.js. One of the features is an emoji picker button that, when clicked, displays a menu of emojis. The issue I am facing is that in order for the user to see the emoji menu, they have to scroll down ...

Remove the formatting on the entered text

Hi, I'm looking to change the style of my input text to a strike-through style. Can anyone help me with this? <input type="text" value="<del>Hello World!</del>" /> I would like my input text to look like this: ...

Adding Information to a Material Design Card

Currently, I am delving into frontend development and honing my CSS skills. In my latest project, I have incorporated a mat card which can be viewed in the linked image https://i.sstatic.net/TEDcg.png. Below is an excerpt of my code: <div class=&quo ...

Struggling to properly set up the hamburger and close icons

When the menu appears on the right side with right: 0;, I change it to right: -200px; when closing it so that the mobile page does not show the menu on the right. My goal is to display the fa-bars symbol when the menu is closed (right: -200px;), and the fa ...

Is it possible to trigger a reflow prior to initiating a lengthy JavaScript operation?

Ready to face the criticism, I understand that this question has been asked many times before, and I am aware that there are likely more efficient ways to achieve what I'm trying to do... In a JavaScript function, I have a process that can take up to ...

CSS: elements that are only visible when positioned above specific elements

Can we create an element that is only visible above specific other elements? For instance, in the following code snippet, I want the .reflection element to be visible only above the .reflective elements (located at the top and bottom) and not visible on t ...

How to create the appearance of multiple line breaks using CSS

While pondering a question, I stumbled upon a humorous solution that wasn't quite finalized. Check out the Fiddle and attempt to remove the <br/> tag. The challenge is to achieve the same effect (red div displayed) without resorting to this ra ...

After applying the cellClass in ng-grid, the row border mysteriously disappears

After applying cellClass to color an entire column, the row border disappears. Here is a link to the Plunker demonstration: http://plnkr.co/edit/4IeQQBTIe8sgHVEBUTAp?p=preview. Does anyone have a solution for this issue? ...

Adjust the size and orientation of an image according to the dimensions of the window and the image

As I delve into HTML and Javascript, I am facing a challenge with resizing an image based on the window size. The goal is for the image to occupy the entire window while maintaining its aspect ratio during resizing. Additionally, if the window size exceeds ...

Child element casting shadow over parent element

I am currently using box shadow for both the parent (.map) and child (.toggle-button): .map { position: fixed; top: 20px; right: 0; width: 280px; height: 280px; z-index: 9999; box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3); } .map ...

What is the best way to create a CSS style sheet that will swap out the computer image for a cat image as the background?

I'm having trouble with the header appearance on my website. How can I set the smartcat.png image as the background for the header only? My goal is to include the solution in my "cat.css" stylesheet. Any suggestions or best practices for coding with ...

I need to show a DIV element when a specific anchor is in an active state within an HTML document

Is there a way to make the code below only visible when the url ends with #404? <!--404 code--> <style> .div1 { width: 300px; height: 100px; border: 1px solid blue; border-color: #ff0263; box-sizing: border-box; } < ...

Node-modules CSS

In my React application, I am utilizing CSS modules. By configuring modules:true in my webpack.config.js, I can successfully apply styles from files within my src folder. However, when importing components from node-modules, the corresponding CSS is not be ...

My navigation bar logo is occupying a significant amount of real estate

While creating an HTML page using Bootstrap, I encountered an issue with the navbrand being too long. It occupies a significant amount of space in my navbar, especially on mobile devices where it takes up an entire line, causing the hamburger icon to move ...

Ways to create spacing between vertically stacked columns in Bootstrap

I have created a website using Bootstrap and PHP to display data from 18 categories in columns. The code for listing the categories in a single row is shown below: <div class="row"> <?php foreach($categories as $val){?> <div class="col ...

Hide the accordion panel that is not actively being viewed as another one opens

Looking for a way to collapse an accordion panel when another one opens using vanilla JavaScript? Specifically, the solution needs to work in IE11. I am a JavaScript beginner and would greatly appreciate any help or guidance you can offer. Thank you. va ...