How put select label on the left in bootstrap - html

I have this problem:
And this is my code:
<form class="form-horizontal">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">Select list:</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="control-label" style="display: inline-block;">Select list:</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">Select list:</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">Select list:</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<button class="btn btn-default">Filtra</button>
</div>
</div>
</div>
</form>
how can I get the label side by side the select?
I have tried with the form-horizontal but doesn't work.
Thanks


use form-inline instead of form-horizontal and you can also use this link for your references http://getbootstrap.com/css/#forms


Add form-inline class to your <form> tag
Like so:
<form class="form-inline">

Related

align elements vertically and horizontally on list item

Im trying to have a layout where there are some list items, each one have a title like "Item 0", a <small> below the title, in this example with the text "Description Item 0", and then at right of this text "Item 0" and "Item 0 Description" I want a select menu and at right of this select menu another select menu, like:
Item 0 select menu select menu
Description Item 0
And this elements should be vertically aligned. Im not achieving this layout with the code below do you know how to fix?
working example:
http://jsfiddle.net/fne5xLfv/1/
The "Description Item 0" is not below "Item 0", the select menu is below the text not at the right and the elements are not vertically aligned.
Html:
<div class="container py-5">
<div class="row no-gutters">
<div class="col-12 col-lg-8">
<div class="card">
<div class="card-header">
<h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">
<span>Item 0</span>
<span>Description Item 0</span>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
<li class="list-group-item">
<span>Item 1</span>
<span>Description Item 1</span>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
<li class="list-group-item">
<span>Item 2</span>
<span>Description Item 2</span>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</ul>
</div>
<div class="card-footer">
<button type="button" class="float-right btn">Next</button>
</div>
</div>
</div>

Is something like this what you need? If not, please provide more info and also your html and CSS tries...
.list-group-item{
list-style-type: none;
}
<div class="col-12 col-lg-8">
<div class="card">
<div class="card-header">
<h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">
<form>
<label style="display:inline-block; width:150px">Item 0</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<label style="display:inline-block; width:150px">Description Item 0</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
<br>
<li class="list-group-item">
<form>
<label style="display:inline-block; width:150px">Item 1</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<label style="display:inline-block; width:150px">Description Item 1</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
</ul>
</div>
</div>
</div>
What I did:
Moved the Span inside the form, changed it to Label, added some inline style to Label and to Select, fixing the width and making it become inline aligned

hi i think i understand what you want, check this.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
</head>
<body>
<div class="container py-5">
<div class="row">
<div class="col-sm-4">
<div>item 0</div>
<div>description item 0</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<div class="row ">
<div class="col-sm-4">
<div>item 1</div>
<div>description item 1</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div>item 2</div>
<div>description item 2</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
so bootstrap divide your screen into 12 columns, when you say <div class="col-sm-4"></div> this means you are giving 4 columns out of 12 to this div.

Padding missing on Bootstrap rows

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;
}

Setting vertical height components with bootstrap

Cannot find out how to set all components centered vertically depending on the "select" height (and remove this dirty "padding" trick !!)
<form class="form-horizontal">
<div class="form-group" >
<label class="control-label col-sm-2" style="padding-top:25px;">test</label>
<div class="col-sm-2 " style="padding-top:20px;">
<select class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
<div class="col-sm-3">
<select multiple class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</form>

Give a Try
HTML
<form class="form-horizontal">
<div class="form-group" >
<div class="clearfix align-items">
<div>
<label class="control-label col-sm-2">test</label>
</div>
<div class="col-sm-2 ">
<select class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
<div class="col-sm-3">
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
</form>
CSS
.align-items
{
display: table;
}
.align-items > div
{
display: table-cell;
vertical-align: middle;
float: none;
}
or try using flex-box
hope this helps..

Is it possible to make div with class="input-group" look the same as class="form-group"?

In order to get my select list working as an input I have had to use <div class="input-group">, however it is not displaying that same way as my other <div class="form-group">'s.
Below is example code and a screen shot of the positional difference.
<div class="form-group">
<label class="col-md-3 control-label">Actual Start Date:</label>
<div class="col-md-8">
<input name="ActStartDate" type="date" class="form-control" id="ActStartDate" placeholder="Actual Start Date" value="<?php echo $_SESSION["AStDate"]; ?>">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Actual End Date:</label>
<div class="col-md-8">
<input name="ActEndDate" type="date" class="form-control" id="ActEndDate" placeholder="Actual End Date" value="<?php echo $_SESSION["AEnDate"]; ?>">
</div>
</div>
<div class="input-group">
<label class="col-md-3 control-label">Priority:</label>
<div class="col-md-8">
<select name="PPriority" class="selectpicker form-control" id="PPriority" data-live-search="true">
<optgroup>
<?php echo "<option value=" .$_SESSION["Priority"]. " selected disabled >" .$_SESSION["Priority"]. "</option>"?>
</optgroup>
<optgroup label="-----------">
<option>3</option>
<option>2</option>
<option>1</option>
</optgroup>
</select>
</div>
</div>

<div class="form-group">
<label class="col-md-3 control-label">Priority:</label>
<div class="col-md-4">
<select name="PPriority" class="selectpicker form-control" id="PPriority" data-live-search="true">
<optgroup>
<?php echo "<option value=" .$_SESSION["Priority"]. " selected disabled >" .$_SESSION["Priority"]. "</option>"?>
</optgroup>
<optgroup label="-----------">
<option>3</option>
<option>2</option>
<option>1</option>
</optgroup>
</select>
</div>
</div>
just replace the div class with form-group it works fine

If you look in your bootstrap CSS, look for the input-group element, and remove the following css code: display: table;. It will work fine.

How to evenly space 3 select box's inline using bootstrap?

I need to space 3x select box's evenly so they are all the same width but all 3x combined need to span the full length of the container under the search bar so everything lines up.
CodePen Demo
HTML:
<div class="container">
<div class="col-md-8 col-md-offset-2">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Seach here..." />
</div>
<div class="form-inline">
<div class="form-group">
<select class="form-control make-me-wider">
<option>City</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="form-group">
<select class="form-control make-me-wider">
<option>Type</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="form-group">
<select class="form-control make-me-wider">
<option>Category</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</form>
</div>
</div>
CSS:
form {
margin-top: 30px;
}
.make-me-wider {
width: 33%;
}

the div class="form-group" needs to be closed after every select. Also parent div class="form-inline" needs a class row and every div around the select having class="form-group" needs a class col-xs-4. here is a working sample of code
JSFillde URL: http://jsfiddle.net/r2qronjm/1/
form {
margin-top: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Seach here..." />
</div>
<div class="form-inline row">
<div class="form-group col-xs-4">
<select class="form-control">
<option>City</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group col-xs-4">
<select class="form-control">
<option>Type</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group col-xs-4">
<select class="form-control">
<option>Category</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</form>
</div>
</div>
hope this helps.

Just use a table inside your form-group and add a width:100% for every select
http://codepen.io/anon/pen/ogdJQa
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Seach here..." />
</div>
<div class="form-group">
<table cellpading="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<select class="form-control" style="width:100%">
<option>City</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td>
<select class="form-control" style="width:100%">
<option>Type</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td>
<select class="form-control" style="width:100%">
<option>Category</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
</table>
</div>
</form>