2

I've installed both Ngb and Bootstrap 4 using the commands below. Of course, the root module imports the package as well.

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

In the code, I'm trying to add the following directive. However, the only thing rendered is a closing-cross-button and the text that I enter but just in plain boredom - no borders, boxes, colors etc.

<ngb-alert type="info">dsdsdds</ngb-alert>

Not sure how to troubleshoot it further since googlearching produced nothing to little. Suggestions?

Improve this question
2
  • Can you give us a plunkr for that? Commented Aug 28, 2017 at 11:13
  • @MeMeMax No need. I've found a solution. Feel free to see the answer below. Commented Aug 28, 2017 at 11:35

2 Answers 2

Reset to default
5

The misleading part on the website for NgBootstrap's site is that they only have focused on the framework of directives, leaving out the styling all together to the developers.

So, basically put, it appears that the CSS and/or SCSS are still supposed to be provided by the coder. The solution is to design the styles by oneself or, which is the immensely wiser and undoubtedly quicker, to snatch them from the public distribution of Bootstrap using the following statement.

<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

We never ever suggested that users should craft their own CSS... Our getting started page (ng-bootstrap.github.io/#/getting-started) clearly marks Bootstrap's CSS as a dependency. If you've got suggestions on how to re-word introduction, we would appreciate PR to github.com/ng-bootstrap/ng-bootstrap/blob/master/demo/src/app/…
Right. You have to include the bootstrap css file by yourself. If you use angular cli consider to get bootstrap 4 as a dependency and include it into your angular-cli.json
@MeMeMax Yeah, I tried that first. But for reason it didn't want to fly. So I went for CDN option. It's the same data payload, anyway (or even smaller since Booty might be already present on the target machine). Or did you mean in a different way? If so, feel free to post a reply. I dislike strongly to accept my own answers. It's yacky.
You can include it like this(adjust the path if needed): "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ]
@pkozlowski.opensource I don't mean to tell you guys how to write docs. After all, it might be my sloppy behind that didn't read sufficiently properly and carefully. I'm just saying that it didn't appear to me that it's "only the frame and not the colors", so to speak. I think that I jumped to installation immediately - my mind filtered the reference to dependencies as "included withing the installation". Also - thanks mate for the software. I'm already enjoying using it. :)
|
1

Add bootstrap dependency to the styles array in angular.json (angular versions 6 and above) or angular-cli.json (for angular version below 6).

e.g. for angular version 8 this is currently working for me

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

You might need to update the reference depending on where your node_modules are.

I stumbled across this issue too as I missed the part

After installing the above dependencies

In the documentation which referred to Angular and Bootstrap and found this page while troubleshooting.

Suggestion to make the documentation clearer is to explicitly show a complete example, e.g. starting with ng new.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.