Screenshot of form
I'm having trouble with Bootstrap. I have a form with three textboxes. The top textbox, email, is not aligned with the rest of the textboxes. I've included the HTML:
<form role="form" action="register.php" method="POST" form-horizontal novalidate>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="email"></label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>
</form>
</div>
<form class="form-horizontal" role="form">
<div class="form-group">
<span></span>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
</div>
</form>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="username"></label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Enter password ">
</div>
</div>
</form>
<div class="form-group">
<div class="col-sm-offset-0 col-sm-10">
<button type="submit" class="btn btn-primary" name="submit">Register</button>
</div>
</div>
</form>
I don't understand what I'm doing wrong. Any help would be appreciated, thanks.
Using form class only one time not again & again and if you want text like "email" then use <label class="control-label col-sm-4" for="email">Email</label> otherwise no use of it and use only 12 column as [col-sm-2] for label and for input [col-sm-10] or you can use as [col-sm-4] or [col-sm-8]
<form role="form" action="register.php" method="POST" class="form-horizontal novalidate">
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" class="form-control" id="password" placeholder="Enter password ">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" name="submit">Register</button>
</div>
</div>
</form>
You have missplaced few css class,replace your form with following code, will solve your problem:
<form role="form" action="register.php" method="POST" class='form-horizontal novalidate' role="form">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">UserName</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="Enter User Name">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Enter Password"> </div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" name="submit">Register</button>
</div>
</div>
</form>
You have used wrong html code. Replace your form with following code, will solve your problem:
<form role="form" action="register.php" method="POST" form-horizontal novalidate>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">User Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Enter password ">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-0 col-sm-10">
<button type="submit" class="btn btn-primary" name="submit">Register</button>
</div>
</div>
</form>
Here is my jsfiddle code : https://jsfiddle.net/0oeabj76/1/
Related
Hi can someone help me with aligh this form to the right, i give it a try(stupid one but why not to try) and set form-horizontal margin-left: some px; and it did move form but it resize input. I want to align it to a specific place.
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="inputIme" class="col-sm-2 control-label">Ime</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Ime">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">E-mail</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="E-mail">
</div>
</div>
<div class="form-group">
<label for="inputTelefon" class="col-sm-2 control-label">Telefon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Broj Telefona">
</div>
</div>
<div class="form-group">
<label for="inputAdresa" class="col-sm-2 control-label">Adresa</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Vasa Adresa">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Posalji zahtev</button>
</div>
</div>
</form>
</div>
<div class="col-sm-6 offset-sm-6">
<form class="form-horizontal">
<div class="form-group">
<label for="inputIme" class="col-sm-2 control-label">Ime</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Ime">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">E-mail</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="E-mail">
</div>
</div>
<div class="form-group">
<label for="inputTelefon" class="col-sm-2 control-label">Telefon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Broj Telefona">
</div>
</div>
<div class="form-group">
<label for="inputAdresa" class="col-sm-2 control-label">Adresa</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Vasa Adresa">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Posalji zahtev</button>
</div>
</div>
</form>
</div>
although your question is not clear to but I guess you need to shift your form at right side so you can use above code
I have tried all the possible ways but I could not get the fields horizontally aligned.
<form class="form-horizontal" role="form">
<div class="form-inline">
<div class="form-group">
<label for="acctName" class="col-sm-2 control-label">Account Name </label>
<div class="col-sm-10">
<input type="text" ng-model="vm.acctName" class="input-xlarge" placeholder="Account Name" />
</div>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label for="acctId" class="col-sm-2 control-label">Account ID </label>
<div class="col-sm-10">
<input type="text" ng-model="vm.acctId" class="input-xlarge" placeholder="Account ID" />
</div>
</div>
</div>
I also tried
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="acctName" class="col-sm-2 control-label">Account Name </label>
<div class="col-sm-10">
<input type="text" ng-model="vm.acctName" class="input-xlarge" placeholder="Account Name" />
</div>
</div>
<div class="form-group">
<label for="acctId" class="col-sm-2 control-label">Account ID </label>
<div class="col-sm-10">
<input type="text" ng-model="vm.acctId" class="input-xlarge" placeholder="Account ID" />
</div>
</div>
Still, the fields appear stacked vertically.
What am I doing wrong?
Check this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label for="acctName" class="control-label">Account Name </label>
<input type="text" class="form-control input-xlarge" ng-model="vm.acctName" placeholder="Account Name" />
</div>
<div class="form-group">
<label for="acctId" class="control-label">Account ID </label>
<input type="text" class="form-control input-xlarge" ng-model="vm.acctId" placeholder="Account ID" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</form>
It seems to be invalid use of classes. Try the following code:
<form class="form-inline">
<fieldset>
<div class="form-group">
<label for="acctName" class="col-lg-2 control-label">Account Name</label>
<div class="col-lg-10">
<input type="text" class="form-control input-xlarge" id="acctName" ng-model="vm.acctName" placeholder="Account Name" />
</div>
</div>
<div class="form-group">
<label for="acctId" class="col-lg-2 control-label">Account ID</label>
<div class="col-lg-10">
<input type="text" class="form-control input-xlarge" id="acctId" ng-model="vm.acctName" placeholder="Account ID" />
</div>
</div>
</fieldset>
</form>
I'm trying to create a registration form. But when I try to run my code, part of it doesn't appear on the screen. I use thymeleaf for work with Spring MVC controllers. I looked Thymeleaf tutorials, stackoverflow, etc... but have not seen any solution.
Please tell me what I do wrong or where I can read about solution of this problem.
Below I put the snippet of my html code.
P.S. Sorry for my English.
<div class="container" id="container-middle">
<form class="form-horizontal" role="form" id="register-form" method="post" th:action="#{/post-user-info}" th:object="${user}">
<h2 id="form-header">Sign up for BlaBla</h2>
<div class="form-group">
<label for="login" class="col-sm-5 control-label">Login:</label>
<div class="col-sm-4">
<input type="text" id="login" placeholder="Login" class="form-control" th:field="*{login}">
</div>
</div>
<div class="form-group">
<label for="first-name" class="col-sm-5 control-label">First name:</label>
<div class="col-sm-4">
<input type="text" id="first-name" placeholder="First name" class="form-control" th:field="*{firstName}">
</div>
</div>
<div class="form-group">
<label for="last-name" class="col-sm-5 control-label">Last name:</label>
<div class="col-sm-4">
<input type="text" id="last-name" placeholder="Last name" class="form-control" th:field="*{lastName}">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-5 control-label">Email:</label>
<div class="col-sm-4">
<input type="email" id="email" placeholder="Email" class="form-control" th:field="*{email}">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-5 control-label">Password:</label>
<div class="col-sm-4">
<input type="password" id="password" placeholder="Password" class="form-control" th:field="*{password}">
</div>
</div>
<div class="form-group">
<label for="birthDate" class="col-sm-5 control-label">Date of birth:</label>
<div class="col-sm-4">
<input type="date" id="birthDate" class="form-control" th:field="*{birthDate}">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-5">Gender:</label>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<label class="radio-inline">
<input type="radio" th:field="*{sex}" th:value="${female}">Female
</label>
<label class="radio-inline">
<input type="radio" th:field="*{sex}" th:value="${male}">Male
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-5">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>
</div>
I didn't pass any model from controller to template, so it couldn't put there any result.
That's it! something like ...
public String goAdd(Model model) {
model.addAttribute(new DtoCustomer());
return "customer/edit";
}
<form class="form-horizontal" method="post" action="submit.php" enctype="multipart/form-data">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email">
</div>
</div>
<div class="form-group">
<label for="phoneNumber" class="col-sm-2 control-label">Phone:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" name="phone">
</div>
</div>
<div class="form-group">
<label for="major" class="col-sm-2 control-label">Major:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="major" name="major">
</div>
</div>
<hr>
<div class="form-group">
<label for="itemForSale" class="col-sm-2 control-label">Item for Sale:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="itemForSale1" name="itemForSale1">
</div>
</div>
<div class="form-group">
<label for="quantity" class="col-sm-2 control-label">Quantity:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="quantity1" name="quantity1">
</div>
</div>
<div class="form-group">
<label for="price1" class="col-sm-2 control-label">Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="price1" name="price1">
</div>
</div>
<div class="form-group">
<label for="itemOneImg1" class="col-sm-2 control-label">Image 1:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg1">
</div>
</div>
<div class="form-group">
<label for="itemOneImg2" class="col-sm-2 control-label">Image 2:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg2">
</div>
</div>
<hr>
<!-- Two -->
<div class="form-group">
<label for="itemForSale2" class="col-sm-2 control-label">Item for Sale:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="itemForSale2" name="itemForSale2">
</div>
</div>
<div class="form-group">
<label for="quantity2" class="col-sm-2 control-label">Quantity:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="quantity2" name="quantity2">
</div>
</div>
<div class="form-group">
<label for="major2" class="col-sm-2 control-label">Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="price2" name="price2">
</div>
</div>
<div class="form-group">
<label for="itemTwoImg1" class="col-sm-2 control-label">Image 1:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemTwoImg1">
</div>
</div>
<div class="form-group">
<label for="itemTwoImg2" class="col-sm-2 control-label">Image 2:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemTwoImg2">
</div>
</div>
<!-- END TWO -->
<hr>
<!-- THREE -->
<div class="form-group">
<label for="itemForSale3" class="col-sm-2 control-label">Item for Sale:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="itemForSale3" name="itemForSale3">
</div>
</div>
<div class="form-group">
<label for="quantity3" class="col-sm-2 control-label">Quantity:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="quantity3" name="quantity3">
</div>
</div>
<div class="form-group">
<label for="price3" class="col-sm-2 control-label">Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="price3" name="price3">
</div>
</div>
<div class="form-group">
<label for="itemThreeImg1" class="col-sm-2 control-label">Image 1:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemThreeImg1">
</div>
</div>
<div class="form-group">
<label for="itemThreeImg2" class="col-sm-2 control-label">Image 2:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemThreeImg2">
</div>
</div>
<input id="submit" name="submit" type="submit" value="Submit" class="btn btn-primary pull-right">
</form>
Would there be anyway for me to only get the parts that say <-- TWO --> and <-- THREE -->, to only appear if someone click a "additional files" button?
I tried looking but I couldn't find a nice and easy way to do it. Thanks guys
Add a class to the divs you want to show—like, class="show-onclick"—and then use jQuery to handle the click event:
The HTML would look like this:
<div class="show-onclick form-group">
<label for="itemForSale2" class="col-sm-2 control-label">Item for Sale:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="itemForSale2" name="itemForSale2">
</div>
</div>
<div class="show-onclick form-group">
<label for="quantity2" class="col-sm-2 control-label">Quantity:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="quantity2" name="quantity2">
</div>
</div>
<div class="show-onclick form-group">
<label for="major2" class="col-sm-2 control-label">Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="price2" name="price2">
</div>
</div>
<div class="show-onclick form-group">
<label for="itemTwoImg1" class="col-sm-2 control-label">Image 1:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemTwoImg1">
</div>
</div>
<div class="show-onclick form-group">
<label for="itemTwoImg2" class="col-sm-2 control-label">Image 2:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemTwoImg2">
</div>
</div>
<!-- END TWO -->
<hr>
<!-- THREE -->
<div class="show-onclick form-group">
<label for="itemForSale3" class="col-sm-2 control-label">Item for Sale:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="itemForSale3" name="itemForSale3">
</div>
</div>
<div class="show-onclick form-group">
<label for="quantity3" class="col-sm-2 control-label">Quantity:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="quantity3" name="quantity3">
</div>
</div>
<div class="show-onclick form-group">
<label for="price3" class="col-sm-2 control-label">Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="price3" name="price3">
</div>
</div>
<div class="show-onclick form-group">
<label for="itemThreeImg1" class="col-sm-2 control-label">Image 1:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemThreeImg1">
</div>
</div>
<div class="show-onclick form-group">
<label for="itemThreeImg2" class="col-sm-2 control-label">Image 2:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemThreeImg2">
</div>
</div>
<button type="button" id="additional-files">Additional files</button>
And the JavaScript would look like this:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$('#additional-files').click(function() {
$('.show-onclick').show();
});
});
</script>
I want to build a form in Bootstrap 3 like this:
My site (not the above link) just updates from Bootstrap 2.3.2 and the format is not correct anymore.
I cannot find any doc about this type of form on getbootstrap.com.
Could anyone tell me how to do this? Only 'Username' would be OK.
Thanks.
PS There is a similar question but it's using Bootstrap 2.3.2.
I have created a demo for you.
Here is how your nested structure should be in Bootstrap 3:
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>
Notice how the whole form-inline is nested within the col-xs-10 div containing the control of the horizontal form. In other terms, the whole form-inline is the "control" of the birthday label in the main horizontal form.
Note that you will encounter a left and right margin problem by nesting the inline form within the horizontal form. To fix this, add this to your css:
.form-inline .form-group{
margin-left: 0;
margin-right: 0;
}
Another option is to put all of the fields that you want on a single line within a single form-group.
See demo here
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</form>
This Bootply example seems like a much better option. Only thing is that the labels are a little too high so I added padding-top:5px to center them with my inputs.
<div class="container">
<h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-1" for="inputEmail1">Email</label>
<div class="col-sm-5"><input type="email" class="form-control" id="inputEmail1" placeholder="Email"></div>
</div>
<div class="form-group">
<label class="col-sm-1" for="inputPassword1">Password</label>
<div class="col-sm-5"><input type="password" class="form-control" id="inputPassword1" placeholder="Password"></div>
</div>
<div class="form-group">
<label class="col-sm-12" for="TextArea">Textarea</label>
<div class="col-sm-6"><textarea class="form-control" id="TextArea"></textarea></div>
</div>
<div class="form-group">
<div class="col-sm-3"><label>First name</label><input type="text" class="form-control" placeholder="First"></div>
<div class="col-sm-3"><label>Last name</label><input type="text" class="form-control" placeholder="Last"></div>
</div>
<div class="form-group">
<label class="col-sm-12">Phone number</label>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">area</div></div>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">local</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="1111"><div class="help">number</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="123"><div class="help">ext</div></div>
</div>
<div class="form-group">
<label class="col-sm-1">Options</label>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="Option 1"></div>
<div class="col-sm-3"><input type="text" class="form-control" placeholder="Option 2"></div>
</div>
<div class="form-group">
<div class="col-sm-6">
<button type="submit" class="btn btn-info pull-right">Submit</button>
</div>
</div>
</form>
<hr>
</div>
To make it work in Chrome (and bootply) i had to change code in this way:
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<input type="text" class="form-control" placeholder="year" />
<input type="text" class="form-control" placeholder="month" />
<input type="text" class="form-control" placeholder="day" />
</div>
</div>
</div>
</form>
A much simpler solution, without all the inside form-group elements
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<input type="text" class="form-control" placeholder="year" style="width:70px;"/>
<input type="text" class="form-control" placeholder="month" style="width:80px;"/>
<input type="text" class="form-control" placeholder="day" style="width:100px;"/>
</div>
</div>
</div>
... and it will look like this,
Cheers!
I had problems aligning the label to the input(s) elements so I transferred the label element inside the form-inline and form-group too...and it works..
<div class="form-group">
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>