The toggle button appears to be lacking in CSS styling

I'm trying to create a dropdown button using Bootstrap and ng-bootstrap in my Angular project. Here's the HTML I've written:

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
    </div>
</div>

In my app.module.ts, I've included this:

imports:{
    NgbModule.forRoot()}

I've also added the Bootstrap CSS to my angular.json file.

However, the dropdown is appearing grey without any styling applied. I can't figure out what the issue might be. Could someone please assist me?

EDIT Here's the relevant part of my angular.json file:

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.css"
            ],
cssangulartwitter-bootstrap-3angular6ng-bootstrap

Answer №1

First step: proceed with the installation of @ng-bootstrap/ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

Second step: Make sure to import the ng-bootstrap package in the app.module.ts file

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [NgbModule, ...],
  ...
})
export class AppModule {
}

Note: There is no need for calling NgbModule.forRoot()

Third step: Incorporate your HTML code in the app.component.html file

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
    </div>
</div>

I have provided an example that is similar to ng-bootstrap and can be accessed through this link:
View Demo

I trust this information will prove useful to you.

Answer №2

To overcome this issue, I included the following line in my code:

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

into the /src/styles.css file.

(Make sure you have either bootstrap or bootstrap-css-only installed. To install, use the command 

npm install bootstrap-css-only --save
)

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 hover effect is implemented across all image elements

Below is the code snippet in question: #mg1 { margin-left: 3%; } #mg1:hover { margin-top: 4%; } <div id="section1"> <center> <div id="bgp"> <center> <p>THUMBNAILS</p> </center> ...

htmlcss

Ways to incorporate padding into md-card using Angular 2 material

Need assistance with adding padding to md-card in angular2 material. I am using md-card to display my product list but struggling to add padding on them. Here's what I have tried: product.component.html : <p> Product List </p> <div ...

htmlcssangularresponsive-designangular-material2

Obtaining data attributes in Angular 8

I'm working with Angular 8 and I came across an issue. In my code snippet, there are two data attributes assigned to a button element, but only one attribute is showing up. Is this a syntax error or a bug? <button [attr.data-popolamento]="all" [a ...

htmlangulartypescript

Looking for a way to style the user's selection in a Ng Bootstrap typeahead component without using resultFormatter?

I have implemented a ngBootstrap typeahead for selecting a person from a list of results. Each result, which is an object retrieved from an API, is displayed as Name + ID in the list by using the resultFormatter input. However, after clicking on a result, ...

angularng-bootstrap

The total height of an HTML element, which takes into account the margin of the element itself

Is there a way to accurately calculate the height of an element including margins, even when dealing with child elements that have larger margins than their parents? HTMLElement.offsetHeight provides the height excluding margin, while this function from ...

javascripthtmlcss

Deploying an Angular application on AWS EC2 without using nginx as a reverse proxy

Our team has been tackling the challenge of hosting an Angular application on AWS. A question has emerged: can we deploy the Angular application without relying on nginx? This inquiry arose when we successfully deployed a node.js application without any ...

angularamazon-web-servicesnginx

Implement a fadeout effect by using a timeout function that adds a class to the div element in

I implemented a loader on my webpage that animates for 3 seconds before a function kicks in to modify the styles and make it invisible. I am looking to add a fadeout effect when the 'waa' style is applied to the 'load' div. setTimeou ...

javascripthtmlcss

Angular silhouette casting on CSS fold

I am attempting to recreate this design as accurately as possible, but I am struggling with replicating the shadow effect on the right side. Is it achievable using CSS? CSS: *{margin:0px;padding:0px;} html { width:100%; height:100%; te ...

htmlcsscss-shapes

Add a symbol at the end of the input that signifies its value

I have a form field that expects a percentage as input, but I want to visually indicate to the user that they should enter a percent value. The challenge I face is that I want the percentage symbol to appear before the number in the input box, like this: ...

htmlcssreactjs

The Angular downgradeComponent feature is experiencing difficulties in its creation process

I recently set up a hybrid application using AngularJS and Angular 5 with downgradeModule. I successfully converted a small component from AngularJS to Angular, but unfortunately, it is not being created. I've added console.logs in different parts of ...

angularjsangularangular-upgradeangular-hybrid

Is there a method to initiate a 'simple' action when dispatching an action in ngrx?

Here's the scenario I'm facing: When any of the actions listed below are dispatched, I need to update the saving property in the reducer to true. However, currently, I am not handling these actions in the reducer; instead, I handle them in my ef ...

javascriptangulartypescriptngrx

Understanding the Relationship Between CSS Width and Overlapping Elements

Is there a way to make my suggestion div inherit the width of the input field while overlapping the other elements? My current CSS code achieves the overlap effect, but fails to inherit the width of the input field accurately. I have attempted setting the ...

htmlcsswidthoverlapinput-field

Cannot find a compatible version for Angular2 Installation

Having trouble installing Angular 2. I followed the quickstart guide but still can't get it to install/start. npm ERR! Windows_NT 6.2.9200 npm ERR! argv C:....\\npm\\node_modules\\npm\\bin\\npm-cli.js ...

angularnpm

I need to position the CSS vertical scrollbar on the right side of the page

I can't figure out how to move the vertical scrollbar to sit on the right side of my site's work page. Any help would be greatly appreciated. Below is the provided HTML code: <div class="heading"> <h1>PRINT</h1> &l ...

htmlcss

How can you effectively monitor changes to data within a class in Angular 2?

Within my array, I am storing instances of the User class. This array is displayed using an *ngFor directive, rendering repeated <li> elements. When a user clicks on one of these items, the details for that user are shown in a detail control. The fi ...

angular

Angular is used to send an HTTP GET request

I'm seeking assistance with implementing a get and put request in Angular. I understand how to initiate a get or put request when a button is clicked, by binding the request to the button itself. However, I am now looking for a way to trigger a get re ...

htmlangulartypescript

Using $_POST method to navigate within the same web page

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>PHP links</title> <?php echo '<div style="background-color:#ccc; padding:20px">' . $_POST['message'] . '</div>'; ...

phpjquerycsssqlajax

How can a new <li> element be created without being influenced by certain CSS styles?

I am attempting to enhance my menubar by adding a signup/login item aligned on the right without affecting the other center-aligned items. Essentially, I have an entry named "Login/Sign Up" that should maintain its own unique style while seamlessly blendin ...

javascripthtmlcss

Adding borders to div elements for mobile display

Almost done with my website homepage, but I'm noticing some pesky borders/outlines on mobile devices. This issue doesn't seem to pop up on computers, so you'll need an iPhone, tablet, or smartphone to see what I'm talking about. Check o ...

androidhtmlioscss

The product has been taken out of the cart, yet it has not been reinserted into the cart

The product disappears from the cart after clicking on Add to Cart, but it doesn't reappear when clicked again. //function for adding only one item to cart document.getElementById('btn1').onclick = function() { addItemToCart() }; fun ...

javascripthtmlcss