enter image description here

How to set the adaptive width of the input with such indentation on the left, as well as place the button in the center?

    1 answer 1

    Such as. Inputs set the width to 100% and dispaly: block; + the form itself, specify the necessary ext. indents.

     form { padding: 0 2rem; } input, textarea { display: block; width: 100%; margin: 1rem auto; } input[type="submit"]{ max-width: 200px; } 
     <form> <input type="text" name="name" id="name"> <input type="text" name="text" id="text"> <textarea name="msg" id="msg"> </textarea> <input type="submit" value="send"> </form>

    Here, by the way, bootstrap form:

     form { padding: 2rem; } 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container"> <h2>Bootstrap form</h2> <form> <div class="form-group"> <input type="text" class="form-control" id="name" placeholder="Enter Name"> </div> <div class="form-group"> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group text-center"> <button type="submit" class="btn btn-default">Submit</button> </div> </form> </div>

    • one
      Thank you, I almost did it, I gave margin in margin: 30px auto and width 70%, and display: block - Webear