Boostrap CSS How to make span, input text, checkbox in one line? - html

Hi
I using css and boostrap.
I have a span, input, checkbox which i want to put into one line.
But it came out like in the picture. The checkbox drop down to second line.
Here is the code.
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<label>
<span style="width: 55%; display:inline-block;" type="text" class="display-control backgroundcolor" value="">Gym<span style="color: Red; font-weight:800;font-size:larger;">*</span></span>
<input style="width: 33%; display: inline-block; text-align: right;" type="number" id="Amount" name="Amount" class="form-control" value="0.00">
<label class="checkbox">
<input type="checkbox" class="checkbox__control" name="Facilities" data="Gym" id="F011">
<span style="float: right; width: 11%;" class="checkbox__label"> </span>
</label>
</label>
</div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<label>
<span style="width: 55%; display:inline-block;" type="text" class="display-control backgroundcolor" value="">Mall<span style="color: Red; font-weight:800;font-size:larger;">*</span></span>
<input style="width: 33%; display:inline-block; text-align:right;" type="number" id="Amount" name="Amount" class="form-control" value="0.00">
<label class="checkbox">
<input type="checkbox" class="checkbox__control" name="Facilities" data="Mall*" id="F012">
<span style="float: right; width: 11%;" class="checkbox__label"> </span>
</label>
</label>
</div>
</div>
Hope someone can help on this. Thank


<div class="checkbox__control">
<input type="checkbox" class="checkbox__control" id="exampleCheck1">
<label class="checkbox__control" for="exampleCheck1">Check me out</label>
</div>
try this one . .

Related

Centering inputs with css and bootstrap 4

I have a form that I want to center on the page. The labels are centered but for some reason, I can't center the input with the form-control class.
It is rendering like this right now...
[EDIT: the display: block; inside form-control is causing the issue. Not sure why, how can I disable it]
#centered {
text-align: center;
}
<div id='centered'>
<span class="form-group">
<h5 class="label">Email</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Name</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Create A Password</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Confirm Password</h5>
<input class="form-control" id="ex2" type="text">
</span>
<input class="form-group-check-input" type="checkbox" value="" id="confirm_terms"> <strong>Agree to terms</strong>
</div>

You can try to change the display property of all form-control inside that div:
#centered .form-control {
display: inline;
}

Use the class mx-auto
/* CSS used here will be applied after bootstrap.css */
#centered {
text-align: center;
width:100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id='centered' class="mx-auto">
<span class="form-group">
<h5 class="label">Email</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Name</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Create A Password</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Confirm Password</h5>
<input class="form-control" id="ex2" type="text">
</span>
<input class="form-group-check-input" type="checkbox" value="" id="confirm_terms"> <strong>Agree to terms</strong>
</div>

Putting a checkbox, label and input box next to each other

I am trying to put a checkbox, label and input box next to each other.
I separated it into divs and and put divs side-by-side.
I was able to get the buttons center but they are to close together which I am trying to fix too.
My question is how can I get <div class="col-centered border"> into a smaller border and put a checkbox, label and input box next to each other. In the end I want the buttons and all as a container.
html
<div class="col-centered border">
<form>
<div class="first">
<div class="form-group">
<input type="checkbox" class="form-check-input">
<label for="ssn">SSN:</label>
<input type="text" class="form-control-file" id="ssn" placeholder="Social Security Number">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="lastname">Lastname:</label>
<input type="text" class="form-control-file" id="lastname" placeholder="Password">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="role">Role:</label>
<input type="text" class="form-control-file" id="role" placeholder="Password">
</div>
</div>
<div class="second">
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="userId">User ID:</label>
<input type="text" class="form-control-file" id="userId" placeholder="User Id">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="office">Office</label>
<input type="text" class="form-control-file" id="office" placeholder="Office">
</div>
<input type="checkbox">Include Subordinates
</div>
<div class="center-block lower-button">
<div class="center-block">
<button type="submit" class="btn btn-default btn-md left-button">Search</button>
<button type="submit" class="btn btn-default btn-md right-button">Reset</button>
</div>
</div>
</form>
</div>
css
.first {
width: 100px;
float: left;
padding-left: 450px;
}
.second {
width: 200px;
float: right;
padding-right: 950px;
}
.col-centered{
padding-top: 30px;
float: none;
margin: 0 auto;
}
.btn-beside {
position: center;
left: 100%;
top: 0;
margin-left: -10px;
}
.lower-button{
padding-top:250px;
padding-left:575px;
}
.left-button{
padding-right: -14px;
}
.form-group{
text-align: center;
}
I am using bootstrap

Here's a Fiddle for you to take inspiration from.
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="input-group-addon">
<label for="tbox">My Label</label>
</span>
<input type="text" id="tbox" class="form-control">
</div>
</div>
</div>
</div>
As per the official documentation for Bootstrap.

How to make radiobutton width the same for different width columns

I am having trouble making the radio button area (input-group-addon) the same size in col-sm-4 and col-sm-6 columns. I looked at some other answers where people used min-width and this solution did not work for me. I would like a uniform width for my radio button controls. Here is a visual example. My first radiobutton (input-group-addon) is wider than the second input-groups imgur link
.form-control {
width: 150px;
}
.radio-width {
width: 30px;
}
<div class="container">
<div class="form-group">
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon radio-width">
<span class="control-label">
<input type="radio" name="anyDate" value="anyDate">
</span>
</span>
<div class="input-group-addon">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon radio-width">
<span class="control-label">
<input type="radio" name="dateRange" value="dateRange">
</span>
</span>
<div class="input-group-addon">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-2">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</div>
</div>
here is the fiddle https://jsfiddle.net/DTcHh/20504/

I think you are making a bit of confusion with input-group-addon element.
An input-group-addon should be coded as follows:
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
Therefore your code should be like:
<div class="input-group">
<span class="input-group-addon"> <!-- don't need radio-width -->
<input type="radio" name="anyDate" value="anyDate">
</span>
<input type="text" class="form-control input-full">
</div>
Fiddle here.

How to align label and text box in line through html?

With the below code, the summary and it's text box are aligned inline.But the text box for description is appearing below the label 'description'. How can I make it align inline? Please help me in resolving this.
.left {
width: 30%;
float: left;
text-align: right;
}
.right {
width: 65%;
margin-left: 10px;
float: left;
}
<body>
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
<h1 class="text-center" style="font-family:Colonna MT;font-size:50px;color:ForestGreen ;">Post Your Ad</h1>
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description" style="height:100px;width:400px">
</div>
</form>
</div>
</div>
</div>

Try like this: Demo
If you need multi line text box, use textarea instead of input type text
<div class="form-group row">
<label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Summary</label>
<div class="col-md-6 col-sm-12">
<input type="text" class="form-control" name="Summary" size="50">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Description</label>
<div class="col-md-6 col-sm-12">
<textarea class="form-control" name="Description"></textarea>
</div>
</div>
Edit:
As you mentioned, its not form-control class, its form-control-label.. You can get more info here
Updated Demo: To change the height, try chnaging the value of rows="8" for <textarea>

If you're using Bootstrap (as the classes on your code suggest). I would recommend using their form layout options. Sounds like you want a Horizontal Form:
Docs
For Example:
<form class="form-horizontal">
<div class="form-group">
<label for="summary" class="col-sm-2 control-label">Summary</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="summary" />
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="description" style="height:100px;width:400px" />
</div>
</div>
</form>

<input class="right" type="text" name="Description" style="height:100px;width:400px;">
Remove width from input of description, also please change to textarea, instead of input.

You have already used bootstrap framework.so that there is no need to write extra css for inline forms. follow the following code
<div class="form-group">
<label class="col-lg-3 control-label ">City</label>
<div class="col-lg-9">
<div class="form-inline">
<div class="form-group ">
<div class="col-lg-12">
<label class="sr-only" for="city">City</label>
<input type="text" id="city" name="city" class="form-control " placeholder="E.g. Thrissur" >
</div>
</div>
<div class="form-group ">
<div class="col-lg-12">
<label class="sr-only" for="county">County</label>
<input type="text" id="county" name="county" class="form-control " placeholder="E.g. India" >
</div>
</div>
</div>
</div>
</div>

Like this?
https://jsfiddle.net/d6tscd18/
.left {
width: 30%;
display: inline-block;
text-align: right;
}
.right {
width: 65%;
margin-left: 10px;
display: inline-block;
}

try this:
<html>
<head>
<title>sample</title>
<style type="text/css">
.left {
width: 30%;
display: inline-block;
text-align: right
}
.right {
margin-left: 10px;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
<h1 class="text-center" style="font-family:Colonna MT;font- size:50px;color:ForestGreen ; text-align: center">Post Your Ad</h1>
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50" style="width:400px">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description" style="height:100px;width:400px">
</div>
</form>
</div>
</div>
</div>
</body>
</html>

If you have trouble getting it in place you can also force a table layout without using tables:
.login-form {
display: table;
}
.login-form>div {
display: table-row;
}
.cell {
display:table-cell;
vertical-align: top;
}
...
Adding a div around the inputs and a "cell" class (and shouldn't it be a textarea?):
...
<form action="post" class="login-form">
<div>
<label class="left cell">Summary:</label>
<div class="cell">
<input class="right" type="text" name="Summary" size="50">
</div>
</div>
<div>
<label class="left cell">Description:</label>
<div class="cell">
<textarea class="right" name="Description" style="height:100px;width:400px"></textarea>
</div>
</div>
</form>
...
Check it here

Remove the style attribute from the description input type, it will then appear as the summary input box.
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50" style="width:400px">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description">

CSS style theming for checkboxes

I'm trying to achieve the picture above on the Target Time section....
All I have is as below... But the placement is not right when I resize my browser, and I don't know how to add the peak time picture above the checkboxes. Anyone can help ?
<div class="row-fluid">
<label style="float:left; margin-right:14px;">Target Time</label>
<div style="float:left; display:block;">
<label class="checkbox inline">
<input type="checkbox" value="7am-11:59am" name="target_time[]" />7am-11:59am</label>
<label class="checkbox inline">
<input type="checkbox" value="12pm-5:59pm" name="target_time[]" />12pm-5:59pm</label>
<label class="checkbox inline">
<input type="checkbox" value="6pm-9:59pm" name="target_time[]" />6pm-9:59pm</label>
</div>
<div style="position:relative; display:block;">
<div style="float: left; border-right: 1px solid #aaa; height: 5em;"></div>
<label class="checkbox inline">
<input type="checkbox" value="10:00pm-2:00am" name="target_time[]" />10:00pm-2:00am</label>
<label class="checkbox inline">
<input type="checkbox" value="2:01am-6:59am" name="target_time[]" />2:01am-6:59am</label>
</div>
</div>
Jsfiddle DEMO: http://jsfiddle.net/a8VpS/1/

Do you want this kind of structure.if yes then check the following structure for you check boxes
<div style="float:left;">
<img src='http://forums.animesuki.com/images/as.global/icons/icon7.gif'><br>
<label class="checkbox inline">
<input type="checkbox" value="7am-11:59am" name="target_time[]"/>7am-11:59am
</label>
</div>
Fiddle Demo
Is this what you expect -->
Check The updated Fiddle Demo