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"

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
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.