Enhancing your Vue web application with Bootstrap: A guide to customization

Utilizing bootstrap-4 within my Vue web application has been challenging. I am unable to customize it as explained here.

My index.html utilizes Bootstrap CDN, as shown below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Sample</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

    <link rel="stylesheet" href="/static/custom.scss" type="text/x-scss">  ==> where I am overwriting variables
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="app"></div>

    <script src="/dist/client-vendor-bundle.js"></script>
    <script src="/dist/client-bundle.js"></script> -->
  </body>
</html>

Attempting to change the order of custom.scss and bootstrap.css in index.html did not yield the desired result.

Below is custom.scss, where I am trying to overwrite variables:

$body-bg:    #f5f5f5;
$body-color: #f5f5f5;
$enable-flex: true;

Unfortunately, these changes are not taking effect.

I also attempted importing this in my app component, as shown below:

<style lang="scss">
  @import 'custom.scss';

  // The following adjustments also did not produce the desired outcome
  $body-bg: #333;
  $body-color: #999;  
</style>

How can I successfully overwrite these variables to customize my web application?

csstwitter-bootstrapvue.jsbootstrap-4twitter-bootstrap-4

Answer №1

If you're looking to streamline your code, consider utilizing the npm package along with customizing webpack.

Begin by installing bootstrap into your project:

npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284a47475c5b5c5c4a445e5f1b010d010e4c5752454b4805070f">[email protected]</a>

Ensure that you have sass-loader available for your components:

npm install sass-loader node-sass --save-dev

Next, navigate to your webpack config file and insert a sassLoader object with the specified configuration:

sassLoader: {
    includePaths: [
        path.resolve(projectRoot, 'node_modules/bootstrap/scss/'),
    ],
},

projectRoot should point to the directory leading to node_packages from your location. For example: path.resolve(__dirname, '../')

You can now incorporate bootstrap directly into your .vue files, and webpack will compile it by including the following:

<style lang="scss">
  @import "bootstrap";
</style>

For customization, start by importing the bootstrap _variables first. Then, make your customizations as needed:

@import "_variables";

// example customisation - it's advised to import a separate file for easier organization
$body-bg: $gray-dark;

// add your customizations above the following import of bootstrap
@import "bootstrap";

By following this method, you can eliminate any unused bootstrap components. Instead of importing the entire bootstrap library, pinpoint the specific components you require by navigating to the file at 

node_modules/bootstrap/scss/bootstrap.scss
and selecting which @imports to include. This optimization can enhance your project...

Answer №2

I successfully implemented the following approach:

  • I cloned the bootstrap repository
  • Adjusted _custom.scss in this specific directory.
  • Executed npm install
  • Executed grunt dist as described in the documentation
  • Copied the generated bootstrap CSS and JS files from here to my index.html

Therefore, my index.html now includes:

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

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script href="/static/bootstrap.js"></script>

At this moment, I believe that customizing is not feasible when utilizing the CDN link of bootstrap.

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

Arranging Tabs in an Uneven Stack: jQuery and CSS

Looking to stack 5 tabs on mobile with the odd tab at the top instead of the bottom? Currently set to 50% width and floated left, but they fill up the top first. <div class="tab-row"> <button class="tab active">A</button> <button ...

jquerycsstabs

Tips for Passing Parameters to Vuex mapActions correctly:Executing mapActions in Vuex requires a specific

I am facing an issue with my ProjectPage.vue where I display project issues in a v-data-table. The projects are fetched from a server API call in the sidebar and displayed there. Once I select a project, I want to use its id to retrieve its corresponding i ...

javascriptvue.jsvuejs2vuexvuex-modules

Tips for effectively incorporating global CSS into a Nuxt3 and Vite project?

I am facing a challenge with integrating global sass into my project efficiently. There appear to be two popular methods for adding CSS in a project. vite: { plugins: [svgLoader()], css: { preprocessorOptions: { scss: { ...

vue.jssassnuxt.jsvuejs3vite

Avoid inputting numbers and special characters

In my coding work, I have crafted a function that detects the key pressed by the user through an event. NameValidation(e){ if(!e.key.match(/^[a-zA-Z]*$/)) { e.key = ''; console.log(e.key); } }, This function essentia ...

javascriptvue.jsdom-events

React - z-index issue persists

My React App with Autocomplete feature is almost complete, but I need some assistance to double-check my code. https://i.stack.imgur.com/dhmck.png In the code snippet below, I have added a search box with the className "autocomplete" style. The issue I a ...

javascripthtmlcssreactjs

What could be causing my Bootstrap datepicker to malfunction?

A while ago, my Bootstrap datetimepicker component was functioning perfectly in my code. However, it has suddenly stopped working and I am seeking assistance to get it running smoothly again. Below is the HTML code snippet: <script src="https://cd ...

javascripthtmltwitter-bootstrapdatetimepicker

What is the best way to display my menu bar when the icon is hovered over?

I want to create a menu bar similar to the one found on . I am unsure of how they achieved this effect, but it seems to involve a scroll-over action. However, when I attempt to replicate it, the words still appear even when the menu bar is collapsed. < ...

htmlcssmenubar

Replace the css variables provided by the Angular library with custom ones

Having an angular library with a defined set of css variables for colors applied to components, which are globally set like this: :root { -color-1: #000000; -color-2: #ffffff; ... } In my application utilizing this library, I need to override ...

htmlcssangular

The Bootstrap tab feature is malfunctioning when a tab is using data-target instead of href

While developing bootstrap tabs for an Angular app, I decided to use the data-target attribute instead of the href attribute to avoid any interference with routes. Here's a snippet of how I structured the tabs: <ul class="nav nav-tabs" id="myTab"& ...

javascripthtmlcsstwitter-bootstrapangularjs

The fixed table header is covering the navigation bar

Currently, I am building a website using Bootstrap and the DataTables library. The problem I am encountering is that the sticky table header is working fine, but it overlaps with the sticky nav bar. Is there a way to make the navbar "push down" the table h ...

htmlcssdatatablesbootstrap-5

Creating a Sudoku puzzle grid with HTML and CSS - a step-by-step guide

Apologies for the basic inquiry, but I have created a sudoku grid with the following structure. Modified(Using Tables): <table id="grid" border="1" style="border-collapse: collapse;"> <tr class="row"> ...

htmlcss

Is it possible to scroll only a portion of a div element without relying on absolute positioning and when the

HTML: <div class="block"> <div class="header">Some text</div> <div class="content"> <p> Unique content goes here. </p> <p> More unique content for demonstration ...

htmlcss

What causes these images to stack on top of one another rather than align in rows? [HTML][CSS][Bootstrap]

I've implemented Bootstrap's grid system to showcase two rows, each containing two images. Here is the code: <section class="container"> <div class="row"> <figure class="column-sm-6"> <p>floor pl ...

htmlcssbootstrap-4

Utilizing VUE with Socket.io or vue-socket.io Integration

I've been working on connecting using socket.io (client) and websocket.org (server) with vue.js. Despite going through all the examples, I can establish a connection to the socket but when I emit the event BOARD_ID, I don't receive any response. ...

javascriptvue.jssocketswebsocketsocket.io

Mastering the art of customizing jQuery Mobile skins

Just landed a front end developer role at a prominent bank where I'll be focusing on the UI using jQuery Mobile. I'm looking for a comprehensive page that contains all the assets of jQuery Mobile to streamline the skinning process. Any leads? ...

jqueryhtmlcssmobile

Tips on how to achieve a 50% width within a bootstrap input group

Need help setting the width of a select tag <div class="input-group"> <select class="form-select" style="width: 50%;"> <option selected value="dummy">Dummy</option> <opt ...

cssbootstrap-5

Utilizing the validator in Vue with the setup script, TypeScript, and the composition API

While working on some code from a tutorial, I came across the challenge of implementing a validator in a similar fashion to the example provided. My task involves utilizing the script setup, typescript, and the composition API. props: { image: { ...

typescriptvue.jsvue-composition-apivue-script-setupvue-validator

Getting access to props within a child component's mounting phase

It is commonly understood that when the child component is mounted before the parent component, trying to access props in the child component's mounted period will result in null. However, I recently came across a scenario where props were successful ...

javascriptvue.jsvue-props

What is the technical process behind conducting A/B testing at Optimizely?

I'm currently experimenting with Google Analytics and Content Experiments for A/B testing on my website, but I'm encountering some challenges in making it seamless. To utilize the Google API properly, a few steps need to be taken. Firstly, I nee ...

javascripthtmlcssgoogle-analytics-apiab-testing

Replace the Vue loading spinner with either bars or dots in a Laravel Vue.js project

After following the reference provided below and successfully implementing it in my project, I encountered an issue. I would like to change the loading animation from a spinner to either dots or bars. Currently, I am getting the default spinner as the outp ...

phplaravelvue.js