Bootstrap Snippet Button Control, Panel, Tool Tips, Modal using HTML CSS jQuery

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <h4>Snippet Moving step by step, Description, Tooltip, Modal</h4>
    </div>
</div>
<div class="stepwizard">
    <div class="stepwizard-row">
        <div class="stepwizard-step">
        <div class="btn-group">
            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">1. Love <span class="glyphicon glyphicon-heart"></span></button>
           <ul class="dropdown-menu">
               <li>
                   <div class="panel panel-danger">
                       <div class="panel-heading">Love Story</div>
                       <div class="panel-body"><p>Love Story is a 1970 romance novel by American writer Erich Segal. film (Love Story) was released on December 16, 1970...</p></div>
                   </div>
               </li>
           </ul>
        </div>
        </div>
        <div class="stepwizard-step">
            <button type="button" class="btn btn-default active" style="color:red" data-toggle="tooltip" data-placement="bottom" title="The Shadow Of Love was a single released by The Damned in 1985.">2. Shadow of Love <span class="glyphicon glyphicon-heart"></span></button>
           
        </div>
        <div class="stepwizard-step">
        <div class="btn-group">
            <button type="button" data-toggle="modal" data-target="#formAsset" class="btn btn-warning" style="color:red"><a href="#tab1">3. Love Destination</a><span class="glyphicon glyphicon-heart"></span></button>
            <div class="modal fade" id="formAsset" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header1">
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
.stepwizard-step p {
    margin-top: 10px;    
}
.stepwizard-row {
    display: table-row;
}
.stepwizard {
    display: table;     
    width: 100%;
    position: relative;
}
.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    
    
}
.stepwizard-step {    
    display: table-cell;
    text-align: center;
    position: relative;
}
.fade {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
        $(document).ready(function(){
         $('[data-toggle="tooltip"]').tooltip();});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Button Control, Panel, Tool Tips, Modal"
Bootstrap 3.3.0 Snippet by Chum vanntreudy

Related: See More

Questions / Comments:

"Button Control, Panel, Tool Tips, Modal" Bootstrap 3.3.0 Snippet by Chum vanntreudy

Related: See More

Questions / Comments:

"Button Control, Panel, Tool Tips, Modal"
Bootstrap 3.3.0 Snippet by Chum vanntreudy