The responsive class seems to be malfunctioning within the Laravel 5.3 framework

I have a project that involves Laravel and Vue.js.

In my Laravel project, I am importing Bootstrap CSS using the following line:

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

This import is done in the app.scss file.

After running npm install, I noticed that all Bootstrap classes are working fine except for the responsive classes.

I am specifically using classes from the following link: 

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

For example, to display content only on desktops, I use the class hidden-md-down.

However, when I switch to using the responsive classes from the following Bootstrap CDN link:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

The responsive classes work but other Bootstrap classes break.

If you have encountered and resolved this issue before, I would appreciate any help or advice.

Thank you

csstwitter-bootstraplaravelnpmvue.js

Answer №1

I have successfully implemented the classes provided in this tutorial

https://www.tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm

Furthermore, I have verified that it functions properly with the built-in bootstrap CSS node modules within Laravel 5.3

Answer №2

The Laravel import currently utilizes Bootstrap v3.

It seems like you are using classes from Bootstrap v4. If you prefer to stick with Bootstrap v3, you'll need to remove the @import provided by Laravel.

If you decide to go this route, you will have to manually import Bootstrap v4 by downloading the files and including them in your <head></head>, using a gulpfile, or opting for a CDN instead.

I suggest sticking with Bootstrap v3 for consistency. Simply leave everything as is, remove any current CDN links, and utilize the classes outlined in the Bootstrap v3 documentation: http://getbootstrap.com/css/

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

npm encountered an abrupt conclusion of JSON input during parsing near "serify":"latest","cha"

After uninstalling angular-cli yesterday to update to @angular/cli, I encountered an error while trying to install @angular/cli: Received an unexpected end of JSON input while parsing near '...serify":"latest","cha' Even after attempting to c ...

angularnpmangular-cli

How can I correctly connect a JavaScript library that has been installed via npm?

After using npm to install a JS library, such as: npm install chartjs The necessary JS file is typically located at ./node_modules/chartjs/chart.js. If you prefer the file to be in a different location, like ./public/js/chart.js, you could manually m ...

javascriptnode.jsnpm

Implement varying styles in React components

In my React project, I am attempting to create a unique progress bar with custom styling. Specifically, I have a dynamically calculated percentage that I want to assign as the width of a div element. Initially, I tried achieving this using Tailwind CSS: &l ...

javascriptcssreactjstailwind-css

The issue at hand is that the component is not recognized as an NgModule

I am encountering an issue with my NgModule configuration: @NgModule({ imports: [ CommonModule ], exports: [ SP21LoadingBar ], declarations: [SP21LoadingBar] }) export class SP21LoadingBarModule { } When I run the CLI, ...

angularnpmangular-cli

What is the best way to customize a div depending on the validation status of all reactive form fields within it?

I am facing a challenge with a rather complex form that contains multiple fields. Some of these fields are used to create logical blocks, and I would like to emphasize the surrounding div if any of these included fields are invalid. Can you suggest the bes ...

cssangularvalidationangular-reactive-formsstyling

What is causing the permissions in firestore to not function properly?

My custom code changed(){ let reference = db.collection('messages').orderBy('timestamp') // listen for changes to the 'messages' collection reference.onSnapshot(snapshot => { snapshot.docChanges().forEach(change => ...

javascriptfirebasevue.jsgoogle-cloud-firestorefirebase-security

What is the best way to avoid duplicating child components in conditional rendering?

Scenario I have created a custom button component using Vue: <custom-button type="link">Save</custom-button> This is the template for my custom button component: // custom-button.vue <template> <a v-if="type === &apo ...

vue.js

Interact with HTML style attribute using JavaScript

Is there a way to retrieve a specific CSS property from the style attribute of an HTML element, without considering the stylesheet or computed properties? For example: <div style="float:right"></div> function fetchStyleValue(element, propert ...

javascriptjqueryhtmlcss

Laravel, showcasing a collection in the view

$fruits = DB::select("select a.id, a.created_at, a.updated_at,a.storeid, a.itemno, a.type, a.fruit from stores a, storenames b where a.storeid = b.storeid"); return view('stores', ['fruits' => $fruits]); I executed the code ...

phplaravel

The autocomplete feature is not displaying the suggested text at the top when choosing data

Recently started using react native and I'm currently working on implementing an AutoCompleteTextView. I have a json file that contains country names which need to be displayed in the autocomplete view. Although I am able to display the names of all c ...

jsonreact-nativenpmautocompletetextview

The image sits on the edge of the container, not fully contained

.sub2 { background-color: #FFFFBF; margin-top: 30px; height: 410px; width: 100%; } h1.sub2 { font: bold 100px american captain; text-decoration: underline; float: right; } p.sub2- { font: italic 25px american captain; margin-top: -300px; ...

htmlcss

Unexpected outcome from Laravel's HasMany relationship

I am working with three tables that have the following columns: posts table id author title content seen post_img post_category table id category_id post_id categories table id category To handle post categories, I created a post_category ta ...

phplaraveleloquent

`When you run `npm help X`, you will see a list of commands that are

For instance: $ npm help prune Best matches for "prune" —————————————————————————————————————————————————————————————————— ...

node.jsnpm

I am unsure of the best method to position this using flex in Bootstrap 5

Introduction to Bootstrap 5 Challenge: Greetings! I am currently exploring Bootstrap 5 after a hiatus of two years, and I have encountered a problem. Despite reviewing the documentation on the official Bootstrap 5 website, I am unable to position the new c ...

cssflexboxbootstrap-5

Bootstrap 4's container overflowing feature

I am trying to create a container with both horizontal and vertical overflow using the "auto" value. I want the content inside this container, which will mainly consist of large tables, to be scrollable within a window. It would be ideal if this container ...

cssbootstrap-4overflow

Guide to Incorporating a Marker into an SVG Blinking Rectangular or Circular Border Image on Google Maps

I have a link that points to a specific location on Google Maps using latitude and longitude: http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png Now, I am looking to add a blinking border to this marker link. Is there a way to achieve this ...

javascripthtmlcssimagephotoshop

Selecting the initial item of every nested tag repeatedly for a total of n times

Is there a way to stop coloring elements after 'tue 7-1-1' using CSS? I am only allowed to manipulate the first child of every element up until a certain point through CSS, without modifying the existing code. Note: Span elements are nested wit ...

htmlcss

Converting the first page of the Vuepress README.doc from yaml format to markdown format document

I am struggling to locate instructions on customizing the homepage of Vuepress. While I appreciate its layout, the .yaml format is preventing me from adding links. Is there a way to include links? Or even better, can the page be converted to markdown whi ...

vue.jsvuepress

Can the underline height be adjusted when a developer uses `text-decoration: underline;` in CSS to generate an underline effect?

Can the height of the underline created using text-decoration: underline; in CSS be adjusted? I used CSS to apply an underline to the word "about" with an 'id' of '#title4' but I want to increase the space between the word and the unde ...

htmlcss

Problematic response design

On my responsive website, I am utilizing the hr tag in various places. However, I have noticed that some lines appear with different thicknesses, as shown in the example below. For a demonstration, you can view a sample on this fiddle: http://fiddle.jshel ...

htmlcssresponsive-design