question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Should the bootstrap css be required in when using ng-bootstrap?

See original GitHub issue

Being new to this project, the following lines from the “getting started” threw me out completely:

Should I add bootstrap.js or bootstrap.min.js to my project? No, the goal of ng-bootstrap is to completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code.

I noticed that the same problem was reported on Stackoverflow.

Should the getting-started include some words on including the css file within styles.css upon having run an npm install bootstrap? For example:

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

13reactions
hcerpandamcommented, Dec 31, 2018

Hi, i arrived here following the topic https://github.com/ng-bootstrap/ng-bootstrap/pull/2204.

I’ve seen that the first time somebody refered to the unclear instructions about the Bootstrap CSS dependency was on feb/10 and still the instructions are really unclear.

As a complete begginer 'im gonna tell you what i’ve done, in case you want to change something in the getting started section:

CMD:

-Creating new Angular project

ng new name-of-my-project Angular routing (y) Style (css)//¿Can i use scss?

-Installing Bootstrap npm install bootstrap

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

IntelliJ:

In app-module.ts

import {NgbModule} from ‘@ng-bootstrap/ng-bootstrap’; @NgModule({ Imports:[…,NgbModule])}

In styles.css For CSS: @import ‘~bootstrap/dist/css/bootstrap.css’; For SCSS: @import “~bootstrap/scss/bootstrap”

What about in angular.json?

The problem is that i’ve donde most of the steps reading the comments of people complaining about this issue. Honestly i think that things could be even easier, like using npm i bootstrap-css-only, but i don’t dare to do any more changes. Learning that took me a couple of days.

Answering the question, i can’t see any single reason why Bootstrap CSS shouldn’t been included on ng-bootstrap

Thanks

7reactions
robeverettcommented, Jul 10, 2018

I think it is bizarre that the css isn’t available through ng-bootstrap ! It’s certainly a nasty “gotcha” that can cause days of wasted development time.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using Bootstrap and ng-bootstrap is good? - Stack Overflow
Does both modules are required , or any one is needed? I am planning to keep only "ng-bootstarp" 4.0.0.0 and to remove "bootstrap"....
Read more >
Getting Started - Angular powered Bootstrap
Add bootstrap CSS/SCSS to your project (no javascript is required); Import NgbModule , or any other component module like NgbPaginationModule , or directly ......
Read more >
Using Bootstrap in Your Angular Apps with ng-bootstrap
ng-bootstrap depends on Bootstrap's CSS being available, but you don't need the Bootstrap JS or jQuery dependencies. Let's install everything we ...
Read more >
How to add Bootstrap to Angular 14 | by WebTutPro - ITNEXT
We'll see how we can easy integrate both of them, using ng-bootstrap vs. ... This will generate the directory structure and necessary files...
Read more >
Using Bootstrap with Angular - Medium
Bootstrap is the most popular HTML, CSS, and JavaScript framework for ... Furthermore Ng-Bootstrap required Bootstrap 4 to be added to our ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found