Bootstrap 3 - Form inside modal

by kunalvashist

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://leafo.net/sticky-kit/src/jquery.sticky-kit.js"></script>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal">
    Launch Horizontal Form
</button>

<!-- Modal -->
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                <div class="header"> <a class="top">header top</a>
 <a class="bottom">header bottom</a>

    </div>
                <div class="container modal-alternate-wrapper">
                  <div class="row">
                    <div class="col-xs-3">
                      <div class="sidebar">
                        <a class="top">sidebar top</a>
 <a class="bottom">sidebar bottom</a>
                      </div>
                    </div>
                    <div class="col-xs-9">
                      <div class="main"> <a class="top">main top</a>
 <a class="bottom">main bottom</a>

        </div>
                    </div>
                  </div>
                </div>
                <div class="footer"> <a...

CSS

.modal-body .form-horizontal .col-sm-2,
.modal-body .form-horizontal .col-sm-10 {
    width: 100%
}

.modal-body .form-horizontal .control-label {
    text-align: left;
}
.modal-body .form-horizontal .col-sm-offset-2 {
    margin-left: 15px;
}

* {
    font-size: 10px;
    color: #333;
    box-sizing: border-box;
}
.wrapper, .header, .main, .footer {
    padding: 10px;
    position: relative;
}
.wrapper {
    border: 1px solid #333;
    background-color: #f5f5f5;
    padding: 10px;
}
.header {
    background-color: #6289AE;
    margin-bottom: 10px;
    height: 100px;
}
.sidebar {
    position: relative;
    padding: 10px;
    background-color: #ccc;
    height: 300px;
    width: 100px;
    float: left;
}
.main {
    background-color: #ccc;
    height: 600px;
}
.footer {
    background-color: #6289AE;
    margin-top: 10px;
    height: 250px;
}
.top {
    position: absolute;
    top: 10px;
}
.bottom {
    position: absolute;
    bottom: 10px;
}
.clear {
    clear: both;
    float: none;
}

JavaScript

/*!
 * Sticky-kit
 * A jQuery plugin for making smart sticky elements
 *
 * Source: http://leafo.net/sticky-kit/
 */

$('#myModalHorizontal').on('shown.bs.modal',function(){
	console.log("init sticky");
	$(".sidebar").stick_in_parent({
    offset_top: 10,
    parent: ".modal-body"
	});
})