how can i fixed top my cross button ?
help me please !
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid user-information" id="registerid">
<button class="btn btn-lg btn-blue-cross fixed " type="submit" style="float:right">X</button>
<div class="row">
<div class="col-md-4"></div>
<div class="animatable bounceIn">
<div class="col-md-4">
<form class="form-horizontal error" novalidate="">
<div class="control-group error">
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Name" required="" minlength="3">
</div>
<p class="help-block"></p>
</div>
<div class="control-group error">
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></span>
<input id="email" type="email" required="" name="email" aria-invalid="true" class="form-control" placeholder="...#gmail.com">
</div>
<p class="help-block"></p>
</div>
<div class="control-group error">
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
<input type="password" class="form-control" id="password" name="password" placeholder="Password" required="" minlength="8">
</div>
<p class="help-block"></p>
</div>
<div class=" control-group error">
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span></span>
<input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm Password" data-validation-matches-message="Must match confirm password entered above" data-validation-matches-match="password" required="">
</div>
<p class="help-block"></p>
</div>
<div class="control-group">
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-phone" aria-hidden="true"></span></span>
<input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required="" minlength="11">
</div>
<p class="help-block"></p>
</div>
<div class="control-group">
<button class="btn btn-success btn-block" type="submit" style="float:right">Submit</button>
<div class="input-group">
<input id="terms-and-conditions" type="checkbox" data-validation-required-message="You must agree to the terms and conditions" required="" name="terms-and-conditions" aria-invalid="true"> I agree to the terms and conditions
<p class="help-block" style="display:none;"></p>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
see , my cross button is not fix . how can i fix my cross button .
i know only navbar can be fixed .
.btn-blue-cross{
position:fixed;
}
it will working but when i am doing my screen small like as mobile version , then button will hide .
how can i solve this problem ?
Try:
.btn-blue-cross{
position:fixed;
top: 0;
z-index: 10;
}
Add this following code in css button which you want to be fixed on top on scroll.
.btn-blue-cross{
position: fixed;
top: 10px;
right: 10px;
}
Let me know if it works and if thats what you wanted
css will be:
.btn-blue-cross{
position:fixed;
top: 0;
z-index: 10;
}
If you just want your button to remain visible change your HTML structure to account for it by placing it in a column and then using an offset for the form. Change the btn from fixed to absolute in your css if you dont want it to scroll with the page.
See working Snippet.
.btn-blue-cross {
position: absolute;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid user-information" id="registerid">
<div class="row">
<div class="col-xs-2 col-md-1">
<button class="btn btn-lg btn-blue-cross fixed " type="submit" style="float:right">X</button>
</div>
<div class="animatable bounceIn">
<div class="col-xs-10 col-md-4 col-md-offset-3">
<form class="form-horizontal error" novalidate="">
<div class="control-group error">
<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Name" required="" minlength="3">
</div>
<p class="help-block"></p>
</div>
<div class="control-group error">
<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></span>
<input id="email" type="email" required="" name="email" aria-invalid="true" class="form-control" placeholder="...#gmail.com">
</div>
<p class="help-block"></p>
</div>
<div class="control-group error">
<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
<input type="password" class="form-control" id="password" name="password" placeholder="Password" required="" minlength="8">
</div>
<p class="help-block"></p>
</div>
<div class=" control-group error">
<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span></span>
<input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm Password" data-validation-matches-message="Must match confirm password entered above" data-validation-matches-match="password" required="">
</div>
<p class="help-block"></p>
</div>
<div class="control-group">
<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-phone" aria-hidden="true"></span></span>
<input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required="" minlength="11">
</div>
<p class="help-block"></p>
</div>
<div class="control-group">
<button class="btn btn-success btn-block" type="submit" style="float:right">Submit</button>
<div class="input-group">
<input id="terms-and-conditions" type="checkbox" data-validation-required-message="You must agree to the terms and conditions" required="" name="terms-and-conditions" aria-invalid="true">I agree to the terms and conditions
<p class="help-block" style="display:none;"></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Related
i have two forms. One form for login and the other form for reset the password.
Now i want to set the both buttons (login, password reset) side by side.
But i don't know, how to do that.
And here is my code:
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
I hope you can help me.
Keep the button elements in same form and add form attribute to the other button to which you want to associate with other form element.
From MDN:
The form element that the button is associated with (its form owner). The value of the attribute must be the id attribute of a element in the same document. If this attribute is not specified, the element will be associated to an ancestor element, if one exists. This attribute enables you to associate elements to elements anywhere within a document, not just as descendants of elements.
Example:
<form id="firstForm">
<button>Submit First form</button>
<button form="secondForm">Submit Second form</button>
</form>
<form id="secondForm">
</form>
Give your second form an id (e.g. "form2"), and add this CSS:
#form2 {
position: relative;
bottom: 25px;
left: 55px;
}
i changed css of two buttons, now it works, here you can run, nd see it's working now.
i added style="float:left;" in <input type="submit" class="form-control btn-default" value="Login"/> and <input class="form-control btn-default" type="submit" value="Passwort vergessen"/>
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" style="float:left;" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" style="float:left;" />
</div>
</div>
</form>
<style>
#resetForm {
position: relative;
bottom: 37px;
left: 55px;
}
</style>
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row" id="resetForm">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
If you want to put the buttons side by side you can add the css property float: left; to the login button and it'll work, but it'll work only for this example.
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" style="float:left; />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
Important note:
I don't think it's a good idea to use a form only for a button element, you should think of using it in the same form and apply the float: left; property to the buttons, it makes more sense and it's better for your DOM.
Better way to do
You should not use a second form to reset your first form.
You have to use only one form and add an input with type="reset"
By this way you can place your buttons side by side in only one line and reset works !
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
<input type="reset" value="Reset"/>
</div>
Live demo :
https://jsfiddle.net/20o2ahnr/
I want to create an inline form using bootstrap with labels above input text fields but the result looks so messed up.
This is what i tried:
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkin">check in</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkout">check out</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
this is what i got:
result
how do i get the submit button to right position and the glyphicons heights the same as the input fields what am i doing wrong?
I made some edits to your html : https://jsfiddle.net/05t4s041/
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="col-md-2">
<label for="checkin">check in</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<label for="checkout">check out</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
you could put divs with bootstrap classes around your label and control like:
<div class="col-md-2">
<div class="row">
<div class="col-md-6">
<label for="from">from:</label>
</div>
<div class ="col-md-6">
<input type="text" class="form-control form-text" />
</div>
</div>
</div>
The row div may be sufficient: it put's elements in a row put I like to put extra bootstrap classes around my controls so I can modify them. For example that the label has a smaller width than the control itself.
I'm very sorry if this is just a simple question but I'm really bad when it comes to alignment/positioning of elements and stuff like that so here it goes.
My problem is shown here:
http://imgur.com/a/xscLJ
I just want the glyphicon to appear beside the textfield not above it. Just that. I tried putting it inside the form tag but the result is the same. Here is my code.
<div id="form" class="collapse in">
<div id="loginwrong" style="display: inline-block; vertical-align: top;">
<div id="loginwrong2" style="display: none;">
<span class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em;"></span>
</div>
</div>
<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
</div>
I also have a script that will show the glyphicon if the password is wrong. (it's basically a password-accepting textfield)
<?php
echo "<script type='text/javascript'>
$('#loginwrong2').show();
</script>";
?>
From http://getbootstrap.com/css/#forms-control-validation
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
Example fiddle: https://jsfiddle.net/s8p0xyyc/
if you are using bootstrap, you should use bootstrap to design the form
<?php
echo "<script type='text/javascript'>$('#loginwrong2').show();</script>";
?>
<div class="container">
<div class="row">
<div class="col-md-1">
<span id="loginwrong2" class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em; display:none;"></span>
</div>
<div class="col-md-11">
<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
</div>
</div>
</div>
PD: this is not a php question
Just add the right classes and move back the span with the incon inside the form
<div id="form" class="collapse in form-group ">
<form method="POST" class="form-inline has-feedback" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
<span id="loginwrong2" class="glyphicon glyphicon-remove-circle form-control-feedback" aria-hidden="true" style="color: red; font-size: 2em;"></span>
</form>
</div>
Thanks for everyone who answered! I got what I want by making a div for the glyphicon and a div for the form. Both divs has the display: inline-block in their styles.
<div id="form" class="collapse in">
<div id="loginwrong" style="display: inline-block; vertical-align: top;">
<div id="loginwrong2" style="display: none;">
<span class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em;"> </span>
</div>
</div>
<div style="display: inline-block;">
<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
</div>
</div>
Change your css make <span id="loginwrong2"> {position:absolute;left:12%;top:10%}
See this
http://www.bootply.com/BLgAr0zrLA
I'm creating a contact page which currently looks like this:
But I want it to look like this:
How do I accomplish this? I had a look around on the bootstrap website but couldn't really find a good example.
I just started using bootstrap so I'm completely new to it.
My code right now:
<div class="container">
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<!-- Form Name -->
<legend style="font-weight: bold;">Neem contact op</legend>
<div class="container" style="margin-bottom: 15px">
<h4 style="font-weight: bold; "> Gegevens</h4>
<span style="font-weight: bold;">Naam:</span> test<br>
<span style="font-weight: bold;">Woonplaats:</span> test <br>
<span style="font-weight: bold;">Adres:</span> test <br>
<span style="font-weight: bold;">Postcode:</span> test <br>
<span style="font-weight: bold;">Telefoon:</span> test <br>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Voornaam</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="First Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" >Achternaam</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="last_name" placeholder="Last Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Telefoon</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="06-12345678" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-4 control-label">Bericht</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" placeholder="Project Description"></textarea>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-warning" >Verstuur <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
</div>
</div><!-- /.container -->
Use HTML Structure given below.
Some enhancements in HTML structure to solve your issue.
Removed all "col-md-4" and added wrapper for each input.
<div class="container">
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<!-- Form Name -->
<legend style="font-weight: bold;">Neem contact op</legend>
<div class="container" style="margin-bottom: 15px">
<h4 style="font-weight: bold; "> Gegevens</h4>
<span style="font-weight: bold;">Naam:</span> test<br>
<span style="font-weight: bold;">Woonplaats:</span> test <br>
<span style="font-weight: bold;">Adres:</span> test <br>
<span style="font-weight: bold;">Postcode:</span> test <br>
<span style="font-weight: bold;">Telefoon:</span> test <br>
</div>
<div class="clearfix">
<div class="col-xs-12">
<!-- Text input-->
<div class="form-group">
<label class="control-label">Voornaam</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="First Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="control-label">Achternaam</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="last_name" placeholder="Last Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="control-label">E-Mail</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="control-label">Telefoon</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="06-12345678" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="control-label">Bericht</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" placeholder="Project Description"></textarea>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<button type="submit" class="btn btn-warning">Verstuur <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<!-- /.container -->
According to your image, you need full width then you should not use col-md-4 as by this your columns will be in 25%(arround) of the space so just do one thing remove them as by default it will be in width which you want..
here is updated fiddle. I just removed all col-md-4 and you got your result.
You can do by removing the class class-horizontal from the form tag and change your html accordingly describe below in jsFiddle
See :
jsFiddle
Created a form for user input by making use of Bootstrap classes. I have included the simple form inclusion for your perusal.
Issue:
1.) I am trying to place the glyphicon within the input box of the form, however the icon is placed outside. I have called the glyphicon glyohicon-date within the input tag class but the icon is placed outside of the input box. How is it possible for me to input it inside the input box?
Thanks.
<div class="row row-content">
<div class="col-xs-12 col-lg-3">
<p style="padding:20px;"></p>
<h3 align=center>Reserve A Table</h3>
</div>
<div class="col-xs-12 col-sm-9">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Number of Guests</label>
<div class="input-group col-sm-4">
<input type="radio">
<span> 1 </span>
<input type="radio">
<span> 2 </span>
<input type="radio">
<span> 3 </span>
<input type="radio">
<span> 4 </span>
<input type="radio">
<span> 5 </span>
<input type="radio">
<span> 6 </span>
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Date & Time</label>
<div class="col-sm-4">
<input type="text" class="form-control glyphicon glyphicon-calendar" aria-hidden="true" id="Date" name="Date" placeholder="Date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
</div>
<div class="col-sm-4">
<input type="text" class="form-control glyphicon glyphicon-time" id="Time" name="Time" placeholder="Time">
</div>
</div>
<button type="submit" class="btn btn-default">Reserve</button>
</form>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<strong>Warning!</strong> Please <strong>call</strong> us to reserve for more than six guests.
</div>
</div>
</div>
Have managed to solve it from the given link: With optional icons
<div class="form-group has-feedback">
<label for="firstname" class="col-sm-2 control-label">Date & Time</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="Date" name="Date" placeholder="Date">
<span class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></span>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="Time" name="Time" placeholder="Time">
<span class="glyphicon glyphicon-time form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group form-inline">
<label for="datetime" class="col-sm-2 control-label">Date and Time</label>
<div class="col-sm-5">
<div class="form-group has-feedback">
<input type="text" class="form-control" id="datetime" name="datetime" placeholder="Date">
<i class="glyphicon glyphicon-calendar form-control-feedback"></i>
</div>
</div>
<div class="col-sm-5">
<div class="form-group has-feedback">
<input type="text" class="form-control" id="datetime" name="datetime" placeholder="Time">
<i class="glyphicon glyphicon-time form-control-feedback"></i>
</div>
</div>
</div>
This is a coursera assignment of Bootstrap
using the "With optional icons" method in Bootstrap you can achieve this:
for example, my answer to this question:
<div class="form-group has-feedback">
<label class="col-sm-2 control-label" for="date-choose">Date and Time</label>
<div class="col-sm-5">
<input type="date" class="form-control" id="date-choose" placeholder="Date">
<i class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></i>
</div>
</div>
you can refer to the link below to find what you want:
http://getbootstrap.com/css/#forms-control-validation
The one more thing you have to know is that this only adds the icon to the input box but not changes the default action of the JavaScript behind it, so the icon you are adding has no response unless you change the default event of this input box.