I want to align two elements. Is there a way to to this with help of bootstrap? It works if i float the elements and make the input element's width smaller. But that's not the solution i want to use. Is there a responsive, bootstrap way to do this?
Fiddle with the two elements i wanna align next to each-other (button and input).
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<button type="button" class="btn btn-default btn-sm adminButton">
<span class="table-add glyphicon glyphicon-plus"></span> Add columns
</button>
<input class="form-control input-sm" id="inputsm" type="text">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
add modal-body & row & col- class
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-3">
<button type="button" class="btn btn-default btn-sm adminButton"><span class="table-add glyphicon glyphicon-plus"></span> Add columns</button>
</div>
<div class="col-sm-8">
<input class="form-control input-sm" id="inputsm" type="text">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
https://jsfiddle.net/e0cr1nL2/107/
Try bootstrap addon
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
Just try this css:
#inputsm{
display: inline;
width: 50%;
}
You can provide the width of input as you want..
FIDDLE
Related
I working with css, trying to do a custom upload file.. I want something like this:
but for some reason my layout separate in 3 lines when I put into bootstrap modal, like this:
what am I doing wrong? why I can´t show it in just one line?
HTML:
<button class="btn btn-primary btn btn-xs" id="openUpload" style="background-color:#3399FF;color:#FFFFFF">
<span class="glyphicon glyphicon-chevron-up"></span>Importar</button>
<div class="modal" id="uploadModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" style="overflow: hidden">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add new File</h4>
</div>
<div class="modal-body col-md-12" id="modal-body">
<div id="upload">
<div class="col-md-12">
<div id="drop">
<span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn">
<button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
</span>
</div>
</div>
<div class="fileupload-buttonbar">
<div>
<button type="submit" class="btn btn-success start">
<i class="glyphicon glyphicon-upload"></i><span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-upload"></i><span>Clear upload</span>
</button>
<button type="reset" class="btn btn-danger cancel">
<i class="glyphicon glyphicon-ban-circle"></i><span>Cancel All</span>
</button>
</div>
</div>
<ol class="files upload-files-list"></ol>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Fiddle Demo
I search Bootstrap documentation but I get similar result, I try with given code but I get same result:
Just wrap your icon, input, button into input-group class.
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn"><button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button></span>
</div>
Also you have used col-md-12 wrongly, use row class before it.
Updated Fiddle
This seems to work :
<div id="drop" class="input-group">
<span class="input-group-addon input-group-prepend"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn input-group-append">
<button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
</span>
</div>
Demo
Note the classes input-group, input-group-append and input-group-prepend
I have modal window and i want 4 inline inputs. But they have 15px padding on side and beetween 2 inputs is total 30px padding.
How is possible make 15px space beetween inputs?
edit: I want same spacing on sides and beetween inputs.
My try on jsfiddle:
jsfiddle
Code:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Here's another option. You can add a class and a bit of css:
.spacing > div + div{padding-left: 0;}
http://jsfiddle.net/5u2paavk/
Sure, use a special class to adjust the padding and negative margins on the row and col- like this:
.row.no-margin {
margin-left: -7.5px;
margin-right: -7.5px;
}
.row.no-margin > .col-xs-3{
padding-left: 7.5px;
padding-right: 7.5px;
}
Demo on Codeply
Im pretty new to coding and i've been trying to make a wepage that works as a user interface. In the UI there is buttons that is suppose to launch application using javaScript (not quite there yet) and 2 buttons that open modals on top of the current screen: Help and Settings.
Code for the modals:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button class="btn btn-default" data-toggle="modal" data-target="#settings">
<img src="img/settings.png" alt="" class="img-circle">
</button>
<button class="btn btn-default" data-toggle="modal" data-target="#help">
<img src="img/help.png" alt="" class="img-circle">
</button>
<div id="settings" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Settings</h3>
</div>
<div class="modal-body">
<h4> Tethering</h4>
<label>Name:</label>
<input type="text" id="wlanName" size="15">
<label>Passphrase:</label>
<input type="text" id="passPhrase" size="15">
<br>
<br>
<button type="button" class="btn btn-success" onclick="enableTethering()">Enable tethering</button>
<button type="button" class="btn btn-danger" onclick="disableTethering()">Disable tethering</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div id="help" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Help</h3>
</div>
<div class="modal-body">
*CONTENT TO BE MADE*
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
The issue is, that the first modal works fine. Second modal only "dims" the background, but the modal it self wont come visible. In this case, the settings work fine, but the help does not. If swap the help code before the settings code, then help works and settings does not.
But, when i coded it, i had typo. The second div of the modal were typed
instead of but everything worked, after i switched the
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="btn btn-default" data-toggle="modal" data-target="#settings">
<img src="img/settings.png" alt="" class="img-circle">
</button>
<button class="btn btn-default" data-toggle="modal" data-target="#help">
<img src="img/help.png" alt="" class="img-circle">
</button>
<div id="settings" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Settings</h3>
</div>
<div class="modal-body">
<h4> Tethering</h4>
<label>Name: </label>
<input type="text" id="wlanName" size="15">
<label>Passphrase: </label>
<input type="text" id="passPhrase" size="15">
<br>
<br>
<button type="button" class="btn btn-success" onclick="enableTethering()">Enable tethering</button>
<button type="button" class="btn btn-danger" onclick="disableTethering()">Disable tethering</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="help" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Help</h3>
</div>
<div class="modal-body">
*CONTENT TO BE MADE*
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You forgot to mention </div>
hope this works.
You had missing closing tags for your modal divs.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button class="btn btn-default" data-toggle="modal" data-target="#settings">
<img src="img/settings.png" alt="" class="img-circle">
</button>
<button class="btn btn-default" data-toggle="modal" data-target="#help">
<img src="img/help.png" alt="" class="img-circle">
</button>
<div id="settings" class="modal fade" role="dialog">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Settings</h3>
</div>
<div class="modal-body">
<h4> Tethering</h4>
<label>Name:</label>
<input type="text" id="wlanName" size="15">
<label>Passphrase:</label>
<input type="text" id="passPhrase" size="15">
<br>
<br>
<button type="button" class="btn btn-success" onclick="enableTethering()">Enable tethering</button>
<button type="button" class="btn btn-danger" onclick="disableTethering()">Disable tethering</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="help" class="modal fade" role="dialog">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Help</h3>
</div>
<div class="modal-body">
*CONTENT TO BE MADE*
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I want that when I move my cursor on an image, it should show 3 buttons coming and then when I click on any one of them, a modal should open. I am actually done with this, but the problem is when I click on any of the buttons appearing, a modal is reflected and as soon as I try to close that modal, those three options are shown on that image rather dis-appearing. Please anyone help.
Here is the code:
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<div class="caption">
<button class="btn" data-toggle="modal" data-target="#myModal1a" style="color:#000">Add</button>
<button class="btn" data-toggle="modal" data-target="#myModal1b" style="color:#000">Delete</button>
<button class="btn" data-toggle="modal" data-target="#myModal1c" style="color:#000">Modify</button>
</div>
<img src="Department.png" style="position:fixed" alt="ALT NAME" width="250" height="60">
</div>
<h3 class="text" id="D1"><b>Department Options </b></h3>
</div>
</div>
<!-- Modal 1a -->
<div class="modal fade" id="myModal1a" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Create Department</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="psw">Department Name</label>
<input type="text" class="form-control" id="psw" placeholder="Provide a name">
</div>
<div class="form-group">
<label for="usrname">Department ID</label>
<input type="text" class="form-control" id="usrname" placeholder="Provide an ID">
</div>
<button type="submit" class="btn btn-block">Submit
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
<p>Need help?</p>
</div>
</div>
</div>
</div>
If you simply wanna hide those buttons whenever the modal is closed, then its a cakewalk if you use jQuery. You just need to use the hidden.bs.modal event of Bootstrap modals in the following way:
$('#myModal1a').on('hidden.bs.modal', function () {
$('.imgButton').each(function () {
$(this).hide();
})
})
Assuming that you provide a class called 'imgButton' to all the buttons :)
I have a navbar that looks like this:
When I try and shrink the page to simulate a mobile device however, it doesn't collapse quite right:
It's supposed to collapse so that the button that is sort of hidden behind the "Register" text becomes the toggle for the menu. Here is my code:
<div class="sticky-header-navbar-container">
<div class="well">
<div class="navbar navbar-default navbar-fixed-top navbar-collapse navHeaderCollapse" id="navbar">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar">Home</span>
<span class="icon-bar">About</span>
<span class="icon-bar">Contact</span>
<span class="icon-bar">Playground</span>
<span class="icon-bar">Login</span>
<span class="icon-bar"><a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a></span>
</button>
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Playground
</li>
<li>
<form class="navbar-form" role="search">
<div class="input-group" style="width: 100%">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Login
</li>
<li style="padding-right: 20px">
<a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a>
</li>
</ul>
</div>
</div>
</div>
<div id="about-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">About This Page</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="contact-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Us!</h4>
</div>
<div class="modal-body">
<p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
<p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
<div class="form-group">
<form role="form">
<div class="form-group">
<label for="contact-name" class="sr-only">Your Name</label>
<input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="contact-email" class="sr-only">Your Email</label>
<input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
</div>
<div class="form-group">
<textarea id="contact-message" class="form-control" rows="6" cols="50" placeholder="Your message..." required></textarea>
</div>
<button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span></button>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="login-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login with Github!</h4>
</div>
<div class="modal-body">
<form class="navbar-form">
<label for="login-inputEmail" class="sr-only">Email address</label>
<input type="email" id="login-inputEmail" class="form-control" placeholder="Email Address" required>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="separator" style="padding-bottom: 15px"></div>
<div class="checkbox" style="padding-right: 15px;padding-left: 10px">
<label>
<input type="checkbox" value="remember-me">
Remember Me
</label>
</div>
<button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span></button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">How To Register</h4>
</div>
<div class="modal-body">
<p>In order to log in you need a Github account as we use that for log in here.</p>
<p>If you already registered for a Github account then press the Login button and log in using your Github Credentials.</p>
<p>If you have yet to register Click Here!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If that's all the related code then you shouldn't need anything outside the default classes.
See Default Navbar Docs.
You shouldn't need these modal links in the header and then again within the navbars links, these are whats covering up the mobile toggle button.
And your HTML structure is off and/or missing some pieces. Again if you refer to the Docs you'll see the inconsistencies, you need to put your toggle button inside the navbar-header class, navbar-form does not belong inside of a li item etc.
See working example Snippet.
*Note that because you links that utilize a lot of space at around 875px you'll see your navbar overflow to a new line (a CSS media query turns the background red when this happens in my example). One solution is to reduce the length of the link title(s) to prevent this:
ie Want to Register? Click Here! to just Register!.
#media (max-width: 875px) {
html,
body {
background: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li> Home
</li>
<li> About
</li>
<li> Contact
</li>
<li> Playground
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header"> <span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li> Login
</li>
<li> Want to Register? Click Here!
</li>
</ul>
</div>
</div>
</nav>
<div id="about-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">About This Page</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="contact-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Us!</h4>
</div>
<div class="modal-body">
<p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
<p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
<div class="form-group">
<form role="form">
<div class="form-group">
<label for="contact-name" class="sr-only">Your Name</label>
<input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="contact-email" class="sr-only">Your Email</label>
<input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
</div>
<div class="form-group">
<textarea id="contact-message" class="form-control" rows="6" cols="50" placeholder="Your message..." required></textarea>
</div>
<button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span>
</button>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="login-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login with Github!</h4>
</div>
<div class="modal-body">
<form class="navbar-form">
<label for="login-inputEmail" class="sr-only">Email address</label>
<input type="email" id="login-inputEmail" class="form-control" placeholder="Email Address" required>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="separator" style="padding-bottom: 15px"></div>
<div class="checkbox" style="padding-right: 15px;padding-left: 10px">
<label>
<input type="checkbox" value="remember-me">Remember Me</label>
</div>
<button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">How To Register</h4>
</div>
<div class="modal-body">
<p>In order to log in you need a Github account as we use that for log in here.</p>
<p>If you already registered for a Github account then press the Login button and log in using your Github Credentials.</p>
<p>If you have yet to register Click Here!
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>