I'm new to Bootstrap and am trying to create a simple form with 13 fields.
I am using inline since I want to display the fields next to each other (Label: Textbox)
It is working fine on mobile device (listed one under the other which is OK) but on PC it does not appear ordered. How can I align the fields in three columns for example to make them look ordered on PC browser. This is my current output:
http://upupa.byethost10.com/session1.html#
My code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Session Details</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Session Details</h2>
<p></p>
<form class="form-inline" role="form">
<div class="form-group">
<label for="date">Date:</label>
<input type="date" class="form-control" id="date" placeholder="Date">
</div>
<div class="form-group">
<label for="Site">Site:</label>
<div class="form-group">
<select id="Site" name="Site" class="form-control">
<option value="1">Xaghra</option>
<option value="2">Option two</option>
<option value="">Populated by database</option>
</select>
</div>
</div>
<div class="form-group">
<label for="ringer">Ringer:</label>
<input type="text" class="form-control" id="ringer" placeholder="Ringer">
</div>
<div class="form-group">
<label for="Net Length">Net Length:</label>
<input type="number" class="form-control" id="Net Length" placeholder="Net Length">
</div>
<div class="form-group">
<label for="Net Remarks">Net Remarks:</label>
<input type="text" class="form-control" id="Net Remarks" placeholder="Net Remarks">
</div>
<div class="form-group">
<label for="Tape Lure 1">Tape Lure 1:</label>
<input type="text" class="form-control" id="Tape Lure 1" placeholder="Tape Lure 1">
</div>
<div class="form-group">
<label for="Tape Lure 2">Tape Lure 2:</label>
<input type="text" class="form-control" id="Tape Lure 2" placeholder="Tape Lure 2">
</div>
<div class="form-group">
<label for="Tape Lure 3">Tape Lure 3:</label>
<input type="text" class="form-control" id="Tape Lure 3" placeholder="Tape Lure 3">
</div>
<div class="form-group">
<label for="Remarks">Remarks:</label>
<input type="text" class="form-control" id="Remarks" placeholder="Remarks">
</div>
<div class="form-group">
<label for="Cloud Cover">Cloud Cover:</label>
<input type="text" class="form-control" id="Cloud Cover" placeholder="Cloud Cover">
</div>
<div class="form-group">
<label for="Wind Direction">Wind Direction:</label>
<input type="text" class="form-control" id="Wind Direction" placeholder="Wind Direction">
</div>
<div class="form-group">
<label for="Wind Strength">Wind Strength:</label>
<input type="number" class="form-control" id="Wind Strength" placeholder="Wind Strength">
</div>
<div class="form-group">
<label for="Rain">Rain:</label>
<input type="text" class="form-control" id="Rain" placeholder="Rain">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
thanks
You need to put the inputs that you want grouped together into rows using <div class="row"> and each form-group into columns with (for example) <div class="col-md-4">.
I did this for your first set of three inputs here: http://jsfiddle.net/jonmrich/bz59xucp/
Check into the documentation for Bootstrap to see how to use rows and columns effectively.
Related
I have an html form that :
looks like
And I want that those values doesn't appear like these, just blank.
How can I do it?
The code in fact is here: github
Blank input as you want... please run and see
<div class="container">
<h1>Add New Book</h1>
<div class="row">
<div class="col-md-6">
<form (ngSubmit)="saveBook()" #bookForm="ngForm">
<div class="form-group">
<label for="name">ISBN</label>
<input type="text" class="form-control" [(ngModel)]="book.isbn" name="isbn" required>
</div>
<div class="form-group">
<label for="name">Title</label>
<input type="text" class="form-control" [(ngModel)]="book.title" name="title" required>
</div>
<div class="form-group">
<label for="name">Author</label>
<input type="text" class="form-control" [(ngModel)]="idA" name="author" required>
</div>
<div class="form-group">
<input type="text" class="form-control" [(ngModel)]="book.author" name="author" required>
</div>
<div class="form-group">
<label for="name">Publisher</label>
<input type="text" class="form-control" [(ngModel)]="book.publisher" name="publisher" required>
</div>
<div class="form-group">
<label for="name">Price</label>
<input type="number" class="form-control" [(ngModel)]="book.price" name="price" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" [disabled]="!bookForm.form.valid">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="container">
</div>
How to make multiple text fields in the same line.
This is my code:
<div class="col-lg-2">
<div class="form-group">
<label>Working experience</label>
<input type="text" class="form-control " placeholder="Year"/>Year
<input type="text" class="form-control " placeholder="Month"/>Month
<input type="text" class="form-control " placeholder="Day" />Day
</div>
</div>
It's by default. input is inline element.
<div class="col-lg-2">
<div class="form-group">
<label>Working experience</label>
<input type="text" class="form-control " placeholder="Year" />Year
<input type="text" class="form-control " placeholder="Month" />Month
<input type="text" class="form-control " placeholder="Day"
Day
</div>
</div>
In bootstrap you can put all of the fields that you want on a single line within a single form-group
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
It seems, you are using Bootstrap, if yes, then;
Add class .form-inline to the <form> element.
else, Add these css properties to <form>,
display: inline-block;
width: auto;
You can try this way too.
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="col-lg-2">
<div class="form-group" >
<label style="width:25%; float:left;">Working experience</label>
<div style="width:25%; float:left;">
<input type="text" class="form-control " placeholder="Year"/>Year
</div>
<div style="width:25%; float:left;">
<input type="text" class="form-control " placeholder="Month"/>Month
</div>
<div style="width:25%; float:left;">
<input type="text" class="form-control " placeholder="Day"/>Day
</div>
</div>
</div>
</body>
</html>
Use Bootstrap:
<form class="form-inline" action="/action_page.php">
<label>Working experience : </label>
<div class="form-group">
<input type="text" class="form-control" id="year" placeholder="Year" name="year">
</div>
<div class="form-group">
<input type="text" class="form-control" id="month" placeholder="Month" name="month">
</div>
<div class="form-group">
<input type="text" class="form-control" id="day" placeholder="Day" name="day">
</div>
</form>
You could use inline form class.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-inline">
<div class="form-group">
<label>Working experience</label>
<input type="text" class="form-control" placeholder="Year">
<input type="text" class="form-control" placeholder="Month">
<input type="text" class="form-control " placeholder="Day">
</div>
</form>
Use Expand snippet to see actual result.
I'm a bit of a novice when it comes to Bootstrap and I'm struggling to get some form fields to conform to my desired layout. My sample snippet of HTML code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Registration</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<form id="frmRegister" class="form-horizontal">
<div id="divContainer" class="container-fluid" style="width: 90%">
<h2 id="h2Registration" style="background-color: #F76803; color: white; margin: 3px 3px 3px 3px"></h2>
<div id="divChild1">
<div class="form-group">
<label for="txtChildLastName1" class="control-label col-xs-1">Last Name *</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtChildLastName1" maxlength="25" />
</div>
<label for="txtChildFirstName1" class="control-label col-xs-1">First Name *</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtChildFirstName1" maxlength="25" />
</div>
<label for="txtChildMiddleInit1" class="control-label col-xs-1">Initial</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="txtChildMiddleInit1" maxlength="1" />
</div>
<label for="txtChildSuffix1" class="control-label col-xs-1">Suffix</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="txtChildSuffix1" maxlength="5" />
</div>
</div>
<div class="form-group">
<label for="groupGender" class="control-label col-xs-1">Gender *</label>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="groupGender1" id="rbGenderMale1" value="M" />Male
</label>
<label class="radio-inline">
<input type="radio" name="groupGender1" id="rbGenderFemale1" value="F" />Female
</label>
</div>
<label for="txtChildDOB1" class="control-label col-xs-1">DOB *</label>
<div class="col-xs-1">
<input type="date" class="form-control dateTextBox" style="position: absolute; z-index: 999" id="txtChildDOB1" name="txtChildDOB1" value="" />
</div>
<label for="txtDoctorName1" class="control-label col-xs-1">Doctor Name</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtDoctorName1" maxlength="50" />
</div>
<label for="txtDoctorPhone1" class="control-label col-xs-1">Doctor Phone</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="txtDoctorPhone1" maxlength="50" />
</div>
</div>
<div class="form-group">
<label for="txtAthleteDues1" class="control-label col-xs-1">Registration Fee</label>
<div class="col-xs-1 input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="txtAthleteDues1" placeholder="85" maxlength="2" />
</div>
<label for="txtUniform1" class="control-label col-xs-1">Uniform</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="txtUniform1" maxlength="50" placeholder="Estimate size, if needed" />
</div>
<label for="txtUniformFee1" class="control-label col-xs-1">Uniform Fee</label>
<div class="col-xs-1 input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="txtUniformFee1" placeholder="80" maxlength="2" />
</div>
</div>
<div class="form-group">
<label for="txtAthleteFees1" class="control-label col-xs-1">Athlete Fees</label>
<div class="col-xs-11">
<input type="text" class="form-control" id="txtAthleteFees1" disabled="disabled" value="Some descriptive text goes here" />
</div>
</div>
</div>
</div>
</form>
</body>
</html>
The culprit appears to be my use of the input-group/input-group-addon classes which prepend the field with the dollar sign (Registration Fee). The result is that the subsequent fields for Uniform and Uniform Fee wrap to the next row rather than appearing inline on the same row with Registration Fee. The first two rows, which don't use input-group/input-group-addon do not have this problem.
Instead of using col-* and input group together, put the input-group inside the col-* like this..
<div class="col-xs-1">
<div class="input-group">
<div class="input-group-addon"> .. </div>
http://www.bootply.com/g6rtaYL4fy
I am quite new to bootstrap, I have build the following form, but I want to know if someone can please assist me and help me make this form more inline as I think from a layout perspective there is a better way out there, but I really do not know how to achieve it, I will appreciate all the help.
Essentially help me make my form more aesthetically pleasing.
HTML:
<!-- Form Name -->
<legend>Order Form</legend>
<form class="form-horizontal form-shadow">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">E-mail</label>
<div class="col-md-4">
<input id="email" name="email" type="text" placeholder="Enter E-mail" class="form-control input-md" required="">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="tile">Select Title</label>
<div class="col-md-4">
<select id="tile" name="tile" class="form-control">
<option value="Miss">Miss</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Rev">Rev</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name">Name</label>
<div class="col-md-4">
<input id="name" name="name" type="text" placeholder="Enter Name" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="surname">Surname</label>
<div class="col-md-4">
<input id="surname" name="surname" type="text" placeholder="Enter Surname" class="form-control input-md" required="">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="address">Address</label>
<div class="col-md-4">
<textarea class="form-control" id="address" name="address" placeholder="Enter Address"></textarea>
</div>
</div>
<!-- Prepended text-->
<div class="form-group">
<label class="col-md-4 control-label" for="cell"></label>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon">Cell</span>
<input id="cell" name="cell" class="form-control" placeholder="Enter Cellphone" type="text" required="">
</div>
</div>
</div>
<!-- Prepended text-->
<div class="form-group">
<label class="col-md-4 control-label" for="fax"></label>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon">Fax</span>
<input id="fax" name="fax" class="form-control" placeholder="Enter Fax" type="text" required="">
</div>
</div>
</div>
This is what it looks like right now:
This is the effect that I would like:
sourround the form with
for the inputs i think you could use the col-md-6 or 8
also, you can apply multiple col types
for the radio options try something like this
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>.
and always, if you don't like the background color, you could change it in your own CSS file, you even could use the same class for bootstrap and your css (bootstrap is just that, a css)
also, the classes PULL-RIGHT and PULL-LEFT can help you
hope this can help you!
I'd like to create a form with the following layout using Bootstrap 3:
I have a jsfiddle with an attempt here: http://jsfiddle.net/quyB6/
And the markup I've tried:
<form>
<div class="form-group col-md-4">
<label for="name" class="control-label">Line Height</label>
<input type="number" value='' class="form-control" id="lineHeight">
</div>
<div class="form-group col-md-4">
<label for="name" class="control-label">Padding Top</label>
<input type="number" value='' class="form-control" id="paddingTop" />
</div>
<div class="form-group col-md-4">
<label for="name" class="control-label">Padding Bottom</label>
<input type="number" value='' class="form-control" id="paddingBottom">
</div>
</div>
I think the simplest solution would be to add col-xs-4 to the class of each div. That will make sure the divs will be inline for the jsfiddle example. Additionally, you should close the form tag with </form>.
<form>
<div class="form-group col-xs-4 col-md-4">
<label for="name" class="control-label">Line Height</label>
<input type="email" value='' class="form-control" id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="name" class="control-label">Padding Top</label>
<input type="email" value='' class="form-control" id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="name" class="control-label">Padding Bottom</label>
<input type="email" value='' class="form-control" id="name" placeholder="Ime">
</div>
</form>
For bootstrap v4 you can use d-flex flex-column:
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">Line Height</label>
<input type="number" value='' class="form-control" id="lineHeight">
</div>
</div>
With Bootstrap 4.4:
Use the class "form-row" in the form element.
<form class="form-row">
<div class="form-group col-md-4">
<label for="name" class="control-label">Line Height</label>
<input type="number" value='' class="form-control" id="lineHeight">
</div>
<div class="form-group col-md-4">
<label for="name" class="control-label">Padding Top</label>
<input type="number" value='' class="form-control" id="paddingTop" />
</div>
<div class="form-group col-md-4">
<label for="name" class="control-label">Padding Bottom</label>
<input type="number" value='' class="form-control" id="paddingBottom">
</div>
</form>
Replace <label> tag with <div> and it will line up on top perfectly.
Putting <div style="clear: both;"></div> between the <label> and the <input> worked for me. I tried a bunch of the above ideas with no luck. This is with Bootstrap 3.3.7.
So
<label for="name" class="control-label">Line Height</label>
<div style="clear: both;"></div>
<input type="number" value='' class="form-control" id="lineHeight">
I also included "pull-right" as a class (i.e. class="control-label pull-right" and class="form-control pull-right" to get the label and the input on the right-hand side of the page.
this will work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="col-md-4">
<label for="name" class="control-label">Line Height</label>
</div>
<div class="col-md-4">
<label for="name" class="control-label">Padding Top</label>
</div>
<div class="col-md-4">
<label for="name" class="control-label">Padding Bottom</label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="number" value='' class="form-control bg-secondary text-white" id="lineHeight">
</div>
<div class="col-md-4">
<input type="number" value='' class="form-control bg-secondary text-white" id="paddingTop" />
</div>
<div class="col-md-4">
<input type="number" value='' class="form-control bg-secondary text-white" id="paddingBottom">
</div>
</div>
</div>
</body>
</html>
check:https://jsfiddle.net/89h0vrLq/