2
respostas

Layout da página diferente

![](Meu layout](https://cdn1.gnarususercontent.com.br/1/767760/799bb3ef-37a3-4467-8175-733acbb1f335.png) )

![](Layout do professor](https://cdn1.gnarususercontent.com.br/1/767760/6646410d-5f77-4678-ab2e-c36e75e7f023.png) )

Pessoal,

Fiz toda instalação dos pré-requisitos da aula (bootstarp, font-aesome e etc..), executei corretamente todos os passos, incluí as classes de acordo com as aulas, porém mesmo assim meu layout não ficou igual.

Já verifiquei nas dependências do projeto e, tanto no angular.json quanto no package.jason o bootstrap aparentemente está instalado corretamente.

Já não sei mais o que fazer. Alguém pode ajudar?

<!-- login.component.html -->

<h4 class="text-center">Login</h4>
<form class="form mt-4">
  <div class="form-group">
    <input clas="form-control" placeholder="Nome do usuário"/>
  </div>

  <div class="form-group">
    <input type ="password" class="form-control" placeholder="Digite sua senha"/>
  </div>
  <button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
/* angular.json */

           "styles": [
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/font-awesome/css/font-awesome.css"

            ],
/* package.json */

 "dependencies": {
    "@angular/animations": "~12.0.2",
    "@angular/common": "~12.0.2",
    "@angular/compiler": "~12.0.2",
    "@angular/core": "~12.0.2",
    "@angular/forms": "~12.0.2",
    "@angular/platform-browser": "~12.0.2",
    "@angular/platform-browser-dynamic": "~12.0.2",
    "@angular/router": "~12.0.2",
    "bootstrap": "^5.0.2",
    "font-awesome": "^4.7.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
2 respostas

Eu também tive esse mesmo problema, então alterei algumas classes do bootstrap e funcionou.

<h4 class="text-center">Login</h4>

<form class="form mt-4">
  <div class="mb-3">
    <input class="form-control" placeholder="Nome do usuário" />
  </div>

  <div class="mb-3">
    <input type="password" class="form-control" placeholder="Senha" />
  </div>

  <div class="d-grid gap-2">
    <button class="btn btn-primary" type="submit">Login</button>
  </div>
</form>

Olá Evelin, boa noite.

Sua dica já deixou meu layout muito melhor que antes. A única coisa que ainda continua diferente, são os campos de input, se você olhar bem, no canto direito tem duas caixinhas pretas que não consigo identificar o que é. Pode ser versão do bootstrap também... atualização, não sei ao certo em que ano essa aula foi gravada.

Te agradeço pela ajuda de qualquer forma.