13

Angular 6 + bootstrap 4

Para usar bootstrap 4 y no sufrir por los tutos en ingles aqui les dare los pasos a seguir :

  • Crear tu proyecto (en el escritorio en mi caso)
ng new Mi-proyecto
  • Instalar bootstrap 4
npm install bootstrap --save
  • Configurar angular.json:
    angular.png

  • Escribir el codigo

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ]
  • Instalar ng-bootstrap
npm install --save @ng-bootstrap/ng-bootstrap
  • Ir a app.module.ts y escribir lo siguiente
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [ NgbModule.forRoot(), ... ],  
  // ...
})
exportclassAppModule{}
  • Guardar y ejecutar
ng serve

Una cosa mas el css no se notara en herramientas de desarrollo, para comprobar si funciono deben usar cualquier class de bootstrap 4
** Por ejm class="list-group**

<ul class="list-group">
  <liclass="list-group-item">Prueba 1</li>
  <liclass="list-group-item">Prueba 2</li>
  <liclass="list-group-item">Prueba 3</li>
  <liclass="list-group-item">Prueba 4</li>
  <liclass="list-group-item">Prueba 5</li>
</ul>```

Listo eso es todo , gracia por tomarte el tiempo de leer mi humilde aporte 😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😆😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃😃



Escribe tu comentario
+ 2
Ordenar por:
4
3393Puntos
6 años

Gracias por tu aporte una aclaración, para que me funcione en mi caso hice lo siguiente:

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

y en la parte del angular.json:

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
"scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js"
            ]

Saludos!

1
343Puntos
6 años

Gracias. Me salvaste. después de intentar por varios medios no encontraba la solución, con tu aporte me funciono. Gracias.

1
4Puntos
3 años

Good blog you have here… It’s hard to find excellent writing like yours nowadays. I truly appreciate people like you! https://androjungle.com/

1
5 años

As we know that most of the people were looking for the best browser where you can do safe and secure browsing then just from here get free download mozilla firefox online which you will download directly from our homepage without spending a penny.

1
7432Puntos
6 años

Excelente! me ahorro tiempo precioso en anotar e investigar. Gracias 😉