3
respostas

Meu Bootstrap não funiona

Eu fiz o passo a passo da primeira parte do curso e por algum motivo a estilização que o professor fez não está funcionando, por exemplo, o meu botão de login não tem a formatação para ocupar a tela toda, o botão fica só no canto esquerdo. Alguém consegue me ajudar? Vou colocar meus códigos abaixo.

Esse é meu angular.json:

 "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/alura",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": []
          },

Esse é meu package.json

"private": true,
  "dependencies": {
    "@angular/animations": "~12.0.0",
    "@angular/common": "~12.0.0",
    "@angular/compiler": "~12.0.0",
    "@angular/core": "~12.0.0",
    "@angular/forms": "~12.0.0",
    "@angular/platform-browser": "~12.0.0",
    "@angular/platform-browser-dynamic": "~12.0.0",
    "@angular/router": "~12.0.0",
    "bootstrap": "^5.0.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.6.0",
    "ngx-bootstrap": "^6.2.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"

E por fim esse é meu app.module.ts


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app.routing.module';
import { AppComponent } from './app.component';
import { PhotosModule } from './photos/photos.module'
import { ErrorsModule } from './errors/errors.module';
import { HomeModule } from './home/home.module';




@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PhotosModule,
    ErrorsModule,
    HomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
3 respostas

Fala ai Ricardo, tudo bem? Se você abrir o console do navegador ou o terminal em algum dos dois está sendo logado alguma mensagem de erro? Pode ser cache também, tente parar o servidor e subir novamente ou dar um Shift + F5 na página.

Espero ter ajudado.

O Matheus, obrigado pelo retorno. Então, eu acabei continuando nos cursos já que isso não me impedia e percebi que algumas funções funcionam, mas as que mexem com margem não, tipo mr-1. Toda vez que eu precisei colocar uma margem usando o bootstrap 5 ele bugou e não deu espaçamento, mas as outras funções como mudar a cor do texto e alinhar foi tranquilo

Fala Ricardo, entendi, realmente sem ver o problema e poder analisar é bem complicado tentar ajudar, o mesmo pode ser por N razões e possuir N soluções.

Se você ainda tiver o projeto com o erro, compartilha comigo ele que eu simulo por aqui e analiso com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Abraços

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software