Issue with Bootstrap 4 Grid Layout System

Recently delved into the world of Bootstrap 4 and its responsive grid system. Everything seemed to be going smoothly with my columns and resizing windows, until I encountered an issue on xs screensize where all columns automatically spanned 12 instead of 4-4-4 as intended. Despite scouring the internet for a solution, I have come up empty-handed. Any help would be greatly appreciated. It's strange that my closing html tag isn't displaying.

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

            <div class="container">
                <div class="row">
                <div class="col-xs-4 col-sm-8 col-md-12 col-lg-4 box1">1</div>
                <div class="col-xs-4 col-sm-2 col-md-6 col-lg-4 box2">2</div>
                <div class="col-xs-4 col-sm-2 col-md-6 col-lg-4 box3">3</div>
                </div>
            </div>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-
        KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
        <script 
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper
        .min.js" integrity="sha384-
        ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
        crossorigin="anonymous"></script>
        <script 
        src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.
        js" integrity="sha384-
        JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
        crossorigin="anonymous"></script>
javascripthtmlcssbootstrap-4grid-system

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

Detecting drag events between connected angular ui-trees is a complex yet achievable task

How can I trigger an action when an item is dragged from tree#1 to tree#2 and dropped? I want to make a specific HTTP call to save the transferred item. I have successfully implemented actions within one tree using the 'dropped' event, but strugg ...

javascriptangularjsangular-ui-tree

How does Firefox still autocomplete even with a different input label?

How does Firefox decide where to autofill passwords and usernames? I've noticed that even after changing the name, id, title, or class of an input element, Firefox still automatically fills it with my password or email address. ...

htmlfirefoxautocomplete

The menu was intended to be hidden when the mouse is moved away, but it actually hides

I'm facing an issue with my button and menu functionality. Even though I have coded the menu to hide itself when the mouse leaves, it hides before the mouse even goes over it. Any suggestions on how to resolve this? function showMenu() { var menu ...

javascriptjqueryhtmlcss

"Double the Data: A D3.js JSON Tale of Two Creators

I found inspiration from this example: http://bl.ocks.org/mbostock/1062288 to create a collapsible Force Layout. One challenge I'm facing is how to display a graph where a single node is connected to two parent nodes. father father | | ...

javascriptjsond3.jsforce-layout

How can I prevent text highlighting on a website?

Is there a way to lock the copy button on my site without restricting the save as button, which is activated by right click? I want users to be able to save the website as an HTML file, but prevent them from copying text. Can this be achieved using Javas ...

javascripthtmlcsslockingsites

Utilizing Host Styles in Angular2 Components

In the midst of developing a custom form component for my Angular project, I am facing challenges with styling. I wish to allow variable widths for the input element and have them controlled by the host component. For instance: <my-input class="input" ...

cssangular

How can we reduce the use of !important in SCSS when working with React and Material UI?

In my current project, I am developing a Select component in React with Material UI. The CSS styling for the component is managed through an external SCSS sheet imported into the script file. While working on restyling the component, I found it challengin ...

cssreactjssassmaterial-ui

glitch in three.js game movement mechanics

After spending some time fine-tuning the camera movement in my three.js project, I am now ready to introduce movement. Initially, I attempted to use camera.translateZ(movementSpeed), but this caused the camera to fly, and I want to constrain the movement t ...

javascriptmatrixthree.jsquaternions

Accessing objects within an array of arrays of objects in react – a guide

First, I executed the following function: const getData = async (array,s,number) => { const response = await axios.get(s); const theData = response.data array[number]=theData } Then, I did this: let array=[] ...

javascriptreactjsarraysobject

The callback for the changed event in gulp fires ahead of the watch tasks

I'm having an issue with the sequence of tasks running in my file watching code. Although I have specified that the 'build-dev-mainjs' task should run first, followed by $.livereload.changed, it seems to be happening in the opposite order. ...

javascriptbuildgulp

When the jquery loop fails to function

I need to dynamically add a class to a specific tag using jQuery depending on an if condition. Here's the code snippet: if ($(".asp:contains('Home')")) { $("ul.nav-pills a:contains('Home')"). parent().addClass('active ...

javascriptjqueryhtml

Issues with CSS styling are affecting the display of a form

Hey there! I was working on creating an order form for my website, and everything was going smoothly until I hit a snag while styling the webpage. The problem is that the legends of the form are extending all the way to the right side of the page, and the ...

css

The method this.$el.querySelector does not exist

The data retrieved from the database is inserted into the input fields and submitted as a form. This data is an object that passes the value to the database. However, when I trigger this form, an error occurs. See example of the error <input id=" ...

javascripttypescriptvue.js

The ion-slide-box does not update after the active-slide has been changed using $index

I'm currently facing an issue with the controller that corresponds to this specific view. .controller('MenuCtrl', ['$rootScope','$scope','$state','$timeout','$ionicSlideBoxDelegate', functio ...

javascriptangularjsangularjs-directiveionic-framework

Central peak in an expansive sphere

I'm attempting to mimic the design shown in this visual representation: While I am familiar with how to generate a semi-circle using CSS, my goal is to only create the top central segment of a larger circle. Specifically, I am seeking the CSS code n ...

css

Ways to transform a 4-column CSS table into a 2-column layout for mobile and tablet viewing

For my latest project, I am faced with the challenge of creating a responsive table that transforms from 5 columns to 2 columns on smaller screens. While using complex jQuery is an option, I prefer a more semantic approach. Additionally, I need to incorpor ...

htmlcsshtml-table

Provide the option to assign values on select options in order to choose specific JSON data

When working with JSON data from an API, I am creating a dynamic select element. The goal is to change some content (text and image src) based on the option selected from this select element. I have successfully populated the select options with names usi ...

javascripthtmljsonapi

The element referenced by `$(this)` in jQuery seems to be

I have multiple forms on a single page that are very similar in structure. Some of the forms contain elements with a css class that triggers an onchange event handler. This is in an ASP.NET MVC environment. $('.check-changes').on('change&apo ...

jqueryasp.net-mvcbootstrap-4

Using third-party libraries like jQuery, CSS, and JavaScript in your React project by directly importing them into the index.html file can be a more efficient approach compared

When working with React, is it advisable to import external JavaScript, jQuery, and CSS files into the index.html file in the public folder? Are there any potential performance implications associated with this practice? I have utilized some jQuery functi ...

javascriptreactjsnpmcoding-styleexternal-links

React Alert: Please be advised that whitespace text nodes are not allowed as children of <tr> elements

Currently, I am encountering an error message regarding the spaces left in . Despite my efforts to search for a solution on Stack Overflow, I have been unable to find one because my project does not contain any or table elements due to it being built with ...

javascripthtmlnode.jsreactjsvalidation