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

<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"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> </div> <div class="modal-body"> <p>Love. Love is the greatest gift God ever gave man. Love is not wanting to go anywhere without her. Love is not caring what other people think about the two of you. Love is when you feel depressed and sickly when you're not with her. You feel like your life has no meaning or purpose without her. And that if she wasn't holding your hand you would float away to heaven from where she came. Love is caring for her physically and emotionally. It's telling her everyday, anytime, anywhere, anyhow, for no just reason that you love her. Love is telling her u want to spend the rest of your life with her. Love is wanting to marry her even tho ya'll haven't been dating that long. That you would do anything and everything for her. It's the feeling that you would give up everything just to see her smile or look into her beautiful eyes or hear her soft, soothing voice. Love is pure happiness. Love is the feeling you get when all you have to do is think of her and it brings a smile to your face and a yourning to your heart. Love is not being able to think about nething but her. Love is having the sweetest dreams about her and waking up with a smile on ur face. Love is an overwelming feeling of pure bliss when the 2 of u kiss. Love is wanting to hold her in ur arms till the end of time. Love is wishing ur time with her never ends, that your lips would be locked together forever, that she'd be in ur arms till the end of time, that u could cuddle with her for all of eternity. Love is being helplessy and deeply in love with her and knowing your love for her and your feelings for her will never change/end. Love is the world, the world is love, and she is the world to me... I Love Elizabeth L. With All My Heart And Soul From Now To The End Of Time. I Love You Elizabeth! Will You Marry Me? I Never Wanna Lose You SweetHeart. I Am Soooo Deeply In Love With You!!!!</p> </div> </div> </div> </div> </div> </div> </div> </div>
.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 { opacity: 0; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .fade.in { opacity: 1; }
$(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip();});

Related: See More


Questions / Comments: