Tips for integrating Less and Bootstrap in an Angular 6 project

After making changes to angular.json to use less as the styleext, I tested it by creating a component. However, now I want to incorporate Bootstrap classes into my component's css/less. I specifically want all buttons in my component to have the .mx-1 class.

In my less file, I added:

.btnmx-1{
   .btn();
   .mx-1();
}

Unfortunately, this did not work as expected. I also tried importing Bootstrap's css file:

 @import "../../../../node_modules/bootstrap/dist/css/bootstrap.min.css";

.btnmx-1{
   .btn();
   .mx-1();
}

However, this also failed to compile with the error message: .btn is undefined

Can anyone help me fix this? I need to ensure that all buttons in my component inherit the margin left and right of 1px from Bootstrap.

Answer №1

Using Bootstrap:

npm install bootstrap --save

Update angular.json:

  "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],

For less:

Replace css with less for the file type.

comp.component.less

Update angular.json with:

Change the value of defaults.styleExt to less.

Answer №2

My approach to incorporating bootstrap into my project

  1. Firstly, I download the bootstrap Source files from this link: https://getbootstrap.com/docs/4.0/getting-started/download/
  2. Next, I create a styles folder in my project and copy the scss folder from the resources, then rename it to 'bootstrap' for clarity.
  3. I proceed to create my custom mixin and import it into the bootstrap.scss file, placing it below all existing imports.
  4. Finally, I import the bootstrap.scss file into style.scss (or in angular.json).

For my needs, I only utilize bootstrap utility classes such as padding, margin, headings, etc., so I keep these files in my bootstrap scss folder: https://i.sstatic.net/5F3Tn.png

If you require the full functionality of bootstrap, you can choose to keep all modules or remove certain ones that rely on bootstrap javascript to function, such as carousels.

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

Ways to fix the error: The _AppComponent component is not designated as standalone, however, Angular anticipates having a standalone component here

Currently, I am in the process of upgrading my project from Angular 9.1 to Angular 18.1. However, I am facing a compilation error that reads: NG0907: The _AppComponent component is not marked as standalone, but Angular expects to have a standalone compone ...

Is it possible to integrate ngx Pagination with Bootstrap?

Is it possible to integrate Bootstrap's pagination with ngx Pagination? I'm interested in using the functionality of ngx Pagination but styling it with the CSS from Bootstrap. ...

Issues with FormArrays containing nested FormGroups

In my reactive form, I am using a FormArray to store FormGroup elements. Despite researching and trying various approaches, I still cannot determine why it is not functioning correctly. I have combined two simplified examples based on documentation and on ...

Angular2 emitter does not function properly when using classes in different files

The code provided in this Plunker is functioning well, even when modified with subscribe in the beta version 50. However, it fails to work when the classes are placed in separate files and exported. Is there a way to store the classes in separate files a ...

The CSS3 feature is not compatible with the Android browser, causing issues with loading responsive CSS

Currently, I am conducting testing on my website across various mobile devices. So far, the site functions perfectly on iOS devices but encounters issues when viewed on Android devices - it appears zoomed in and fails to be responsive. Within the <head ...

Exploring JavaFX and FXML TreeTableView customization for column and header styles

I've been working on a JavaFX project and I'm having trouble customizing the style of the TreeTableView header or columns, like changing the color, width, font size, etc. I've tried using various codes like these but none seem to work. ...

employing iframes dynamically to overlay a webpage

I inserted this iframe into a webpage <iframe src='http://redbug.redrocksoftware.com.au:80/Pages/chamara.html' style="position:absolute;z-index:1;" ></iframe> The chamara.html page has a button that, when clicked, should cover the c ...

Dynamic row insertion in Angular Material table during sorting操作

I utilized Angular material to create a table which looks like this: <mat-table #table [dataSource]="dataSource" matSort> <ng-container *ngFor="let item of displayedColumns; let i = index" cdkColumnDef="{{getColumnName(i)|Formater:'clean&apo ...

The current moment locale setting does not appear to be correctly updating the locale on

Having dates in different cultures (e.g. 19.10.2020 (German) 2020/10/19 (English)), I need to standardize the format as en-US (YYYY-MM-DD) when saving to the database. This is the approach I've taken: // Function to convert any date locale (e.g. fr ...

Setting a border on a specific column in ag-grid is a simple task that can help you customize

I have a table where the first set of columns differs from the rest. I am looking to emphasize this distinction by adding a vertical border on the right side of the specific column to highlight it both in the header and rows. Our setup includes using the ...

"Encountering issues with Angular2's FormBuilder and accessing nested object properties,

As I dip my toes into TypeScript and Angular2, I find myself grappling with a nested object structure in an API. My goal is to align my model closely with the API resource. Here's how I've defined the "Inquiry" model in TypeScript: // inquiry.ts ...

Incorporate a CSS framework into the Angular vendor bundle

My current situation : The website is built with Angular 4 Started using Angular Starter Kit Utilizing Semantic UI as the CSS framework The challenge I'm facing : Integration of Semantic UI into webpack is not having any impact. Steps I've ...

Having difficulty resolving all parameters for the component: (?, [object Object]) in the Jasmine component Unit Test

While defining a UT for a component with an extended class using i8nService and ChangeDetectionRef, I encountered an error preventing me from instantiating it: Failed: Can't resolve all parameters for BrandingMultiselectComponent: (?, [object Object] ...

Ways to create a vertical bottom-up tree view using d3.js

I am trying to create a reverse tree view, starting from the bottom and moving up. What modifications do I need to make? Here is the link to my JS Fiddle: ...

Reset combobox to its default value when a different event happens

In my Angular 6 application, I have a reusable/shared component for a dropdown as shown below: <shared-dropdown-list-payments [valuesArray]="cashAccountLoaded" [defaultString]="defaultFromString" (outputEvent)="fromAccount($event)" tosca-id=" ...

Ways to create gaps among the links in the Bootstrap 4 navigation bar?

I recently put together a Bootstrap 4 navbar and now I'm looking to increase the spacing between the items on the right side of the navbar. <nav id="menu" class="navbar navbar-expand-md sticky-top"> <div class="site-branding navbar-brand c ...

Is it possible for me to offer a service for a nested modal dialog component without replacing the existing service that already has the same token provided

Imagine I inject service 'Z' into component 'A', and from there it spawns a dialog component 'B' that also needs access to service 'Z'. If the service 'Z' needs to be a fresh instance in component 'B&a ...

Angular: Variable `app` has not been defined

I am working on a simple MEAN stack app and it is almost up and running, but I encountered an uncaught reference error when it tries to redirect to the index page. The server seems to be running fine and the browser displays "Loading..." as expected on the ...

Ensuring a DIV remains fixed in place for a specific number of scrolls

I'm looking to create a 'Page section' that remains in place while scrolling for a specific distance and then smoothly transitions to the next section. I've attempted to implement this within the child theme without success... Any sugge ...

Using Jquery to toggle classes between "display block" and "display none

Hello friends, I'm in need of some help with my code. $(document).ready(function() { var circle = $('.circle'); $(".send a").click(function(e) { e.preventDefault(); $('.wrap').css('display', 'bl ...