I have made two forms for registering. When i add the code below to the page the second field automatically drops down below the first one. I would like it to go besides it.
<h1>Register</h1>
<input type="text" class="form-control" placeholder="Forename" autofocus style="width:150px">
<input type="text" class="form-control" placeholder="Surname" autofocus style="width:150px">
here is an example of what it looks like in normal html (currently) and that is what i want it to look like. But in bootstrap it keeps taking new line
Reference the inline form styling on Bootstrap's site.
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
</form>
Alternatively, you can also use columns to put form elements next to one another:
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
Related
could anyone please help in getting the below layout using HTML5 and bootstrap.
i want the Name label always on left and the Formatted checkbox always on right and the three textboxes share the remaining space evenly.click here for required layout
Code I tried
<form class="form-inline">
<div class="form-group">
<label for="FirstName">Name:</label>
<input type="text" class="form-control inputText" id="txtFirstName" placeholder="First Name" name="txtFirstName">
</div>
<div class="form-group">
<label for="MiddleName" class="sr-only">Middle Name:</label>
<input type="text" class="form-control inputText" id="txtMiddleName" placeholder="Middle Name" name="txtMiddleName">
</div>
<div class="form-group">
<label for="LastName" class="sr-only">Last Name:</label>
<input type="text" class="form-control inputText" id="txtLastName" placeholder="Last Name" name="txtLastName">
</div>
<div class="checkbox">
<label><input type="checkbox"/>Formatted</label>
</div>
</form>
There are many ways to do this but I would suggest you look at this bootstrap page https://v4-alpha.getbootstrap.com/components/forms/
I am working with Laravel 5.4 Framework and I get this issue when the form does not submit anything except the csrf_token().
If I put an input outside of those <div> it will work and submit it, otherwise the browser (Chrome) will only submit the token, as if everything inside the <div> is not part of the form.
How can I submit all the data while using Bootstrap's form-group divs? The layout is not the problem as it does not work even when removing it.
#extends('layouts.master')
#section('content')
<div class="container" style="margin-top: 1%">
<p>Welcome, {{$user->name}}, here you can submit a new company for our database.</p>
<form name="suggestCompanyForm" method="post">
{{csrf_field()}}
<div class="form-group">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" id="companyName" aria-describedby="companyNameHelp" placeholder="Enter company name">
<small id="companyNameHelp" class="form-text text-muted">Enter the company's name you would like to suggest</small>
</div>
<div class="form-group">
<label for="companyEmail">Email address</label>
<input type="email" class="form-control" id="companyEmail" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">Enter the company contact email.</small>
</div>
<div class="form-group">
<label for="selectCategory">Select main category</label>
<select class="form-control" id="selectCategory">
<option>Food&Drink</option>
<option>Cosmetics</option>
<option>Electronics</option>
<option>Consumer Goods</option>
<option>Services</option>
</select>
</div>
<div class="form-group">
<label for="description">Company description.</label>
<textarea class="form-control" id="description" rows="5"></textarea>
</div>
<div class="form-group">
<label for="logo">File input</label>
<input type="file" class="form-control-file" id="logo" aria-describedby="logoHelp">
<small id="fileHelp" class="form-text text-muted">Add company logo.</small>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" id="check" class="form-check-input">
I agree that my submission follows the website rules.
</label>
</div>
<button id="submitCompany" type="submit" class="btn btn-primary" >Submit</button>
</form>
</div>
#endsection
your form inputs are not being submitted because you didn't give them names ...
Try
<textarea class="form-control" name="description" id="description" rows="5"></textarea>
You have to add the action attribute to the form tag.
Edit this line
<form name="suggestCompanyForm" method="post">
to
<form name="suggestCompanyForm" action = "<url-for-the-submission>" method="post">
.You will also need to add this
name="name_of_input_to_submit"
to each input not only the textarea and you are also uploading a file you have to add this to the form tag too.
enctype="multipart/form-data"
I'm trying to create a form in Bootstrap and need the first name and last name fields to be inline where as the rest of the form needs to be as it is.
I got the inline functionality to work. However, the inline text fields (names) are not aligning properly.
In the image above, I need the combined width of the name fields to be same as Phone, Email and Password fields, which is not happening. The question is how to get that alignment to work?
The code for the form is below:
<form role="form" class="register-form cf-style-1">
<div class="control-group" style="display:inline-block !important; margin-bottom: 25px;">
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" class="le-input" placeholder="First Name" required>
</div>
</div>
<div class="control-group" style="display:inline-block !important; margin-bottom: 25px;">
<label class="control-label">Last Name</label>
<div class="controls">
<input type="text" class="le-input" placeholder="Last Name" required>
</div>
</div>
<div class="field-row">
<label>Phone</label>
<div class="input-group">
<div class="input-group-addon">+91</div>
<input type="text" class="le-input" maxlength="10" placeholder="Phone Number">
</div>
</div>
<div class="field-row">
<label>Email</label>
<input type="email" class="le-input" placeholder="Email Address" required>
</div><!-- /.field-row -->
<div class="field-row">
<label>Password</label>
<input type="password" class="le-input" placeholder="Password" required>
</div><!-- /.field-row -->
<div class="buttons-holder">
<button type="submit" class="le-button huge">Sign Up</button>
</div><!-- /.buttons-holder -->
</form>
You should be able to remove the style of the inline-block. Then just add the class col-md-6 to each of the divs you want to be side by side. This will cause them to be a two column layout for medium displays then they will be on their own line on smaller displays. You can read more about columns here:
http://getbootstrap.com/css/#grid
Not sure what css you have to go along with this, might be useful if we can see a link to this.
But you could try adding width: 50% to the First and Last name input tags.
input {width: 50%;}
I would target these inputs by adding classes to the ones you want to change, as not to affect the other input tags
<div class="control-group">
<div class="controls form-inline">
<label for="inputKey">First Name</label>
<input type="text" class="le-input" placeholder="First Name" required>
<label for="inputValue">LastName</label>
<input type="text" class="le-input" placeholder="Last Name" required>
</div>
</div>
Is there anyway I can create a form using bootstrap which can have fields aligned in same line as well as horizontal fields?
Something like this?
in this the cvv MM and YY are in the same line..How can i make it possible using bootstrap form?
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">CVV</label><input type="email" class="form-control" id="cvv" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
I want the cvv to be aligned with the first form field
Wrap your input fields in a div and assign a col-sm-x class to it e.g:
<div class="form-group">
<label class="col-sm-3 control-label" for="cardNumber">Card # (required)</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="cardNumber" size="12" autocomplete='off'>
</div>
</div>
Also add a col-sm-x to your labels
For columns:
<div class="form-group">
<label class="col-sm-3 control-label">Expiry date(MM/YYYY) (required)</label>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
</div>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
</div>
</div>
Finally, class of form should be form-horizontal Play with the col width as you like
Wrap your input fields as above in one div but add to this div the 'form-inline' class. No need of the col-sm-x class.
<div class="form-group form-inline">
<label class="control-label">Expiry date(MM/YYYY) (required)</label>
<input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
<input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
</div>
</div>
In Bootstrap 3 the necessary code to prepend a value to the input text box
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" placeholder="Username">
</div>
http://getbootstrap.com/components/#input-groups
does not seem to preserve the formatting for an inline form http://getbootstrap.com/css/#forms-inline.
Example of code. First segment is functional inline form. Second segment adds code for prepend and it breaks the inline form causing it to be vertical (normal) instead.
http://bootply.com/101947
What am I missing here I have wasted more time than should be necessary getting this two features which work fine separately to play nice.
Use grid
<div class="form-group col-md-2">
I am not sure, this is the right way to do that but it always work for me.
<form class="form-inline" role="form">
<div class="form-group col-md-2">
<div class="input-group ">
<span class="input-group-addon">#</span>
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>