Ir ao conteúdo
  • Cadastre-se

nao consigo entender o conteiner do bootstrap


Posts recomendados

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <!-- Meta tags Obrigatórias -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Portifolio</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estilos.css">
    <!-- JavaScript (Opcional) -->
    <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
    <script src="js/jquery-3.3.1.slim.min.js"> </script>
    <script src="js/popper.min.js"> </script>
    <script src="js/bootstrap.min.js"> </script>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.13.0/css/all.css">
</head>

<body>
<main class="d-flex align-items-center">
      <div class="container">
        
        <div class="card login-card">      <!-- A CAIXA QUE ESTA NA TELA-->
          <div class="row">      
            
            <div class="col-xl-3" style="background-color: #000000">           <!-- PRIMEIRA PARTE DA TELA -->
            </div>
            
            <div class="col-xl-7">     <!-- SEGUNDA PARTE DA TELA -->
              <div class="card-body">
                <p class="login-card-description"> Cadastre-se aqui! </p>
                
                  <form class="needs-validation" novalidate>
                    <div class="row g-3">
                      
                    <div class="col-sm-6">
                        <label for="firstName" class="form-label"> Primeiro Nome </label>
                        <input type="text" class="form-control" id="firstName" placeholder="Nome" required>
                    </div>
          
                    <div class="col-sm-6">
                        <label for="lastName" class="form-label"> Sobrenome </label>
                        <input type="text" class="form-control" id="lastName" placeholder="Sobrenome" required>
                    </div>
          
                    <div class="col-12">
                        <label for="email" class="form-label"> Email <span class="text-muted"> </span> </label>
                        <input type="email" class="form-control" id="email" placeholder="nome@example.com">
                    </div>
          
                    <div class="form-row">
                        <div class="col-6">
                          <label for="lastName" class="form-label"> Cidade </label>
                          <input type="text" class="form-control" placeholder="Cidade">
                        </div>
                        <div class="col-3">
                          <label for="lastName" class="form-label"> Estado </label>
                          <input type="text" class="form-control" placeholder="Estado">
                        </div>
                        <div class="col-3">
                          <label for="lastName" class="form-label"> CEP </label>
                          <input type="text" class="form-control" placeholder="CEP">
                        </div>
                    </div>
          
                </div>

        <hr class="my-4">
                    
                    <h6 class="mb-3"> Sexo </h6>
                    <div class="col-md-6">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="opcao1">
                            <label class="form-check-label" for="inlineRadio1">Masculino</label>
                          </div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="opcao2">
                            <label class="form-check-label" for="inlineRadio2">Femenino</label>
                          </div>
                    </div>
          
                    <div class="row gy-3">

                      <div class="col-md-6">
                        <label for="senha" class="form-label"> Senha </label>
                        <input type="password" class="form-control" placeholder="********" required>
                      </div>
                      <div class="col-md-6">
                        <label for="conf-senha" class="form-label"> Confirmar Senha </label>
                        <input type="password" class="form-control" placeholder="********" required>
                      </div>

                    <hr class="my-4">

                    <a href="TESTE-LOGIN.html" type="button" class="btn btn-outline-dark btn-lg mr-5" role="button" aria-pressed="true"> Voltar </a>
                    <button type="submit" class="btn btn-outline-dark btn-lg mr-5"> Cadastrar </button>
                    <button type="reset" class="btn btn-outline-dark btn-lg"> Limpar  </button>

                </form>   
              </div>
            </div>
          </div>
        </div>
      </div>
</main>
</body>

 

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
  font-family: "Karla", sans-serif;
  background-color: #d0d0ce;
}

.card-body {
    width: 130%;
}

.login-card {        /*  CAIXA INTEIRA  */
  border: 0;
  border-radius: 27.5px;
  box-shadow: 0 10px 30px 0 rgba(172, 168, 168, 0.43);
  overflow: hidden; 
}

.login-card-img {
    border-radius: 0;
    position: absolute;
    width: 100%;                  /*  FOTO GRANDE DA PRIMEIRA PARTE DA TELA  */
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; 
}

.logo {
    height: 100px;              /*  IMAGEM DA LOGO  */
    width: 80px;  
    margin-left: 43%;
}

.login-card-description {
    font-size: 25px;
    color: #000;           /*  TEXTO ABAIXO DA LOGO  */
    font-weight: normal;
    margin-bottom: 65px;
    text-align: center;
}

.login-card form {
    max-width: 326px;  /*  FORMULARIO  */
    margin-left: 20%;
}

.login-card .form-control {
    border: 1px solid #d5dae2;
    padding: 15px 25px;
    margin-bottom: 20px;
    min-height: 45px;                  /*  INPUTS DO LOGIN E SENHA   */
    font-size: 19px;
    line-height: 15;
    font-weight: normal; 
}

.login-card .form-control::-webkit-input-placeholder {
      color: #919aa3; }

.login-card .form-control::-moz-placeholder {
      color: #919aa3; }

.login-card .form-control:-ms-input-placeholder {
      color: #919aa3; }

.login-card .form-control::-ms-input-placeholder {
      color: #919aa3; }

.login-card .form-control::placeholder {
      color: #919aa3; }

.login-card .login-btn {
    padding: 6px 20px 6px;
    background-color: #000;
    border-radius: 15px;
    font-size: 19px;                    /*  BOTAO D LOGIN */
    font-weight: bold;
    line-height: 20px;
    color: #fff;
    margin-bottom: 24px; 
}

.login-card .login-btn:hover {
      border: 1px solid #000;               /*  DEPOIS QUE APERTA O BOTAO LOGIN  */
      background-color: transparent;
      color: #000; 
}

.login-card .forgot-password-link {
    font-size: 14px;                        /*  ESQUEÇEU A SENHA  */
    color: #919aa3;
    margin-left: 35%;
}

.login-card-footer-text {
    font-size: 16px;
    color: #0d2366;                 /*  NAO TEM CONTA? CADASTRE-SE  */
    margin-bottom: 60px; 
    margin-left: 25%;
}

.login-card-footer-nav {
    font-size: 15px;           /* privacit politica */
    color: #919aa3; 
    margin-left: 30%;
}


/* RESPONSIVIDADEEEEEEEEEEEEEEEEEEEEEEEEEEEE */
   /*  ---------------------------------- */

@media (min-width: 720px) and (max-width: 1400px) {   /* TELA PARA notebook */
    
    .container {
        margin-top: 1%;  
    }
}

@media (min-width: 1500px) and (max-width: 2000px) { /* TELA PARA PC */

    .container {
        margin-top: 8%;
    }

    .login-card .forgot-password-link {
        font-size: 16px;                        /*  ESQUEÇEU A SENHA  */ 
    }
}

Aqui esta meu codigo em html, e vou colocar tambem meu codigo em css, vocês podem copiar e colar na maquina de vocês, preciso mt de ajuda, nao estou conseguindo entender por nada essa questao de conteiner, colocarei uma foto para mostrar o que eu nao estou conseguindo fazer, seria deixar os radios um do lado do outro, mas ele nao fica porque a parte do form mt curta e eu nao consigo deixar com mais espaço, isso acontece com os botões tb.

E como vocês podem ver na foto eu nao consigo fazer com que a caixa fique bem no centro, eu tento editar certas coisas mas ele nao edita, to ficando louco ja

FOTO.png

Link para o post
Compartilhar em outros sites
Visitante

Boa tarde!

 

Bom, primeiramente, vale lembrar que, no sistema de colunas (flexbox) do bootstrap, o total de colunas é 12.

 

Conforme imagem abaixo, você utilizou col-3 e col-7, totalizando 10. Dessa forma, fica faltando 2 colunas, o que faz com que a segunda coluna não vá até o final.

 

Para resolver isso, altere a classe "col-xl-7" para "col-xl-9"

 

image.thumb.png.30e4c06054f273e247c6975cd2b9c531.png

 

 

Sobre os botões lá de baixo, coloque-os dentro de uma div com a classe d-flex, assim:

 

<div class="d-flex">

	<a href="TESTE-LOGIN.html" type="button" class="btn btn-outline-dark btn-lg mr-5" role="button" aria-pressed="true"> Voltar </a>

	<button type="submit" class="btn btn-outline-dark btn-lg mr-5"> Cadastrar </button>

	<button type="reset" class="btn btn-outline-dark btn-lg"> Limpar  </button>

 </div>

 

  • Amei 1
Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda a ler resistores e capacitores

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!