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
Related
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.
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>
I want to put the last div (processo div) align with the (tiposessao), but I want it at the next line, and I cant jump to the next line, even putting the row attribute. any solutions
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<div class="form-group">
<div class="col-md-6">
<label for="relator">Conselheiro Relator</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" id="relator" disabled="true" placeholder="Relator">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Tipo de Sessao <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Ordinaria</li>
<li>Especial</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" class="form-control" placeholder="Data da Sessao"/>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="processo" class="label-control"></label>
<input type="text" class="form-control"/>
</div>
</div>
</form>
I think this should be what you are looking for as far as i understood.
https://jsfiddle.net/rnmdt2t8/
<div class="row">
<div class="col-md-4 col-md-offset-5">
<div class="form-group">
<label for="processo" class="label-control"></label>
<input type="text" class="form-control"/>
</div>
</div>
</div>
Full code is on jsfiddle to check.
I have a form with some input tags and for each of it(I'm using bootstrap). I would like to use span with backgroud coloro but I have a problem with the size of it, because depends of text length (the best way is to use awesome, but I don't find icons useful to my purpose).
Is there a way to fix the width of the grey part of div? I tried with width, like the image, but it resize all the input fields.Thanks
<div class="row">
<!-- Fleet fields -->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-car fa-fw"></i> Fleet inputs
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<form role="form">
<div class="form-group input-group">
<span class="input-group-addon">Ap</span> <input type="text"
class="form-control" placeholder="Application">
</div>
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Cubic">
<span class="input-group-addon">cm<sup>3</sup></span>
</div>
<div class="form-group input-group">
<input type="number" class="form-control" placeholder="Power">
<span class="input-group-addon">H P</span>
</div>
<div class="form-group input-group">
<span class="input-group-addon">Eu</span> <input type="text"
class="form-control" placeholder="Euro class">
</div>
<div class="form-group input-group">
<span class="input-group-addon">Et</span> <input type="text"
class="form-control" placeholder="Engine type">
</div>
<div class="form-group input-group">
<span class="input-group-addon">Tr</span> <input type="text"
class="form-control" placeholder="Traction">
</div>
<div class="form-group input-group">
<span class="input-group-addon">Ts</span> <input type="text"
class="form-control" placeholder="Transmission">
</div>
<div class="form-group">
<label>Note</label>
<textarea class="form-control" rows="2" maxlength="100"></textarea>
</div>
</form>
</div>
<!-- /.panel-body -->
</div>
</div>
Css of input -group-addon
.input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}
you can use for fixed width of grey part of div
you can use for fixed width of grey part of div
1.<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon3">#</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3"> </div>
2. can use also another div <div class="input-group input-group-sm">
3. can use also <div class="input-group">
for the Icon you can use Class="fa fa-edit" or Class="glyphicon glyphicon-pencil"
for the Icon you can use Class="fa fa-edit" or Class="glyphicon glyphicon-pencil"
i have a form within a panel in my html using bootstrap and it seems like all my panels are well adjusted except for the one which has date and the one used to upload files in it.
they have more width than the other form groups because of the button next to them. so my question is how can i modify it to get the same width as the other form groups.
<div class=" col-md-6 col-sm-6 ">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class=" col-md-3 col-sm-3 col-xs-3 ">
<font size="4" ></font>
</div>
<div class=" col-md-8 col-sm-8 col-xs-8 ">
<font size="6" >إضافـــــة أرشيــــف </font>
</div>
</div>
</div>
<br>
<form class="form-horizontal" id="form" action="/insertArchive/" method="post" enctype="multipart/form-data">{% csrf_token %}
<div class="form-group">
<label class="col-sm-4 control-label">إســـم اﻷرشيف</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="name" id="name">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">الرقم اﻹشاري</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="ref_num" id="ref_num">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">المجلد</label>
<div class="col-sm-6">
<select class="form-control" name="section_id" id="section_id">
{% for sectidon in list %}
<option value="{{sectidon.id}}">{{sectidon.name}}</option>
{% endfor %}
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">ملاحظات</label>
<div class="col-sm-6">
<textarea class="form-control" rows="3" name="text" id="text"></textarea>
</div>
</div>
<!-- test -->
<div class="form-group">
<label class="col-sm-4 control-label">الملحقات</label>
<div class="contacts col-sm-6">
<label>إصافة ملف :</label>
<div class="form-group multiple-form-group input-group file">
<input type="file" name="file[]" class="form-control" >
<input type="text" name= "file_name[]" class="form-control" >
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-add">+</button>
</span>
</div>
</div>
</div>
</div>
<!-- test -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">حفـــظ</button>
</div>
</div>
</form>
</div>
</div>
Your problem is, that you have a .form-group class within a .form-group.
So change:
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
to:
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Working example