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
2135Puntos

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
3 años

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

1
1375Puntos

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

1

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
4Puntos

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