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>
Related
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"/>
Would someone please tell me what is wrong with this?
.container {
margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-primary">
<div id="panel-head" class="panel-heading">
Edit Widget
</div>
<div class="panel-body">
<div class="row"><label for="title" class="col-sm-1 control-label">Title</label>
<div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div>
<label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label>
<div class="col-sm-5"><select id="widget_type_id" class="form-control">
<option disabled="disabled" value="">Please select one</option>
<option value="1">
2D column
</option>
<option value="2">
Multi-series 2D column
</option>
<option value="3">
Multi-series 3D column and line
</option>
<option value="4">
Gauge
</option>
<option value="5">
Datatable
</option>
<option value="6">
Counter
</option>
</select></div>
</div>
<div class="row">
<label for="link" class="col-sm-1 control-label">Link</label>
<div class="col-sm-5">
<input type="text" id="link" class="form-control">
</div>
<label for="font_size" class="col-sm-1 control-label">Font Size</label>
<div class="col-sm-2">
<input type="text" id="font_size" class="form-control">
</div>
</div>
<div class="row">
<label for="caption" class="col-sm-2 control-label">caption</label>
<div class="col-sm-4"><input type="text" id="caption" class="form-control"></div>
</div>
<div class="row">
<label for="subcaption" class="col-sm-2 control-label">subcaption</label>
<div class="col-sm-4">
<input type="text" id="subcaption" class="form-control">
</div>
</div>
<div class="row">
<label for="yaxisname" class="col-sm-2 control-label">yaxisname</label>
<div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div>
</div>
</div>
</div>
There is not any padding between the caption, subcaption and yaxisname fields.
Give form-group instead of row and add <form class="form-horizontal editform">.
.container {
margin-top: 10px;
}
.editform.form-horizontal .control-label {
text-align: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-primary">
<div id="panel-head" class="panel-heading">
Edit Widget
</div>
<div class="panel-body">
<form class="form-horizontal editform">
<div class="form-group"><label for="title" class="col-sm-1 control-label">Title</label>
<div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div>
<label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label>
<div class="col-sm-5"><select id="widget_type_id" class="form-control">
<option disabled="disabled" value="">Please select one</option>
<option value="1">
2D column
</option>
<option value="2">
Multi-series 2D column
</option>
<option value="3">
Multi-series 3D column and line
</option>
<option value="4">
Gauge
</option>
<option value="5">
Datatable
</option>
<option value="6">
Counter
</option>
</select></div>
</div>
<div class="form-group">
<label for="link" class="col-sm-1 control-label">Link</label>
<div class="col-sm-5">
<input type="text" id="link" class="form-control">
</div>
<label for="font_size" class="col-sm-1 control-label">Font Size</label>
<div class="col-sm-2">
<input type="text" id="font_size" class="form-control">
</div>
</div>
<div class="form-group">
<label for="caption" class="col-sm-2 control-label">caption</label>
<div class="col-sm-4"><input type="text" id="caption" class="form-control"></div>
</div>
<div class="form-group">
<label for="subcaption" class="col-sm-2 control-label">subcaption</label>
<div class="col-sm-4">
<input type="text" id="subcaption" class="form-control">
</div>
</div>
<div class="form-group">
<label for="yaxisname" class="col-sm-2 control-label">yaxisname</label>
<div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div>
</div>
</form>
</div>
</div>
See this:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.container {
margin-top: 10px;
}
.form-group {
margin-bottom: 10px;
display: inline-block;
width: 100%;
}
<div class="panel panel-primary">
<div id="panel-head" class="panel-heading">
Edit Widget
</div>
<div class="panel-body">
<div class="row">
<div class="form-group">
<label for="title" class="col-sm-1 control-label">Title</label>
<div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div>
<label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label>
<div class="col-sm-5"><select id="widget_type_id" class="form-control">
<option disabled="disabled" value="">Please select one</option>
<option value="1">
2D column
</option>
<option value="2">
Multi-series 2D column
</option>
<option value="3">
Multi-series 3D column and line
</option>
<option value="4">
Gauge
</option>
<option value="5">
Datatable
</option>
<option value="6">
Counter
</option>
</select></div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="link" class="col-sm-1 control-label">Link</label>
<div class="col-sm-5">
<input type="text" id="link" class="form-control">
</div>
<label for="font_size" class="col-sm-1 control-label">Font Size</label>
<div class="col-sm-2">
<input type="text" id="font_size" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="caption" class="col-sm-2 control-label">caption</label>
<div class="col-sm-4"><input type="text" id="caption" class="form-control"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="subcaption" class="col-sm-2 control-label">subcaption</label>
<div class="col-sm-4">
<input type="text" id="subcaption" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="yaxisname" class="col-sm-2 control-label">yaxisname</label>
<div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div>
</div>
</div>
</div>
</div>
This is example HTML for Form component with their default classes provided by Bootstrap.
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
Ref. Link - http://getbootstrap.com/docs/4.0/components/forms/
Try to use their default classes and if you need any customization, add your custom classes to elements and override the styles.
You can do one thing, first of all you can use form tag as parent class and then apply margin top to all label, instead to container class. or your can give a class to label tag like .customlabel and than use this class and add property. for example.
form label{
float:left;
with:100%;
margin-top:10px;
}
.customlabel {
float:left;
with:100%;
margin-top:10px;
}
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>
I was trying to put required attribute to select. I tried many ways and it doesn't seem to work.
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Select Category</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control" name="Category" required="required">
<option value="">Select</option>
<option value="2">Library Staff</option>
<option value="3">Non-Teaching Staff</option>
<option value="4">System Admin</option>
<option value="5">Teaching Staff</option>
</select>
</div>
</div>
You may use the boostrap validator:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/1000hz/bootstrap-validator/master/dist/validator.min.js"></script>
<form data-toggle="validator" role="form">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Select Category</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control" name="Category" required>
<option value="">Select</option>
<option value="2">Library Staff</option>
<option value="3">Non-Teaching Staff</option>
<option value="4">System Admin</option>
<option value="5">Teaching Staff</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
try;
<select class="form-control" name="Category" required>