Trouble aligning Bootstrap 4 form fields in a horizontal layout

Question

Trouble aligning Bootstrap 4 form fields in a horizontal layout

I'm struggling to align the user image and biography form fields with the rest of my signup form in Bootstrap 4.

I've tried tweaking the CSS in various ways, but I can't achieve the desired visual effect:

I want the biography and photo upload fields to be the same width as all other form fields and aligned horizontally.
The photo field should be split into two equal-width sections (similar to first and last name fields), with the uploaded image horizontally aligned in one section and the button horizontally aligned in the second section.

Here is the code I'm currently using:

<>

Anyone have suggestions on how to resolve the alignment issue in this form?

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

First, it's important to remove any custom margins and padding that have been added. These are usually unnecessary with Bootstrap and can cause issues.

Next, wrap the content in a container and set a maximum width:

body {
  color: #fff;
  background: #63738a;
  font-family: 'Roboto', sans-serif;
}

.form-control {
  height: 40px;
  box-shadow: none;
  color: #969fa4;
}

.form-control:focus {
  border-color: #5cb85c;
}

.form-control,
.btn {
  border-radius: 3px;
}

.signup-form {
  font-size: 15px;
  max-width: 450px;
}

.signup-form h2 {
  color: #636363;
  position: relative;
  text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css"/>

<div class="container signup-form">
  <form action="#" method="post">
    <h2>Create Account</h2>

    <div class="form-group">
      <div class="row">
        <div class="col"><input type="text" class="form-control" name="first_name" placeholder="First Name" required="required"></div>
        <div class="col"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required="required"></div>
      </div>
    </div>

    <div class="form-group">
      <input type="text" class="form-control" name="screenname" placeholder="Username" required="required">
    </div>

    <div class="form-group avatar">
      <div class="row">
        <figure class="figure col col-md-2 col-sm-3">
          <img class="img-rounded img-responsive" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
        </figure>
        <div class="form-inline col-md-10 col-sm-9 col-xs-12">
          <input type="file" class="file-uploader pull-left">
          <button type="submit" class="btn btn-sm btn-default-alt pull-left">Update Image</button>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label for="user-bio" class="control-label">Biography</label>
      <textarea name="user-bio" id="user-bio" class="form-control" cols="20" rows="3" placeholder="Brief biography"></textarea>
    </div>

    <div class="form-group">
      <input type="password" class="form-control" name="password" placeholder="Password" required="required">
    </div>
    <div class="form-group">
      <input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
    </div>

    <div class="form-group">
      <button type="submit" class="btn btn-success btn-lg btn-block">Create Account Now</button>
    </div>
  </form>
</div>

Answer 2

First, it's important to remove any custom margins and padding that have been added. These are usually unnecessary with Bootstrap and can cause issues.

Next, wrap the content in a container and set a maximum width:

body {
  color: #fff;
  background: #63738a;
  font-family: 'Roboto', sans-serif;
}

.form-control {
  height: 40px;
  box-shadow: none;
  color: #969fa4;
}

.form-control:focus {
  border-color: #5cb85c;
}

.form-control,
.btn {
  border-radius: 3px;
}

.signup-form {
  font-size: 15px;
  max-width: 450px;
}

.signup-form h2 {
  color: #636363;
  position: relative;
  text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css"/>

<div class="container signup-form">
  <form action="#" method="post">
    <h2>Create Account</h2>

    <div class="form-group">
      <div class="row">
        <div class="col"><input type="text" class="form-control" name="first_name" placeholder="First Name" required="required"></div>
        <div class="col"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required="required"></div>
      </div>
    </div>

    <div class="form-group">
      <input type="text" class="form-control" name="screenname" placeholder="Username" required="required">
    </div>

    <div class="form-group avatar">
      <div class="row">
        <figure class="figure col col-md-2 col-sm-3">
          <img class="img-rounded img-responsive" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
        </figure>
        <div class="form-inline col-md-10 col-sm-9 col-xs-12">
          <input type="file" class="file-uploader pull-left">
          <button type="submit" class="btn btn-sm btn-default-alt pull-left">Update Image</button>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label for="user-bio" class="control-label">Biography</label>
      <textarea name="user-bio" id="user-bio" class="form-control" cols="20" rows="3" placeholder="Brief biography"></textarea>
    </div>

    <div class="form-group">
      <input type="password" class="form-control" name="password" placeholder="Password" required="required">
    </div>
    <div class="form-group">
      <input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
    </div>

    <div class="form-group">
      <button type="submit" class="btn btn-success btn-lg btn-block">Create Account Now</button>
    </div>
  </form>
</div>

Answer 3

Answer №2

modify the width and eliminate the float property

body {
  color: #fff;
  background: #63738a;
  font-family: 'Roboto', sans-serif;
}

.form-control {
  height: 40px;
  box-shadow: none;
  color: #969fa4;
}

.form-control:focus {
  border-color: #5cb85c;
}

.form-control,
.btn {
  border-radius: 3px;
}

.signup-form {
  width: 300px;      /* Modification made to the width */
  margin: 0 auto;
  padding: 30px 0;
  font-size: 15px;
}

.signup-form h2 {
  color: #636363;
  margin: 0 0 15px;
  position: relative;
  text-align: center;
}

.signup-form h2:before,
.signup-form h2:after {
  content: "";
  height: 2px;
  width: 30%;
  background: #d4d4d4;
  position: absolute;
  top: 50%;
  z-index: 2;
}

.signup-form h2:before {
  left: 0;
}

.signup-form h2:after {
  right: 0;
}

.signup-form .hint-text {
  color: #999;
  margin-bottom: 30px;
  text-align: center;
}

.signup-form form {
  color: #999;
  border-radius: 3px;
  margin-bottom: 15px;
  background: #f2f3f7;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  padding: 30px;
}

/* Remaining CSS styles unchanged for brevity */

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
  <title>Bootstrap Simple Registration Form</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3839c83839681dd9980b3c2ddc2c5ddc3">[email protected]</a>/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="signup-form">
    <form action="#" method="post">
      <h2>Create Account</h2>

      <!-- Form elements remain unaffected -->

      <div class="form-group">
        <button type="submit" class="btn btn-success btn-lg btn-block">Create Account Now</button>
      </div>
    </form>
  </div>
</body>

</html>

review the modifications and test the code snippet to observe the changes

Answer 4

modify the width and eliminate the float property

body {
  color: #fff;
  background: #63738a;
  font-family: 'Roboto', sans-serif;
}

.form-control {
  height: 40px;
  box-shadow: none;
  color: #969fa4;
}

.form-control:focus {
  border-color: #5cb85c;
}

.form-control,
.btn {
  border-radius: 3px;
}

.signup-form {
  width: 300px;      /* Modification made to the width */
  margin: 0 auto;
  padding: 30px 0;
  font-size: 15px;
}

.signup-form h2 {
  color: #636363;
  margin: 0 0 15px;
  position: relative;
  text-align: center;
}

.signup-form h2:before,
.signup-form h2:after {
  content: "";
  height: 2px;
  width: 30%;
  background: #d4d4d4;
  position: absolute;
  top: 50%;
  z-index: 2;
}

.signup-form h2:before {
  left: 0;
}

.signup-form h2:after {
  right: 0;
}

.signup-form .hint-text {
  color: #999;
  margin-bottom: 30px;
  text-align: center;
}

.signup-form form {
  color: #999;
  border-radius: 3px;
  margin-bottom: 15px;
  background: #f2f3f7;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  padding: 30px;
}

/* Remaining CSS styles unchanged for brevity */

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
  <title>Bootstrap Simple Registration Form</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3839c83839681dd9980b3c2ddc2c5ddc3">[email protected]</a>/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="signup-form">
    <form action="#" method="post">
      <h2>Create Account</h2>

      <!-- Form elements remain unaffected -->

      <div class="form-group">
        <button type="submit" class="btn btn-success btn-lg btn-block">Create Account Now</button>
      </div>
    </form>
  </div>
</body>

</html>

review the modifications and test the code snippet to observe the changes

Trouble aligning Bootstrap 4 form fields in a horizontal layout

Answer №1

Answer №2

Similar questions

list of current items on the sidebar that are currently being

Leverage the leftover vertical space effectively with Bootstrap 4

Is it possible to disregard any spaces within the content of an <option> element?

Google Maps is experiencing difficulties maintaining its longitude and latitude coordinates within the Bootstrap tabbed user interface

The background size cover feature is not functioning properly on mobile devices, especially on longer pages

How do you toggle the visibility of a dependent <select> in an HTML form?

I am having issues with my JavaScript code, I could really use some assistance

Having difficulty converting the string data to HTML using JavaScript in a Node.js Express application

Tips for implementing events with AngularJS Bootstrap Colorpicker

Python script unable to locate div popup using Selenium

Setting an ElementImpl property explicitly in EMF/GMF/Papyrus outside of the code

Error: Invalid Argument - The argument 'PanelController' is expected to be a function, but it is undefined

What is the best way to include dynamic arguments using template literals?

Is it possible for the .find() method to extract values from <a> tags?

Add a class by utilizing the :class attribute

I'm having trouble locating the corresponding end tag for "<%". How can I resolve this issue?

Prevent iOS from scrolling both horizontally and vertically

Make sure to enable contentEditable so that a <br> tag is inserted

Modifying CSS using jQuery in a PHP While Loop

What are some techniques for creating an HTML element that remains fixed on the page after scrolling past a certain height, even though it is originally part of