I want to align input fields and I was asked to not use any css at all. My code:
<!DOCTYPE html>
<html>
<body>
<h1>Travel Reservation Form</h1>
<h3>* denotes mandatory </h3>
<hr>
<form>
<input name="passengername" placeholder="Name">
<input type="tel" placeholder="*Mobile Number" name="mobile" required>
<br>
<input name="mailid" placeholder="*Email ID" type="email" required>
<select name="travelmonth">
<option value="Month of Travel">Month of Travel</option>
<option value="Aug2018">Aug2018</option>
<option value="Sep2018">Sep2018</option>
<option value="Oct2018">Oct2018</option>
<option value="Nov2018">Nov2018</option>
<option value="Dec2018">Dec2018</option>
<option value="Jan2019">Jan2019</option>
<option value="Feb2019">Feb2019</option>
<option value="Mar2019">Mar2019</option>
<option value="Apr2019">Apr2019</option>
</select>
<br>
<select name="package" required>
<option value="*Origin">*Origin</option>
<option value="GOA">GOA</option>
<option value="MUMBAI">MUMBAI</option>
<option value="KERALA">KERALA</option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KOLKATA">KOLKATA</option>
</select>
<input name="destination" placeholder="Destination">
<br>
<input name=submit type="submit" value="Get A Call">
<input name="clear" type="reset" value="Clear">
</form>
</body>
</html>
The output this code is giving
The output I'm required to get:
How do I align the two input tags such that it looks the same as the posted image?
Just in case you actually can use styles to set the style of a page (because the content, a.k.a the HTML, is the same. And there is no behavior, a.k.a JavaScipt)
Example with bootstrap 5:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<h1 class="d-flex justify-content-center text-uppercase">Travel Reservation Form</h1>
<h3 class="d-flex justify-content-center">* denotes mandatory </h3>
<hr>
<form class="container">
<div class="row mb-2">
<div class="col-6">
<input name="passengername" placeholder="Name" class="form-control">
</div>
<div class="col-6">
<input type="tel" placeholder="*Mobile Number" name="mobile" required class="form-control">
</div>
</div>
<div class="row mb-2">
<div class="col-6">
<input name="mailid" placeholder="*Email ID" type="email" required class="form-control">
</div>
<div class="col-6">
<select name="travelmonth" class="form-select">
<option value="Month of Travel">Month of Travel</option>
<option value="Aug2018">Aug2018</option>
<option value="Sep2018">Sep2018</option>
<option value="Oct2018">Oct2018</option>
<option value="Nov2018">Nov2018</option>
<option value="Dec2018">Dec2018</option>
<option value="Jan2019">Jan2019</option>
<option value="Feb2019">Feb2019</option>
<option value="Mar2019">Mar2019</option>
<option value="Apr2019">Apr2019</option>
</select>
</div>
</div>
<div class="row mb-2">
<div class="col-6">
<select name="package" required class="form-select">
<option value="*Origin">*Origin</option>
<option value="GOA">GOA</option>
<option value="MUMBAI">MUMBAI</option>
<option value="KERALA">KERALA</option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KOLKATA">KOLKATA</option>
</select>
</div>
<div class="col-6">
<input name="destination" placeholder="Destination" class="form-control">
</div>
</div>
<div class="row mb-2">
<div class="col-6">
<input name=submit type="submit" value="Get A Call" class="btn btn-primary">
</div>
<div class="col-6">
<input name="clear" type="reset" value="Clear" class="btn btn-secondary">
</div>
</div>
</form>
</body>
</html>
Related
I have tried to place a search form into 2 parent divs. Whether I try the align or justify utility neither of them are able to center the search bar in the middle of the page, where I want it.
<div class="col">
<div class"container-fluid justify-content-center" id="searchform">
<form class="form-floating form-control-sm" id="form">
<div class="row " id="div_main">
<div class="col-auto " id="div_Location">
<label for="Location">Hunt Location</label><br>
<select name="cars" id="Location">
<option value="Gauteng">Gauteng</option>
<option value="Western Cape">Western Cape</option>
<option value="Northern Cape">Northern Cape</option>
<option value="North West">North West</option>
<option value="Limpopo">Limpopo</option>
<option value="Free State">Free State</option>
<option value="Mpumalanga">Mpumalanga</option>
<option value="Eastern cape">Eastern Cape</option>
<option value="Kwa-zulu Natal">kwa-zulu Natal</option>
</select>
</div>
<div class="col-auto" id="div_Animal">
<label for="Animal">Animal</label><br>
<select name="Animals" id="Animal">
<option value="" id="ListAnimal"></option>
</select>
</div>
<div class="col-auto" id="div_Check-in">
<label for="Check-in">Check-in</label>
<input type="date" class="form-control" id="Check-in" placeholder="Check-in" value="">
</div>
<div class="col-auto" id="div_Check-out">
<label for="floatingInputValue">Check-out</label>
<input type="date" class="form-control" id="Check-out" placeholder="Check-out" value="">
</div>
<div class="col-auto" id="div_Hunters">
<label for="Hunters">Hunters</label>
<input type="number" class="form-control" id="Hunters" placeholder="5" value="">
</div>
<div class="col-auto">
<button type="button" class="btn btn-dark d-iline" id="searchbutton"><img src="img/search.png"></img></button>
</div>
</div>
</form>
</div>
</div>
The default behavior of col is to take up 100% of the available space, so justify-content-center won't have any meaningful effect as the column is already at a width of 100% and cannot be centered relative to the parent container.
If we clean up your code the results you expect can be achieved fairly easily (Note: You will need to run this snippet full screen to see it centered).
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-auto" id="search-form">
<form class="form-floating form-control-sm" id="form">
<div class="form-row" id="div_main">
<div class="col-auto" id="div_Location">
<label for="Location">Hunt Location</label><br>
<select name="cars" id="Location" class="custom-select">
<option value="Gauteng">Gauteng</option>
<option value="Western Cape">Western Cape</option>
<option value="Northern Cape">Northern Cape</option>
<option value="North West">North West</option>
<option value="Limpopo">Limpopo</option>
<option value="Free State">Free State</option>
<option value="Mpumalanga">Mpumalanga</option>
<option value="Eastern cape">Eastern Cape</option>
<option value="Kwa-zulu Natal">kwa-zulu Natal</option>
</select>
</div>
<div class="col-auto" id="div_Animal">
<label for="Animal">Animal</label><br>
<select name="Animals" id="Animal" class="custom-select">
<option value="" id="ListAnimal"></option>
</select>
</div>
<div class="col-auto" id="div_Check-in">
<label for="Check-in">Check-in</label>
<input type="date" class="form-control" id="Check-in" placeholder="Check-in" value="">
</div>
<div class="col-auto" id="div_Check-out">
<label for="floatingInputValue">Check-out</label>
<input type="date" class="form-control" id="Check-out" placeholder="Check-out" value="">
</div>
<div class="col-auto" id="div_Hunters">
<label for="Hunters">Hunters</label>
<input type="number" class="form-control" id="Hunters" placeholder="5" value="">
</div>
<div class="col-auto align-self-end">
<button type="button" class="btn btn-dark" id="searchbutton">Search</button>
</div>
</div>
</form>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
First I've applied the correct Grid components of container-fluid and row to make sure that everything is lined up as one would expect within Bootstrap. You may have omitted that for brevity but I wanted to make sure it was shown.
Changing .col to .col-auto will allow the form's parent element to take up only as much width as needed, which will allow justify-content-center to center the column when applied to row.
If you don't want to apply that class to the row wrapper, you can apply mx-auto to the col-auto wrapper.
A couple of house-keeping notes:
As isherwood stated in the comments, your original use of an additional container element is not needed, and is in fact frowned upon as it can result in unexpected issues.
The <img> tag is self-closing, meaning you should format it either as <img src="..." /> or without the self-closing slash. </img> does not exist.
I'm building a web application using html, java, javascript and css with bootstrap. Here is one section of that application which gives me troubles:
What I'm trying to accomplish here is to move this input field bellow the first row to be just bellow the first selection field. Something like this:
By the way new rows are added dinamically when user clicks on + button. And now here is that section written in html:
<div class="row">
<div class="form-group col-xs-5 formular-element-width-fix">
<label class="control-label formular-element-label" for="element<%=elementNumber%>">Element
<%=elementNumber %>:</label>
<div class="input-group">
<input type="text" class="form-control width100" id="element<%=elementNumber%>" name="element<%=elementNumber%>" placeholder="Enter a label">
</div>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100" onchange="changeValidations(this); showRadioLabels(this)">
<option value="Textbox" selected>Textbox</option>
<option value="Checkbox">Checkbox</option>
<option value="Radio buttons">Radio buttons</option>
</select>
</div>
<div class="form-group col-xs-1 radio-number-hide">
<select class="form-control width100" onchange="changeRadioLabels(this)">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100">
<option value="None" selected>None</option>
<option value="Mandatory">Mandatory</option>
<option value="Numeric">Numeric</option>
<option value="Email">Email</option>
<option value="Date">Date</option>
</select>
</div>
<div class="form-group btn-group">
<button class="btn btn-add-element" onclick="addElement()">+</button>
</div>
<div class="form-group col-xs-5 formular-element-width-fix radio-input radio-input-hidden">
<div class="input-group">
<input type="text" class="form-control width100" id="new-element-input" name="new-element-input" placeholder="Enter a label">
</div>
</div>
</div>
By default, bootstrap takes 12 columns in one row, and if you try to use more than 12 columns, it automatically places the extra content in next row. Below is the snippet to achieve the result:
<div class="row">
<div class="form-group col-xs-5 formular-element-width-fix">
<label class="control-label formular-element-label" for="element<%=elementNumber%>">Element
<%=elementNumber %>:</label>
<div class="input-group">
<input type="text" class="form-control width100" id="element<%=elementNumber%>" name="element<%=elementNumber%>" placeholder="Enter a label">
</div>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100" onchange="changeValidations(this); showRadioLabels(this)">
<option value="Textbox" selected>Textbox</option>
<option value="Checkbox">Checkbox</option>
<option value="Radio buttons">Radio buttons</option>
</select>
</div>
<div class="form-group col-xs-1 radio-number-hide">
<select class="form-control width100" onchange="changeRadioLabels(this)">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100">
<option value="None" selected>None</option>
<option value="Mandatory">Mandatory</option>
<option value="Numeric">Numeric</option>
<option value="Email">Email</option>
<option value="Date">Date</option>
</select>
</div>
<!--here completing 12 columns of first row-->
<div class="col-xs-2 form-group btn-group">
<button class="btn btn-add-element" onclick="addElement()">+</button>
</div>
<!--for next row, leave first 5 columns blank, which correspond to label and
textfield, Added css here-->
<div class="form-group col-xs-5 formular-element-width-fix"> </div>
<div class="form-group col-xs-5 formular-element-width-fix radio-input radio-input-hidden">
<div class="input-group">
<input type="text" class="form-control width100" id="new-element-input" name="new-element-input" placeholder="Enter a label">
</div>
</div>
</div>
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?
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>
<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><!--right side -->
</div><!-- form for teacher/student-->
</form>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
Can anyone advise why im getting this strange alignment issue with bootstrap when horizontally aligning textboxes with a select control :-
<div class="row">
<div class="form-group">
<div class="col-xs-12 col-md-2">
<select class="form-control" required>
<option value="">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Forename" />
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Surname" />
</div>
</div>
</div>
Write your columns outside form-group.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-xs-12 col-md-2">
<div class="form-group">
<select class="form-control" required>
<option value="">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Forename" />
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Surname" />
</div>
</div>
</div>
</body>
</html>
Please use one form-group for the entire section.`
<div class="form-group">
<div class="col-xs-12 col-md-2">
<select class="form-control" required>
<option value="">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Forename" />
</div>
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Surname" />
</div>
</div>
`
Form group is supposed to be used if you need to group several form elements together. In this case, it is a good idea for you to group all your form elements into a single form-group.
<div class="row">
<div class="form-group">
<div class="col-xs-12 col-md-2">
<select class="form-control" required>
<option value="">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Forename" />
</div>
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Surname" />
</div>
</div>
Define the column outside the form-group class.
<div class="row">
<div class="col-xs-12 col-md-2">
<div class="form-group">
<select class="form-control" required>
<option value="">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Forename">
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Surname">
</div>
</div>
</div>
I have a form which has two text boxes in the top followed by two select tags below them . Below is the code. How can I modify the width for the select tags so that they align with the text boxes above.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="Title">Title</label>
<input type="text" class="form-control" name='p_Title' value='' ng-model="reports.title" class='requiredAttribute' placeholder="Title">
</div>
<div class="form-group">
<label class="sr-only" for="subTitle">Sub Title</label>
<input type="text" class="form-control" name='p_SubTitle' value='' ng-model="reports.subtitle" class='requiredAttribute' placeholder="Sub Title">
</div> </form>
<br>
<form class="form-inline">
<div class="form-group">
<select class="form-control" name="category">
<option value=""></option>
<option value="0">select1</option>
<option value="1">select2</option>
<option value="2">select3</option>
</select>
</div>
<div class="form-group">
<select class="form-control" name="category">
<option value=""></option>
<option value="0">select1</option>
<option value="1">select2</option>
<option value="2">select3</option>
</select>
</div>
</form>
Wrap them with Bootstrap's Grid System
Something along the lines of this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="sr-only" for="Title">Title</label>
<input type="text" class="form-control" name='p_Title' value='' ng-model="reports.title" class='requiredAttribute' placeholder="Title">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="sr-only" for="subTitle">Sub Title</label>
<input type="text" class="form-control" name='p_SubTitle' value='' ng-model="reports.subtitle" class='requiredAttribute' placeholder="Sub Title">
</div>
</div>
</div>
</form>
<br>
<form class="form-inline">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" name="category">
<option value=""></option>
<option value="0">select1</option>
<option value="1">select2</option>
<option value="2">select3</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" name="category">
<option value=""></option>
<option value="0">select1</option>
<option value="1">select2</option>
<option value="2">select3</option>
</select>
</div>
</div>
</form>