Блог

Я новичок в веб — дизайне. ПОЖАЛУЙСТА, помогите мне создать адаптивные поля ввода, а также то, как я размещаю поля вокруг, как будто они посередине(я хочу, чтобы эти столбцы были в середине страницы).

 lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt;  lt;titlegt;Login/Registorlt;/titlegt;  lt;style type="text/css"gt;  body{  margin:0px;  padding:0;  overflow-x: hidden!important;  }  .containor{  /*text-align: center;*/  margin:225px 3px 5px 3px auto;   }  .form-group input{  width: 900px;  height: 40px;  border-color: silver;  padding: 0;  margin-top: 3px;  margin-bottom: 10px;  }  .form-group label{  text-align: left;  padding-left: 3px;  margin-bottom: 3px;  }  .buttons{  margin-top: 20px;  }    lt;/stylegt;  lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"gt; lt;/headgt; lt;bodygt;  lt;div class="containor"gt;  lt;div class="row"gt;  lt;div class="col-6 col-sm-12 col-md-6 border" id="login_section"gt;  lt;form class="m-3" action="#" method="post"gt;  lt;div class="form-group"gt;  lt;h1 class="m-3 text-center"gt;Welcome to Login Section!lt;/h1gt;  lt;labelgt;Emaillt;/labelgt;  lt;input type="text" class="form-control" name="u_email"gt;  lt;labelgt;Passwordlt;/labelgt;  lt;input type="password" class="form-control" name="paswd"gt;  lt;brgt;  lt;div class="buttons"gt;  lt;button type="submit" class="btn btn-outline-info btn-block rounded-pill"gt;Loginlt;/buttongt;  lt;button type="rest" class="btn btn-outline-danger btn-block rounded-pill"gt;Clear Credentialslt;/buttongt;  lt;a href="#"gt;Fogot password!lt;/agt;  lt;/divgt;  lt;/divgt;  lt;/formgt;  lt;/divgt;  lt;div class="col-right-6 col-sm-12 col-md-6 border" id="reg_section"gt;  lt;form class="m-3" action="#" method="post"gt;  lt;div class="form-group"gt;  lt;h1 class="m-3 text-center"gt;Don't have an Account yet!lt;brgt;Resgister In Herelt;/h1gt;  lt;labelgt;Emaillt;/labelgt;  lt;input type="text" class="form-control" name="u_email"gt;  lt;labelgt;Passwordlt;/labelgt;  lt;input type="password" class="form-control" name="paswd"gt;  lt;labelgt;Confirm Passwordlt;/labelgt;  lt;input type="password" class="form-control" name="confirm_paswd"gt;  lt;brgt;  lt;div class="buttons"gt;  lt;button type="submit" class="btn btn-outline-success btn-block rounded-pill"gt;Registorlt;/buttongt;  lt;button type="rest" class="btn btn-outline-danger btn-block rounded-pill"gt;Clear Infolt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/formgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/bodygt; lt;/htmlgt;   

если у кого-то есть подобные примеры,создавайте с помощью html,css, bootsrap, пожалуйста, поделитесь ими, чтобы получить больше информации об этих вещах. Спасибо

Это то, что вы ищете?

Если затем добавить стиль ниже, чтобы исправить перемещение ввода из контейнера.

 .form-group input {  width: 900px;  max-width: 100%; }  

Рабочая Скрипка

 body {  margin: 0px;  padding: 0;  overflow-x: hidden !important; }  .containor {  /*text-align: center;*/  margin: 225px 3px 5px 3px auto;  }  .form-group input {  width: 900px;  height: 40px;  border-color: silver;  padding: 0;  margin-top: 3px;  margin-bottom: 10px;  max-width: 100%; }  .form-group label {  text-align: left;  padding-left: 3px;  margin-bottom: 3px; }  .buttons {  margin-top: 20px; } 

 lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"gt;  lt;bodygt;  lt;div class="containor"gt;  lt;div class="row"gt;  lt;div class="col-6 col-sm-12 col-md-6 border" id="login_section"gt;  lt;form class="m-3" action="#" method="post"gt;  lt;div class="form-group"gt;  lt;h1 class="m-3 text-center"gt;Welcome to Login Section!lt;/h1gt;  lt;labelgt;Emaillt;/labelgt;  lt;input type="text" class="form-control" name="u_email"gt;  lt;labelgt;Passwordlt;/labelgt;  lt;input type="password" class="form-control" name="paswd"gt;  lt;brgt;  lt;div class="buttons"gt;  lt;button type="submit" class="btn btn-outline-info btn-block rounded-pill"gt;Loginlt;/buttongt;  lt;button type="rest" class="btn btn-outline-danger btn-block rounded-pill"gt;Clear Credentialslt;/buttongt;  lt;a href="#"gt;Fogot password!lt;/agt;  lt;/divgt;  lt;/divgt;  lt;/formgt;  lt;/divgt;  lt;div class="col-right-6 col-sm-12 col-md-6 border" id="reg_section"gt;  lt;form class="m-3" action="#" method="post"gt;  lt;div class="form-group"gt;  lt;h1 class="m-3 text-center"gt;Don't have an Account yet!lt;brgt;Resgister In Herelt;/h1gt;  lt;labelgt;Emaillt;/labelgt;  lt;input type="text" class="form-control" name="u_email"gt;  lt;labelgt;Passwordlt;/labelgt;  lt;input type="password" class="form-control" name="paswd"gt;  lt;labelgt;Confirm Passwordlt;/labelgt;  lt;input type="password" class="form-control" name="confirm_paswd"gt;  lt;brgt;  lt;div class="buttons"gt;  lt;button type="submit" class="btn btn-outline-success btn-block rounded-pill"gt;Registorlt;/buttongt;  lt;button type="rest" class="btn btn-outline-danger btn-block rounded-pill"gt;Clear Infolt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/formgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/bodygt;