Outro nao consigo entender o conteiner do bootstrap

henrique Souza850 · 9 de março de 2021

<!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="[email protected]">
                    </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

9 de março de 2021

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"

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>

henrique Souza850 · 9 de março de 2021

@Dev Gabriel Souza Conseguiiiiiiiiiiiiiiiiiii, noss to mt feliz KKKKKKK, olha so como consegui deixar... ta ficando bommm

9 de março de 2021

@henrique Souza850 Henrique, desculpe, esqueci de dizer que para resolver essa questão do espaço ocupado pela segunda, você deve alterar a classe "col-xl-7" para "col-xl-9".

henrique Souza850 · 9 de março de 2021

@Dev Gabriel Souza Se voce nao tivesse me ajudado nisso, eu nunca iria conseguir haha, ja estava cansado ja de tentar, aqui ta fácil de manipular o form, valeu mano mt obrigado tmj