htmlcssformsflexboxbootstrap-4

Styling a form with two columns


I am trying to re-create this page below

Mock Page

I am pretty familiar with bootstrap 4's grid system but I struggle very much with forms. Where the form is on the page consists of a row with two col-6. I am working on the first column but I cannot seem to keep everything inline using flexbox classes. Can someone give me an idea of how to get this similar format?

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  
  <div class="container">
    <div class="d-flex flex-row">
			<div class="col-6 d-flex"><!--left side -->
				<form class="form-inline">
					<div class="form-group">
						<label for="fname">First Name:</label>
						<input type="text" id="fname" class="form-control ml-5">
					</div>
					<div class="form-group">
						<label for="lname">Last Name:</label>
						<input type="text" id="lname" class="form-control ml-5">
					</div>
					<div class="form-inline">
						<label for="month/year">Date of Birth:</label>
						<select name="Month" class="custom-select" class="month/year">
  							<option value="january">January</option>
  							<option value="february">February</option>
  							<option value="march">March</option>
  							<option value="april">April</option>
  							<option value="may">May</option>
  							<option value="june">June</option>
  							<option value="july">July</option>
  							<option value="august">August</option>
  							<option value="september">September</option>
  							<option value="october">October</option>
  							<option value="november">November</option>
  							<option value="december">December</option>
						</select>
						<!--dates in this select below -->
						<select name="Year" class="custom-select" class="month/year">
							<option value="2018">2018</option>
							<option value="2017">2017</option> 
						</select>
					</div>
					<div class="form-group mt-3">
						<label>Gender:</label>
						<div>
							<label class="radio-button-container ml-2">Male
								<input type="radio" name="radio">
								<span class="black-dot"></span>
							</label>
						</div>
						<div>
							<label class="radio-button-container ml-2">Female
								<input type="radio" name="radio">
								<span class="black-dot"></span>
							</label>
						</div>
					</div>
					<div class="form-group">
							<label for="month/year">Field of Study:</label>
							<select name="Month" class="custom-select" class="month/year">
	  							<option value=""></option>	
	  						</select>
					</div>
				</form>	
			</div>
			<div class="col-6"></div><!--right side -->
		</div><!-- form for teacher/student-->
   </div>

The snippet would be that left side in the first column where "first name" starts. If I can understand how to get that type of alignment then I can figure out the other column. Can this be done using bootstrap classes?


Solution

  • Actually this is not an inline form, so you should not use the .form-inline class on the <form>. This structure is called the Horizontal form and it is described under the Horizontal form section in the Bootstrap docs. Basically you have to use the standard grid classes to layout the labels and input fields as needed.
    Furthermore, let your <form> tag wrap both the left and the right columns, to create only one form. Otherwise you won't be able to submit it in one go.

    The example below provides a sample implementation, where .col-sm-6 classes are used on the labels, as well as on the inputs.

    <div class="container">
        <form>
            <div class="row">
                <div class="col-6"><!--left side -->
                    <div class="form-group row">
                        <label for="fname" class="col-sm-6 col-form-label">First Name:</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="fname">
                        </div>
                    </div>
    
                    <div class="form-group row">
                        <label for="lname" class="col-sm-6 col-form-label">Last Name:</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="lname">
                        </div>
                    </div>
    
                    <div class="form-group row">
                        <label for="lname" class="col-sm-6 col-form-label">Date of Birth:</label>
                        <div class="col-sm-6">
                            <div class="row">
                                <div class="col-sm-6">
                                    <select name="Month" class="custom-select" class="month/year">
                                        <option value="january">January</option>
                                        <option value="february">February</option>
                                        <option value="march">March</option>
                                        <option value="april">April</option>
                                        <option value="may">May</option>
                                        <option value="june">June</option>
                                        <option value="july">July</option>
                                        <option value="august">August</option>
                                        <option value="september">September</option>
                                        <option value="october">October</option>
                                        <option value="november">November</option>
                                        <option value="december">December</option>
                                    </select>
                                </div>
    
                                <div class="col-sm-6">
                                    <select name="Year" class="custom-select" class="month/year">
                                        <option value="2018">2018</option>
                                        <option value="2017">2017</option> 
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="form-group row">
                        <label for="lname" class="col-sm-6 col-form-label">Gender:</label>
                        <div class="col-sm-6">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gender" id="gridRadios1" value="male" checked>
                                        <label class="form-check-label" for="gridRadios1">
                                            Male
                                        </label>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gender" id="gridRadios2" value="female">
                                        <label class="form-check-label" for="gridRadios2">
                                            Female
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="form-group row">
                        <label for="lname" class="col-sm-6 col-form-label">Field of Study:</label>
                        <div class="col-sm-6">
                            <select name="Month" class="custom-select" class="month/year">
                                <option value=""></option>  
                            </select>
                        </div>
                    </div>
                </div>
    
                <!--right side -->
                <div class="col-6">
                    <div class="form-group row">
                        <label for="email" class="col-sm-6 col-form-label">Email Address</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="email" value="email@example.com">
                        </div>
                    </div>
    
                    <div class="form-group row">
                        <label for="password" class="col-sm-6 col-form-label">Password</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" id="password" value="">
                        </div>
                    </div>
    
                    <div class="form-group row">
                        <label for="password2" class="col-sm-6 col-form-label">Password</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" id="password2" value="">
                        </div>
                    </div>
    
                </div>
            </div><!-- form for teacher/student-->
        </form> 
    </div>
    
    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>