Styling a form with two columns
I am trying to re-create this page below
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"/>- Is it possible to pull css values with HTA javascript?
- How to secure my login page
- pixel.gif, why do people use it?
- apple-mobile-web-app-status-bar-style in ios 10
- Using margin:auto to vertically-align <div>
- Contact Form Submit Button link to Email
- Generate random image by url
- Cross-reference (named anchor) in markdown
- Unable to make text bold in SVG
- Is there a way to create your own html tag in HTML5?
- Show hide divs on click in HTML and CSS without jQuery
- input type color default color input as HEX
- Can't vertical scroll page on mobile devices with full width PrimeNg carousel
- font size is not working when using from html
- Using custom HTML Tags
- Giving wrapped flexbox items vertical spacing
- force element to display outside of overflow:hidden
- Using css how so I create a pill shape which is circular on one side and angled on the other?
- How to make a pill shape button with HTML and CSS?
- Can I add a custom attribute to an HTML tag?
- Why is my Bootstrap table overflowing the containing card?
- Why are level 1 headings the same size as other headings?
- WAI-ARIA Roles for Carousels (a.k.a. sliders, slideshows, galleries)
- What is the difference between localStorage, sessionStorage, session and cookies?
- Change text with a CSS3 animation?
- Changing the Style of a specific element by Checkbox:Checked
- slideDown jumps abruptly at the end
- React ${} string replacer doesn't work
- Favicon not working
- Formatting a nested table in HTML