Pages UI
Search…
Form Layouts
This section of the documentation will guide you how to apply different form styles for your need, There 3 different new styles that you can use, Please follow the steps in achieving this. There is no need of external JS or CSS libraries.

Creating a Standard Bootstrap Form

To create a native bootstrap form, the following tags are a must, It is the standard procedure in Bootstrap
    1.
    You should have a form tag
    2.
    A label for your input is conditional
    3.
    Both label and input should be wrapped in form-group
1
<form role="form">
2
<div class="form-group">
3
<label for="exampleInputEmail1">Email address</label>
4
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
5
</div>
6
<div class="form-group">
7
<label for="exampleInputPassword1">Password</label>
8
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
9
</div>
10
<button type="submit" class="btn btn-default">Submit</button>
11
</form>
Copied!
For more detailed documentation of Bootstrap forms Bootstrap Form Guideline

Pages Default Form Layout

To create a pages default form layout, append the class form-group-default to form-group.
1
<form role="form">
2
3
<div class="form-group form-group-default ">
4
<label>Project</label>
5
<input type="email" class="form-control" required>
6
</div>
7
8
<div class="row">
9
<div class="col-sm-6">
10
<div class="form-group form-group-default">
11
<label>First name</label>
12
<input type="text" class="form-control" required>
13
</div>
14
</div>
15
<div class="col-sm-6">
16
<div class="form-group form-group-default">
17
<label>Last name</label>
18
<input type="text" class="form-control">
19
</div>
20
</div>
21
</div>
22
23
<div class="form-group form-group-default">
24
<label>Password</label>
25
<input type="password" class="form-control" required>
26
</div>
27
28
<div class="form-group form-group-default">
29
<label>Placeholder</label>
30
<input type="email" class="form-control" placeholder="ex: [email protected]" required>
31
</div>
32
33
<div class="form-group form-group-default disabled">
34
<label>Disabled</label>
35
<input type="email" class="form-control" value="You can put anything here" disabled>
36
</div>
37
</form>
Copied!

Pages Attached Form Layout

To create a attached form layout follow the following steps
    1.
    Create a form following the Pages Default Form layout. Attached layout can ONLY be applied to the Pages Default style.
    2.
    Wrap a set of form-group-default elements with form-group-attached
EXAMPLE :PROJECT NAMEFIRST NAMELAST NAME
1
<form role="form">
2
<div class="form-group-attached">
3
<div class="form-group form-group-default required">
4
<label>Project name</label>
5
<input type="text" class="form-control" name="projectName" required>
6
</div>
7
<div class="row clearfix">
8
<div class="col-sm-6">
9
<div class="form-group form-group-default required">
10
<label>First name</label>
11
<input type="text" class="form-control" name="firstName" required>
12
</div>
13
</div>
14
<div class="col-sm-6">
15
<div class="form-group form-group-default">
16
<label>Last name</label>
17
<input type="text" class="form-control" name="lastName">
18
</div>
19
</div>
20
</div>
21
</div>
22
</form>
Copied!

Pages Horizontal Form Layout

To create a pages default form layout, add the class form-horizontal.
EXAMPLE :
1
<form class="form-horizontal" role="form">
2
...
3
</form>
Copied!
Last modified 1yr ago