"Form Wizard with bootstrap 4.1.1"
Bootstrap 4.1.1 Snippet by abhijeetka

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="pos-rel">
<!-- Nav pills -->
<ul class="nav nav-pills justify-content-center nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link active btn btn-primary" data-toggle="pill" href="#organizer-details">Organizer Details</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-primary" data-toggle="pill" href="#event-details">Event Details</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-primary" data-toggle="pill" href="#confirm-details">Confirm Details</a>
</li>
</ul>
<div class="connected-line"></div>
<!-- Tab panes -->
<div class="tab-content">
<div id="organizer-details" class="container tab-pane active">
<form class="seminor-login-form">
<div class="form-group">
<input type="text" class="form-control" required autocomplete="off">
<label class="form-control-placeholder" for="contact-person">Contact Person</label>
</div>
<div class="form-group">
<input type="email" class="form-control" required autocomplete="off">
<label class="form-control-placeholder" for="contact-email">Contact Email</label>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.pos-rel{
position:relative;
}
.pos-rel .nav-item{
margin:0 1em;
}
.connected-line{
border-bottom: 1px solid #007bff;
position: relative;
top: -20px;
z-index: -1;
}
.seminor-login-modal-body .close{
position: relative;
top: -45px;
left: 10px;
color: #1cd8ad;
}
.seminor-login-modal-body .close{
opacity:0.75;
}
.seminor-login-modal-body .close:focus, .seminor-login-modal-body .close:hover {
color: #39e8b0;
opacity: 1;
text-decoration: none;
outline:0;
}
.seminor-login-modal .modal-dialog .modal-content{
border-radius:0px;
}
/* form animation */
.seminor-login-form .form-group {
position: relative;
margin-bottom: 1.5em !important;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page
login-form
Login Form
Contact Form

Questions / Comments: