Utilize only the necessary Bootstrap styles in VueJS

After setting up npm bootstrap, I decided to import only the necessary classes for my project in custom.scss:

@import '~bootstrap/scss/functions.scss';
@import '~bootstrap/scss/variables.scss';
@import "~bootstrap/scss/mixins";
@import '~bootstrap/scss/transitions.scss';
@import '~bootstrap/scss/nav.scss';
@import '~bootstrap/scss/navbar.scss';
@import '~bootstrap/scss/buttons.scss';
@import '~bootstrap/scss/forms.scss';
@import '~bootstrap/scss/images.scss';
@import '~bootstrap/scss/bootstrap-grid.scss';
@import '~bootstrap/scss/type.scss';
@import '~bootstrap/scss/media.scss';
@import "~bootstrap/scss/dropdown.scss";
@import "~bootstrap/scss/reboot.scss";

@import "~bootstrap/scss/utilities/spacing.scss";
@import "~bootstrap/scss/utilities/text.scss";
@import "~bootstrap/scss/utilities/background.scss";
@import "~bootstrap/scss/utilities/position.scss";
@import "~bootstrap/scss/utilities/sizing.scss";
@import "~bootstrap/scss/utilities/spacing.scss";
@import "~bootstrap/scss/utilities/borders.scss";
@import "~bootstrap/scss/utilities/float.scss";

@import "~bootstrap/scss/mixins/transition.scss";

But now I'm facing an issue where the navbar-collapse isn't working anymore. Can anyone suggest which file might be missing that I need to import? Any help would be greatly appreciated.

Edit: I tried importing all of Bootstrap but still no luck.

@import '~bootstrap/scss/bootstrap.scss';
cssvue.jsimportsassbootstrap-4

Answer №1

modified

The Bootstrap JS folder can be found in a specific directory structure, allowing you to utilize it in your SCSS file using the @import statement.

bootstrap/
└── dist/
    ├── scss/
    └── js/
        ├── bootstrap.bundle.js
        ├── bootstrap.bundle.js.map
        ├── bootstrap.bundle.min.js
        ├── bootstrap.bundle.min.js.map
        ├── bootstrap.js
        ├── bootstrap.js.map
        ├── bootstrap.min.js
        └── bootstrap.min.js.map

Additionally, it is essential to ensure that you have jQuery and Popper installed as they are considered peer dependencies.

npm install --save jquery popper.js.

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 Bootstrap carousel spiraled into disarray

I am facing an issue with the basic bootstrap carousel. My goal is to make the slides move every four seconds. The current setup of the carousel code is as follows: $(document).ready(function() { fixCarousel(); }); function fixCarousel() { $('.c ...

javascripthtmlcsstwitter-bootstrap

Problem with CSS Classes Styling

Having an issue with CSS in Windows Notepad: <!DOCTYPE html> <html> <head> <title>UniqueScience</title> <style> #title { display: block; ...

htmlcssnotepad

In Laravel blade, Vue components are not being loaded properly

I attempted to incorporate Vue.js into my Laravel project, but I encountered an issue. Despite following all the steps correctly, the Vue Components are not displaying in my php blade file. Below is the code for app.js: /** * First we will load all of th ...

phplaravelvue.jsnpmnpm-install

Nuxt 3: Resolving Issues with Page and Layout Transitions

I've been attempting to incorporate layout transitions into my Nuxt 3 project, but unfortunately, it's not working as expected. I even resorted to replicating the code directly from the Nuxt transition documentation, only to face another failure. ...

javascriptcssanimationvuejs3nuxt3.js

The change() function in jQuery appears to have a glitch where it does not properly execute during the initial onclick event, but functions correctly for

Here is the button code snippet: <li class="cnt-li"> <button class="btn-container" title="Add Container" data-toggle="modal" data-target=".add-ctn-modal"> <img src="images/add.png" alt="Add Container"> </button> </li> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Image Filter: Only Display Selected Images, Not All

I have designed a Filter Image Gallery where all images are initially displayed when the page loads. There are four different tabs available - Show all, Nature, Cars, and People. However, I want to change this default behavior so that only Nature filter i ...

javascriptjqueryhtmlcssimage

Leveraging Valet to host two distinct projects on subdomains through a proxy setup

Currently, I am facing a dilemma with two projects - an API built on Laravel APP and a frontend app created with Nuxt APP. My goal is to host both of these projects on the same domain using valet locally. However, I have encountered an issue where both sub ...

laravelvue.jsnuxt.jslaravel-valet

What is the best way to pull images from a Laravel server using Vue?

As a beginner in API integration, Laravel, and Vue, I am seeking guidance on creating a "Drone" using a Laravel backend server. The process involves storing images in the database with their filenames saved in the "/public/images/drones/" directory. $dron ...

laravelapivue.jsvuejs3

Creating a jQuery modal with a touch of opacity

I've searched extensively and haven't found the solution I'm looking for (likely because of my limited CSS/jQuery knowledge). So, here's my question. I am attempting to create help bubbles using jQuery dialogs with semi-transparent back ...

jqueryhtmlcss

Is there a more optimized CSS approach for this layout?

I attempted to create this layout using only CSS (no JavaScript, etc.) within an existing HTML page (without altering the HTML code). Unfortunately, I couldn't achieve all the positions that I needed. Let's see if anyone has a better idea. Thanks ...

htmlcss

Alignment of containers on the same level in a horizontal direction

Looking to achieve horizontal alignment of div containers. The container on the left (with a blue border) may have a fixed height. The other two containers (with red borders) should be aligned horizontally to the left blue container regardless of its heigh ...

htmlcsstwitter-bootstrapflexbox

Guide on configuring a monorepository for Vue ecosystem using NX

Is there a way to integrate monorepo tools like NX with Vue 3? I came across an unofficial repository that can be added to NX to work with Vue, but the support is lacking. Are there any other packages that officially support Vue and Vite integration? Here ...

vue.jsvuejs3monoreponomachine-nx

Modify the text of the "search" button in bootstrap4

Clicking the "Search" button on my website redirects me to How can I modify the URL from "search" to "my_search" in this link? I want the link to be I am using the Django web framework. The fix should also support queries from the form. My code vacanc ...

pythonhtmldjangobootstrap-4

Create a design where the logo seems to be suspended from the navigation bar using bootstrap

My goal is to achieve a navigation bar similar to the one shown in this image: Using Bootstrap 3, the code below is what I have implemented for my navigation: <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <di ...

htmlcsstwitter-bootstrap-3nav

Building a Horizontal Line Component in ReactJS

Looking for help with my login page design. I have two login buttons - one for regular login and one for Google login. I want to add a stylish horizontal line with the word "OR" between the buttons, similar to the image in the link provided. https://i.sst ...

cssreactjsmaterial-uireact-hooksjss

Count the start and end rows of a table within the <tfoot> using pdfHTML/iText 7

Currently, I am working on a project where I am developing a document generator that utilizes pdfHTML 3.0.3 and iText 7.1.14. The document includes a table displaying 'items'. It's worth noting that these item rows will likely span across mu ...

c#htmlcssitextpdfhtml

Issues with Jquery content sliders

I am really struggling with this piece of code and I just can't seem to figure out what's causing the issue. If anyone has any insight on how I can make it display a slide for 3 seconds, fade out, show a new slide, and then loop back to the first ...

javascriptjqueryhtmlcssslider

Achieve vertical scrolling within a div of a set width employing CSS

My situation involves a fixed size div that is 500px in dimensions. Inside this div, there is a smaller div. However, as the number of divs increases, it starts to display a horizontal scroll. I am aiming for a vertical scroll instead. I attempted to resol ...

htmlcssuser-interfacewebvertical-scrolling

What methods can I use to prevent columns from merging into a single column?

I am currently in the process of building a website using Bootstrap 3.1.1. The body tag is set with a min-width of 800px. The information that I want to showcase must be presented in a grid format, specifically resembling the layout of a parking lot. Dis ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

How can I ensure that the Hamburger menu fully covers the entire viewport when it is open?

My hamburger menu is fully functional using CSS alone. However, when the menu opens, it doesn't fill the entire screen as I would like. Currently, my page content appears below the open menu, creating a cluttered look. https://i.sstatic.net/EtTsr.png ...

htmlcssnavigationdisplay