CODEWITHSUNDEEP
htmlangularbuttonsassbootstrapping
Roadman1991
Roadman1991

Reputation: 171

Bootstrap with Angular 2+

Im trying to use a primary button from bootstrap in my Angular module. But it seems to not work.

Heres what I've done so far.

npm install ngx-bootstrap --save

Added bootstrap module and imports.

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot(),...]

exports: [BsDropdownModule, TooltipModule, ModalModule]

Now in the Module I use this code for a button:

<button type="submit" class="btn btn-primary">Submit</button>

but the button is still the standard html button. Not a blue submit button. Did I forget any steps when importing bootstrap. In the node_modules structure I can find bootstrap in there with the necessary .js and .css files.

Thanks for help.

Upvotes: 0

Views: 96

Answers (3)

Saniya syed qureshi
Saniya syed qureshi

Reputation: 3147

We have two options to import the CSS from Bootstrap that was installed from NPM. One by configuring in angular.json and second by importing directly in src/style.css or src/style.scss. You can go through this https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/#3-importing-the-css and learn more about how to do that.

Upvotes: 0

Eugene S.
Eugene S.

Reputation: 83

Looks like in your case bootstrap is just about styling. Pure CSS styling of your HTML elements. Ngx-bootstrap it is about Angular components(the way you are decomposing your application). It's just like regular bootstrap with a jquery for interactivity but in an Angular world.

To get just bootstrap styles in your application you need to run command:

    npm install bootstrap

Then put these source files into angular-cli.json:

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

And rebuild you project.

Upvotes: 1

Suren Srapyan
Suren Srapyan

Reputation: 68635

You don't need to import modules, instead you need to attach styles from bootstrap. import them in the styles.css file or configure in the styles section of the angular.json file

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

or your relative/absolute path

Upvotes: 2

Related Questions