Question 416199 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – Bootstrap responsive doesn't work and not recognized in devtools

I’m working on a project with Laravel Mix, Vue.js and Bootstrap 5.3

About laravel mix:

const mix = require("laravel-mix");
const path = require('path');

require("mix-env-file");
require("laravel-mix-workbox");

mix.js('resources/js/app.js', 'public/js')
   .version()
   .vue()
   .sass('resources/sass/app.scss', 'public/css')
   .sourceMaps()

About app.scss

@import "~bootstrap/dist/css/bootstrap";
... custom things

Vue.js element

<div class="card unselectable" style="overflow: hidden;" v-if="ux.viewFilters">
    <div class="p-2">
        <div class="d-flex flex-row flex-sm-column flex-row gap-2">

The problem is that bootstrap doesn’t recognize the responsive element (flex-sm-column), neither in the devtools, but I can see it in the app.css created by laravel mix

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved. The problem was that I pretended to use flex-sm-* for mobile device, misunderstanding the functionality of it. Everything's working properly.


  2. 0

    Based on the provided details it seems like you are importing incorrectly, instead do the following:
    Replace:

    @import "~bootstrap/dist/css/bootstrap";

    With

    @import "~bootstrap/scss/bootstrap";

    Since you have saas setup.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search