How to set labels above the input with #media? - html

I have simple Bootstrap block which looks like this:
The main problem occurs on smaller resolution, like 1280*600:
As you can see the mos of the ip is not seen, so I want to set labes above the inputs like this:
<div class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-3 control-label" for="textinput" style="text-align:center">Server IP</label>
<div class="col-sm-4">
<input type="text" placeholder="Enter IP Address" class="form-control">
</div>
<label class="col-sm-1 control-label" for="textinput">Port</label>
<div class="col-sm-3">
<input type="text" placeholder="Enter Port" class="form-control">
</div>
</div>
</div>


I assume you mean 600x1280 rather than the other way round as 1280x600 is quite wide.
How about something like this..
<div class="form-horizontal" role="form">
<div class="form-group">
<div class="col-xs-7">
<div class="container-fluid">
<div class="row">
<label class="col-xs-12 col-sm-3 control-label" for="textinput" style="text-align:center">Server IP</label>
<div class="col-xs-12 col-sm-9">
<input type="text" placeholder="Enter IP Address" class="form-control">
</div>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="container-fluid">
<div class="row">
<label class="col-xs-12 col-sm-3 control-label" for="textinput">Port</label>
<div class="col-xs-12 col-sm-9">
<input type="text" placeholder="Enter Port" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>

Related

form element alignment problem with bootstrap 3

I am using bootstrap 3 for my form design. i am using below structure.
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Age</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Class</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">School</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Subject</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Grade</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
</div>
<div class="col-md-6" id="monthData">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Monthly Amount</label>
<div class="col-sm-5">
<input type="text" class="form-control"/>
</div>
<div class="col-sm-4">
<input type="text" size="9" class="form-control" placeholder="No.of months">
</div>
</div>
</div>
</div>
This layout is working well. But problem is, sometimes i need to hide "monthData" division. When i hide it, there is a empty space right side of the row. how i avoid this.
As a solution i tried to change my layout as below.
<div class="row">
<div class="col-md-6">
form elements
</div>
<div class="col-md-6">
form elements
</div>
</div>
According to my solution, empty space issue is fixed. But Tab index is going up to down. but i need to left to right.
Can you help me to solve these issues. any one know better structure??

Add the tabindex attribute to the input with value in the required sequence.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="1">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Age</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="3" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Class</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="2" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">School</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="4" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Subject</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="5" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Grade</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="9" />
</div>
</div>
</div>
<div class="col-md-6" id="monthData">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Monthly Amount</label>
<div class="col-sm-5">
<input type="text" class="form-control" tabindex="6" />
</div>
<div class="col-sm-4">
<input type="text" size="9" class="form-control" placeholder="No.of months" tabindex="7">
</div>
</div>
</div>
</div>

My columns are too small inside my panel

As you can see from my image I have a panel with 2 columns inside. I also need these columns to have input fields for a form. The problem is I can't get the input field width to be the same size as the column. Any help would be appreciated.
<div class="container">
<div class="row">
<div class="col-md-12">
<form method="POST" class="form-horizontal" role="form">
<div class="panel panel-default">
<div class="panel-heading">
Test Heading
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-2 control-label" for="Column1Row1">Column1Row1</label>
<div class="col-md-4">
<input class="form-control input-sm" type="text" name="" value="" id="Column1Row1">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-md-2 control-label" for="Column2Row1">Column2Row1</label>
<div class="col-md-4">
<input class="form-control input-sm" type="text" name="" value="" id="Column2Row1">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

Change
<div class="form-group">
<label class="col-md-2 control-label" for="Column1Row1">Column1Row1</label>
<div class="col-md-4">
<input class="form-control input-sm" type="text" name="" value="" id="Column1Row1">
</div>
</div>
to
<div class="row form-group">
<label class="col-md-3 control-label" for="Column1Row1">Column1Row1</label>
<div class="col-md-9">
<input class="form-control input-sm" type="text" name="" value="" id="Column1Row1">
</div>
</div>
I have included row class and then inside the row you need to extend the label and input in total to 12 columns. So, the label occupies 3 columns and input field occupies 9 columns.
Example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<form method="POST" class="form-horizontal" role="form">
<div class="panel panel-default">
<div class="panel-heading">
Test Heading
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="row form-group">
<label class="col-md-3 control-label" for="Column1Row1">Column1Row1</label>
<div class="col-md-9">
<input class="form-control input-sm" type="text" name="" value="" id="Column1Row1">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row form-group">
<label class="col-md-3 control-label" for="Column2Row1">Column2Row1</label>
<div class="col-md-9">
<input class="form-control input-sm" type="text" name="" value="" id="Column2Row1">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

Align Labels and Textboxes in Form-Inline

I am using bootstrap's grid system and want to create an inline form.
Here is what I have:
<div class="container body-content">
<form class="well form-inline" style="width: 100%;">
<div class="row">
<div class="form-group col-md-4">
<label>Location:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Assignment:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Incident Number:</label>
<input type="text" class="form-control">
</div>
</div>
<br>
<br>
<div class="row">
<div class="form-group col-md-4">
<label>Date:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Training:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Example:</label>
<input type="text" class="form-control">
</div>
</div>
</form>
</div>
When this is ran, there is no structure or alignment for the textboxes or the labels. How can I achieve this?
Here is a bootply

For each label and input you should make this structure:
<div class="form-group col-md-4">
<label class="col-lg-4 control-label">Location:</label>
<div class="col-lg-8">
<input type="text" class="form-control">
</div>
</div>
this will make it work with the grid system
See bootply

How to fixed the form fields alignment issues using css and bootstrap

I have created a form using bootstrap. When it displays an error, the div block below the error shifts to right. How can this be fixed using CSS?
This is a screenshot of how it looks after an error is shown:
Code
https://jsfiddle.net/yzm2aj9j/#&togetherjs=Q8Bk7CaMjy
<form>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="username" class="col-md-6 control-label">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="username" placeholder="User Name">
</div>
<div class="col-xs-12" style="color:#ff5555;">
<span class="error">User Name Cannot Be Blank</span>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="phone" class="col-md-6 control-label">Phone</label>
<div class="col-md-6">
<input type="text" class="form-control" id="phone" placeholder="phone">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</form>

According to Bootstrap's Documentation:
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
If default grids are being used then rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
You need to wrap two .col-xs-6 in one .row. Your code structure should be like this:
<div class="row">
<div class="col-xs-6">
// column content goes here...
</div>
<div class="col-xs-6">
// column content goes here...
</div>
</div>
<div class="row">
<div class="col-xs-6">
// column content goes here...
</div>
<div class="col-xs-6">
// column content goes here...
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="username" class="col-md-6 control-label">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="username" placeholder="User Name">
</div>
<div class="col-xs-12" style="color:#ff5555;">
<span class="error">User Name Cannot Be Blank</span>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="phone" class="col-md-6 control-label">Phone</label>
<div class="col-md-6">
<input type="text" class="form-control" id="phone" placeholder="phone">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</div>
</form>

CSS Bootstrap : 2 column form with label on the left

I've been trying for 3 hours to make a 2 column form with the label aligned on the left, but i am really not getting it. I've read bootstrap documentation, tried to play with "row" class but i dont have the result i want.
Here's a picture of what i'm trying to do, it has to be in 1 form. I've seen a lot of question about this, but no one seems to fit my problem ( people wanted them vertical aligned or within 2 different forms )
If anyone can show me the way to do it, and if possible, some explanation about how to align things using rows, it would be awesome !

Try this ;)
<form class="form-horizontal" role="form">
<div class="col-sm-6">
<div class="container-fluid">
<div class="form-group">
<label class="col-sm-2 control-label">Test</label>
<div class="col-sm-10">
<input class="form-control">
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="container-fluid">
<div class="form-group">
<label class="col-sm-2 control-label">Test</label>
<div class="col-sm-10">
<input class="form-control">
</div>
</div>
</div>
</div>
</form>
http://jsfiddle.net/ttyneyq9/

You say 2 columns, but this configuration looks to me like it should be 4 columns. Because the labels should be their own column, and the textboxes should also be their own.
Something like this:
<div class="row">
<div class="col-sm-2">label</div>
<div class="col-sm-4">textbox</div>
<div class="col-sm-2">label in "2nd" column</div>
<div class="col-sm-4">textbox in "2nd" column</div>
</div>
<div class="row">
<div class="col-sm-2">label</div>
<div class="col-sm-4">textbox</div>
<div class="col-sm-2">label in "2nd" column</div>
<div class="col-sm-4">textbox in "2nd" column</div>
</div>
<div class="row">
<div class="col-sm-2">label</div>
<div class="col-sm-4">textbox</div>
<div class="col-sm-6 text-right">Pay by Phone/SMS</div>
</div>

I've been trying for 3 hours to make a 2 column form with the label aligned on the left, but i am really not getting it.
Because it's a form, you should really take advantage of Bootstraps .form-control and .form-group classes. Here is a sample fiddle for you to review http://jsfiddle.net/yongchuc/hzktphu6/. Bootstrap reference can be found here as well: http://getbootstrap.com/css/#forms

Shouldn't be too bad. You can do it a couple ways:
1) Split each row up into 4 columns
<div class="row">
<div class="col-md-2"><label for="Username">Username</label></div>
<div class="col-md-4"><input type="text" name="Username" /></div>
<div class="col-md-2"><label for="Membership">Membership></label></div>
<div class="col-md-4"><select name="Membership"></select></div>
</div>
<!-- Add other rows for both columns -->
2) Use nested rows/columns
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><label for="Username">Username</label></div>
<div class="col-md-9"><input type="text" name="Username" /></div>
</div>
<!-- Add other rows for first column -->
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><label for="Membership">Username</label></div>
<div class="col-md-9"><select name="Membership"></select></div>
</div>
<!-- Add other rows for the second column -->
</div>
</div>
In Bootstrap, each row consists of 12 columns by default. The column span is specified in the CSS class for each column (e.g. "col-md-3" will span 3 columns on medium sized screens or larger, for smaller screens the labels will go above the input). You'll just have to adjust the column spans to your liking.

For me it will be something like that
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><label>Username</label></div>
<div class="col-md-9"><input type="text" name="Username" class="form-control" /></div>
</div>
<div class="row">
<div class="col-md-3"><label>Password</label></div>
<div class="col-md-9"><input type="password" name="Password" class="form-control" /></div>
</div>
<div class="row">
<div class="col-md-3"><label>Email</label></div>
<div class="col-md-9"><input type="email" name="Email" class="form-control" /></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><label>Membership</label></div>
<div class="col-md-9"><select name="Membership">----options------</select></div>
</div>
<div class="row">
<div class="col-md-3"><label>Payment</label></div>
<div class="col-md-9"><select name="Payment">----options------</select></div>
</div>
</div>
</div>
and the reason why this is the better solution is because when it's displayed on mobile they will show below each others in the same order as they're written above

<form class="form-horizontal">
<div class="col-xs-6 form-group">
<label for="inputEmail" class="control-label col-xs-4">Valet Parking</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputEmail" class="control-label col-xs-4">Kids menus</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">Car Parking</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">High chairs</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputEmail" class="control-label col-xs-4">Internet</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputEmail" class="control-label col-xs-4">Play areas</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">TVs</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">Handicap accessible</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputEmail" class="control-label col-xs-4">Outdoor seating</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">Pets</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">Smoking areas</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>