Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Boa noite,esse aqui é foi o meu codigo na parte form o meu nao esta ficando do mesmo tamanho do projeto do figma pra Desktop o meu esta pegando o tamanho de ponta a ponta alguem pode me ajudar por favor

Referente ao curso Bootstrap5: crie uma landing page responsiva

por Thiago Leandro Sousa da Silva
| 10.2k xp | 1 posts
<form class="container border border-secondary my-3 my-xl-5 p-3 text-center div-novidades mx-auto">
    <h5>
      Quer receber nossas novidades, promoções exclusivas e 10% OFF na primeira
      compra? Cadastre-se!
    </h5>
    <div class="input-group my-3">
      <input type="email" class="form-control border-secondary rounded-0" placeholder="Digite seu e-mail"
        aria-label="Digite seu e-mail" aria-describedby="button-addon2" />
      <button type="button" class="btn btn-primary botao-lilas rounded-0 border-0 " id="button-addon2">Enviar</button>
    </div>
  </form>

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade imagem do projeto )

1 resposta
por Mike de Sousa
| 893k xp | 1477 posts
Alura Scuba Team Suporte Educacional

Olá Thiago,tudo bem?

Para ajustar isso e deixá-lo mais parecido com o design do Figma, você pode definir uma largura máxima para o formulário. Tente adicionar a classe w-75 ou w-50 ao seu formulário para limitar a largura. Um exemplo de como você pode fazer isso:

<form class="container border border-secondary my-3 my-xl-5 p-3 text-center div-novidades mx-auto w-50">
    // restante do código
</form>

A classe mx-auto já está centralizando o formulário horizontalmente, então ao definir uma largura máxima, ele deve ficar mais próximo do design desejado.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado