I created a simple modal, but when I click the button the modal appears at the very top of the page and there is no fade in animation when the modal appears. There is no background behind the modal that covers the entire web application as well. I set the correct classes, but still no luck.
Here is my button:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addModal">
Add Function
</button>
The modal itself:
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h1>Lab 6</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading" style="background-color: #e0e9f5">
<h2 class="panel-title">Employee Function - Add</h2>
</div>
<div class="panel-body">
<div class="well">
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Code:
</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Description:
</h5>
</div>
<div class="col-md-6">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Legacy Function Code:</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Active?</h5>
</div>
<div class="col-md-1">
<input type="radio">
<h5>Yes</h5>
</div>
<div class="col-md-2">
<input type="radio">
<h5>No</h5>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6" align="right">
<button type="button" class="btn btn-info btn-lg">Save</button>
</div>
<div class="col-md-6" align="left">
<button type="button" class="btn btn-warning btn-lg"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is an example is what I would like to achieve:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
Any help is appreciated. Thank you.
I believe that you have simply forgotten to add boostrap CSS + JS or jQuery. Below is a code snippet, with your exact code, but with boostrap CSS + JS and jQuery included. Note that jQuery must be before the boostrap JS link, like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
All of that should go in the <head> tag (or at the bottom of the <body> tag)
<!-- Stuff for the <head> tag -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- end <head> tag -->
<!-- Stuff for the <body> -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addModal">
Add Function
</button>
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h1>Lab 6</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading" style="background-color: #e0e9f5">
<h2 class="panel-title">Employee Function - Add</h2>
</div>
<div class="panel-body">
<div class="well">
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Code:
</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Description:
</h5>
</div>
<div class="col-md-6">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Legacy Function Code:</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Active?</h5>
</div>
<div class="col-md-1">
<input type="radio">
<h5>Yes</h5>
</div>
<div class="col-md-2">
<input type="radio">
<h5>No</h5>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6" align="right">
<button type="button" class="btn btn-info btn-lg">Save</button>
</div>
<div class="col-md-6" align="left">
<button type="button" class="btn btn-warning btn-lg" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
P.S. The result looks better when you expand the snippet before running it, because otherwise the output has a small width which messes things up (which could be an issue on small devices)
Related
I want to have an input text with 2 buttons beside of it in the modal footer, those 2 buttons must have the same height with the input text, how to show it properly?
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chatModal">
Launch demo modal
</button>
<!-- Modal -->
<div id="chatModal" class="modal fade" data-coreui-backdrop="static" data-coreui-keyboard="false" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-gradient-success">
<h5 class="modal-title" id="modal_title">Chat</h5>
</div>
<div class="modal-body">
<div class="alert alert-info" role="alert">We are working on it, please try again later</div>
<div class="mb-3">
</div>
</div>
<div class="modal-footer">
<div class="row justify-content-lg-between">
<div class="col-md-8">
<input class="form-control" id="message" type="text" name="message" maxlength="1024" placeholder="Message" required />
</div>
<div class="col-md-2 text-right">
<button type="button" class="btn btn-primary">Send</button>
</div>
<div class="col-md-2 text-right">
<button id="btnChatClose" onclick="hideChatModal();" type="button" class="btn btn-secondary" data-dismiss="modal">Exit</button>
</div>
</div>
</div>
</div>
</div>
</div>
Add tag wrap 2 button and set d-flex justify-content-center:
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chatModal">
Launch demo modal
</button>
<!-- Modal -->
<div id="chatModal" class="modal fade" data-coreui-backdrop="static" data-coreui-keyboard="false" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-gradient-success">
<h5 class="modal-title" id="modal_title">Chat</h5>
</div>
<div class="modal-body">
<div class="alert alert-info" role="alert">We are working on it, please try again later</div>
<div class="mb-3">
</div>
</div>
<div class="modal-footer">
<div class="d-flex flex-row justify-content-lg-between">
<div class="col-md-8 mx-5">
<input class="form-control" id="message" type="text" name="message" maxlength="1024" placeholder="Message" required />
</div>
<div class="d-flex justify-content-lg-center">
<div class="text-right">
<button type="button" class="btn btn-primary">Send</button>
</div>
<div class="col-md-1 text-right">
<button id="btnChatClose" onclick="hideChatModal();" type="button" class="btn btn-secondary" data-dismiss="modal">Exit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am new to webforms and am trying to create a login page with 2 buttons and 2 textboxes. I have placed them between divs however I am getting no spces between them.
Here is what I am getting:
As you can see there is no vertical space between the buttons and textboxes and labels
Here is the code I am using:
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<img width="150px" src="imgs/generaluser.png" />
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h3>Member Login</h3>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<hr>
</center>
</div>
</div>
<div class="row">
<div class="col">
<label>Member ID</label>
<div class="form-group">
<asp:TextBox CssClass= "form-control" ID="Textbox1" runat="server"
placeholder="Member ID"></asp:TextBox>
</div>
<label>Password</label>
<div class="form-group">
<asp:TextBox CssClass= "form-control" ID="Textbox2" runat="server"
placeholder="Password" TextMode="Password"></asp:TextBox>
</div>
<div class="form-group">
<asp:Button class="btn btn-primary btn-lg col-12" ID="Button1"
runat="server" Text="Login" />
</div>
<div class="form-group">
<input class="btn btn-info btn-lg col-12" id="Button2"
type="button" value="Sign Up" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am using bootstrap. Should not it give vertical space automatically?
How do I fix this?
You can add margin with bootstrap by adding it to the class
<label class="mt-3">Password</label>
You should be using inputs instead of textboxes
and you should look into wrapping it all in a form
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<img width="150px" src="imgs/generaluser.png" />
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h3>Member Login</h3>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<hr>
</center>
</div>
</div>
<div class="row">
<div class="col">
<label>Member ID</label>
<div class="form-group">
<input class= "form-control" ID="Textbox1" runat="server"
placeholder="Member ID"></T>
</div>
<label class="mt-3">Password</label>
<div class="form-group">
<input class= "form-control" ID="Textbox2" runat="server"
placeholder="Password" TextMode="Password"></Textarea>
</div>
<div class="form-group mt-2">
<input class="btn btn-primary btn-lg col-12" ID="Button1"
runat="server" Text="Login" value="Login" />
</div>
<div class="form-group mt-2">
<input class="btn btn-info btn-lg col-12" id="Button2"
type="button" value="Sign Up" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
You can either use a margin-top for the button class of use a <br> after the first button container
I want to arrange a html page using bootstrap functionality, but a div is at the top of the page and the other divs are at the bottom when I put them in a container. What is the proper way to arrange a page using bootstrap ?
This is my page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Settings</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/navbar.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
<div class="icon-bar" style="float: left">
<div class="employee"><i class="fa fa-home"></i></div>
<div class="employee"><i class="fa fa-info"></i><!--Summary--></div>
<div class="employee"><i class="fa fa-globe"></i><!--Plan details--></div>
<div class="employee"><i class="fa fa-building-o"></i><!--Company holidays--></div>
<div class="employee"><i class="fa fa-calendar-check-o"></i><!--Team calendar-->
</div>
<div id="manager"><a href="pendingRequests.html"><i class="fa fa-clock-o"><span
class="badge badge-notify hidden"></span></i></a><!--Pending requests--></div>
<div id="hr"><i class="fa fa-cog"></i><!--Settings button--></div>
<div class="employee"><i class="fa fa-power-off"></i></div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
Create user
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button id="addLocation" class="btn-success btn">Create location</button>
</div>
</div>
<div>
<div class="col-xs-12">
<button id="addRole" class="btn-success btn">Create role</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button id="addDepartment" class="btn-success btn">Create department</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button id="addOfficialHoliday" class="btn-success btn">Add official Holiday</button>
</div>
</div>
<div class="row">
<h4 id="successMessage"></h4>
</div>
</div>
<div id="locationModal" class="modal fade" tabindex="-1" role="dialog">
<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">Location name</h4>
</div>
<div class="modal-body">
<form id="locationForm">
<input type="text" required='' id="locationName" name="name"/>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" id="locationBtn" value="Add new location"/>
<div id="alert" style='float: left; color: red'></div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="roleModal" class="modal fade" tabindex="-1" role="dialog">
<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">Role name</h4>
</div>
<div class="modal-body">
<form id="roleForm">
<input type="text" required='' id="roleName" name="name"/>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" id="roleBtn" value="Add new role"/>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="departmentModal" class="modal fade" tabindex="-1" role="dialog">
<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">Department name</h4>
</div>
<div class="modal-body">
<form id="departmentForm">
<input type="text" required='' id="departmentName" name="name"/>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" id="departmentBtn" value="Add new department"/>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--Include jQuery-->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.serializeObject.min.js"></script>
<!--Include js created for this page-->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/navbar.js"></script>
<script type="text/javascript" src="js/settings.js"></script>
<script type="text/javascript" src="js/notify.js"></script>
</body>
</html>
And this is how it is arranged:
because you've put them all in a separate row. what you need to do is, put them in the same row and also, your col-xs-12 doesn't really do anything here to make it in a row. so you need to specify in your html that you want the buttons to be inline on larger screens like desktops.
if you want your buttons in a row on desktop, you need to put them in rows that'd fit.
let's say you have 6 buttons. then you can use col-md-2 as 12/6 = 2. or depending upon the length of these links/buttons you can change x in col-md-x.
here. this plunk will show what i mean. you might have to enlarge the preview panel.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-2">
Create user
</div>
<div class="col-xs-12 col-md-2">
<button id="addLocation" class="btn-success btn">Create location</button>
</div>
<div class="col-xs-12 col-md-2">
<button id="addRole" class="btn-success btn">Create role</button>
</div>
<div class="col-xs-12 col-md-2">
<button id="addDepartment" class="btn-success btn">Create department</button>
</div>
<div class="col-xs-12 col-md-2">
<button id="addOfficialHoliday" class="btn-success btn">Add official Holiday</button>
</div>
</div>
<div class="row">
<h4 id="successMessage"></h4>
</div>
</div>
You can see in my Demo that the buttons aren't aligned correctly :-(
Is it possible to:
1) have a space between the input field and the buttons &
2) have the buttons vertically aligned correctly?
Demo: https://jsfiddle.net/xg69pkt0/
Code:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-4 control-label">Postcode</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" id="concept" name="concept">
<div class="input-group-btn">
<button class="btn btn-default blue-bt pull-left" name="Continue" id="Continue" align="top" type="submit" style="margin-bottom:10px">Find Address</button>
<button class="btn btn-default blue-bt pull-left" name="Continue" id="Continue" align="top" type="submit">Change</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/a3xnqy33/
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-4 control-label">Postcode</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" id="concept" name="concept">
<div class="input-group-btn inup-group-addon">
<button class="btn btn-default">Find Address</button>
<button class="btn btn-default" name="Continue" id="Continue" align="top" type="submit">Change</button>
</div>
</div>
</div>
</div>
please see the modified fiddle
Hey You can check the following also. In your code you have not closed your divs properly.
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-3 control-label">Postcode</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="concept" name="concept">
</div>
<div class="col-sm-4">
<div class="input-group-btn">
<button class="btn btn-default blue-bt" name="Continue" id="Continue" type="submit">Find Address</button>
<button class="btn btn-default blue-bt" name="Continue" id="Continue" type="submit">Change</button>
</div>
</div>
</div>
</div>
</div>
</div>
Login Modal
Can someone give me ideas on how to do it? I tried to do it on bootstrap but the logo is inside the modal. i want to put my logo in the middle and half of it are on outside like in the first picture. Im new to html and css. Can someone give me clues on how to do it?
here is my work...
My Login Modal
This is the code you are asking for. Use this code it will perfectly work for you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.logo-margin-negative{
margin-top: -100px;
}
.modal{
padding-top: 100px ! important;}
</style>
</head>
<body>
<div class="container">
<h2>Click button to enter login</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Login Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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"><img src="http://placehold.it/150x150" class="center-block img-circle logo-margin-negative"></h4>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="form-group col-sm-5 col-sm-offset-4">
<label class="sr-only" for="exampleInputAmount">Username</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Username">
</div>
</div>
<div class="form-group col-sm-5 col-sm-offset-4">
<label class="sr-only" for="exampleInputAmount">Password</label>
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-key"></i></div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Password">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-5 col-sm-offset-4">
<button type="button" class="btn btn-danger btn-block" data-dismiss="modal">Login</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>