Angular 6 seems to be having issues loading Bootstrap

I've run into an issue while trying to incorporate Bootstrap into Angular 6. I have already installed Bootstrap using npm install bootstrap and added it to angular.json, but it's still not functioning. Is there something else I should be doing? Additionally, I am utilizing SASS - could that be causing any conflicts?

Below is the snippet from my angular.json file:

    {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1,
      "newProjectRoot": "projects",
      "projects": {
        "test-itau": {
          "root": "",
          "sourceRoot": "src",
          "projectType": "application",
          "prefix": "app",
          "schematics": {
            "@schematics/angular:component": {
              "styleext": "scss"
            }
          },
          "targets": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist/test-itau",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.app.json",
                "assets": [
                  "src/favicon.ico",
                  "src/assets"
                ],
                "styles": [
                  "src/styles.css",
                  "./node_modules/bootstrap/dist/css/bootstrap.min.css"
                ],
                "scripts": []
              },
//more code...
javascriptcssangulartwitter-bootstrapbootstrap-4

Answer №1

Although the reason for why that doesn't work is unclear, there are several methods you can try to incorporate bootstrap themes into your website.

One option is to utilize a CDN by adding a link element to the head section of your index.html file.

Alternatively, you could follow the approach taken by Angular material and import the theme from your src/styles.scss file. Here's an example:

@import '~bootstrap/dist/css/bootstrap.min.css';

Edit: Check out this working example

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

Transform nested entities into a single entity where any properties that are objects inherit from their parent as prototypes

Exploring a new concept. Consider an object like: T = { a: 2, b: 9, c: { a: 3, d: 6, e: { f: 12 } } } The goal is to modify it so that every value that is an object becomes the same object, with the parent object as prototy ...

javascriptprototype-chain

horizontal Bootstrap Image Gallery

I'm having an issue with Bootstrap Thumbnails. Currently, my thumbnails are stacked vertically like this: img01. However, I want them to be in a horizontal layout. What should I do? This is my code: HTML: <div class="hrs" align="center"> ...

htmlcsstwitter-bootstrap

Ways to adjust .keyup based on the presence of a variable

I am currently in the process of constructing a search form that utilizes an ajax function within .keyup, which may have various arguments. I aim to determine if a specific argument should be included based on the presence of another value. Here is my curr ...

javascriptjquery

Utilizing Angular 2 for dynamic CSS binding: manipulating style.width and style.height properties

I am experiencing some unusual rendering issues when using plain HTML5 canvas and CSS binding with A2. Can anyone please explain the difference between the following code snippets: <canvas height="400" width="1200" #background> </canvas> AND ...

csshtmlangularcanvashtml5-canvas

Implementing Dynamic Styling Using Parent Component in React Native

I am facing an issue with a <Text> component that is receiving a style through props... TextFile.js: <Text style={styles.text}> This is a line of text and this might be a second line </Text> screenFile.js: <View style={styles.v ...

javascriptreactjsreact-native

Ensuring the bottom border of an element extends to the edge of the screen when utilizing a 960 grid in HTML/CSS

I am currently working on creating a website layout using the 960 grid system developed by Nathansmith. I am facing an issue in extending the bottom border of an element to reach till the end of the screen while keeping the element inside a container div. ...

htmlcsspush960.gs

Transitioning the existing application from iOS Cordova's UIWebView to WKWebView requires disabling asynchronous JavaScript execution in order to maintain functionality

Previously, in one of our older examples for saving data, we had successfully used the following code in cordova UIWebview without any issues: var filenameID; function getFilenameID() { $.ajax('/jquery/getdata', // request url { success ...

javascriptioscordovabackbone.jswkwebview

The cannon-es program experiences crashes every time two Convex polyhedrons collide with each other

Currently, I'm working on implementing a dice roller using three.js and cannon-es. Everything runs smoothly when there's only one dice, rolling against the ground plane in a satisfactory manner. However, the trouble arises when I add a second di ...

javascriptthree.jscannon.js

When you hover over the Dropdown Menu, the Hoverable Dropdown Menu will automatically close

I am currently working on creating a dropdown menu that pops up when hovering over an item. However, I am facing two challenges: Once my mouse moves away from the item, the dropdown disappears. Therefore, I would like the dropdown to remain visible as lo ...

htmlcss

The Dilemma of using forRoot() in Angular 2/4+ Shared Modules

After uncovering the treasure that is forRoot() while delving deeper into Angular dependency injection (DI), I find myself pondering on the best practices for its usage. I came across this method when trying to enable a lazy loaded module to access a serv ...

angulartypescriptrxjsangular-servicesangular-module

Learn how to toggle multiple class elements with jQuery, and how to hide the ones that have

This is an example of my HTML code: <h4 class="list-group-item-heading"> @Model.Customer.FirstName @Model.Customer.LastName wrote: <span class="right"><span class="icon-file padding-right link"></span></span> </h4& ...

javascriptjqueryhtml

Reducing the Distance Between Columns in Bootstrap 4

I am currently working on embedding two websites onto my own website. The idea is to showcase these websites side by side within a custom-sized iframe that adjusts responsively based on the viewport size. To achieve this, I am utilizing Bootstrap 4's ...

htmlcssbootstrap-4

Trouble with jquery/ajax form submission functionality

I followed a jQuery code for form submission that I found on various tutorial websites, but unfortunately, the ajax functionality doesn't seem to be working. When I try to submit the form, nothing happens at all. I've tried troubleshooting in eve ...

javascriptphpjqueryajaxforms

Trouble updating document with MongoDB updateOne when using ID as filter

I need to update a property value of a specific document by sending a request to my NextJs API using fetch. // Update items in state when the pending time in queue has passed, set allowed: true items.map((item) => { const itemDate = new Date(item.adde ...

javascriptmongodbnext.js

Increasing the width of a line to fill the entire space using CSS properties

Seeking alternative ideas to replace my current solution using only CSS for one of the problems. I already have a working JS solution, but I'm interested in exploring a CSS-only approach. https://i.sstatic.net/PQ7er.png A) All elements here have the ...

htmlcssfluid-layout

jQuery automatic slider for seamless transitions

I am in need of assistance with the coding for a website I'm currently constructing at www.diveintodesign.co.uk/ChrisMcCrone/index.html The coding being used is sourced from http://jquery.malsup.com/cycle/ The central large image functions as a slid ...

javascriptjqueryhtmlcss

What is the process for retrieving the parent component from projected content?

One interesting aspect to explore is the varying behaviors of input based on its 'parent' element. The structure I am referring to is as follows: In my first example, the input is nested within the app-chip-list component. APP COMPONENT HTML & ...

angular

Utilizing Jquery's Selectable IDs in a repetitive manner

I'm a newbie to jQuery and I'm attempting to create two lists where each item can be selected. Check out my code: <!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI s ...

javascriptjqueryhtmllistjquery-ui-selectable

When comparing strings, if they match, replace them with bold text

Today, I faced a challenging brain teaser that kept me occupied for over an hour. The task at hand is to compare two strings: the text input from the field and data-row-internalnumber. The goal is to determine if they match and then bold only the last let ...

javascriptregexstringreplace

Splitting a row into four columns that will appear consistent on mobile devices

Is it possible to create a row with 4 columns in Angular 6, but have it display as 2 rows with 2 columns each on mobile devices? <div class="row" id="info" *ngIf="this.details"> <div class="col-md-12 mb-3" id="heading"> <h3>Meeting ...

htmlangularbootstrap-4angular-material