I am trying to use bootstrap login and fit it in bootstrap modal
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- 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">
<!--Login-->
<div class="container">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me">Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
<!-- /container -->
</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>
</body>
</html>
Result
What are some way to fit the login form inside the div container?
The problem with the current code is that you are using container inside the modal-body. It takes fixed width of 1170px in larger screens and overflows the modal. Instead use container-fluid which does not have a fixed width.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- 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">
<!--Login-->
<div class="container-fluid">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div> <!-- /container -->
</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>
</body>
</html>
Related
I needed when my all mandatory input field filled then only following form come by clicking on the Next button.
But in this code, it is going to next whenever I click on next but only submit when all fields filled.
Which may confuse the users when they forget to input filed then go to next form then not able to submit.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--Added by online for Register-->
<nav>
<button data-toggle="modal" data-target="#myModal2" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit"><b>Register</b></button>
<div class="modal fade bs-example-modal-sm" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Register</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form name="reg-form">
<div class="form-group">
<label for="username" class="control-label">Name:</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="email" class="control-label">Email:</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="form-group">
<label for="passward" class="control-label">passward:</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<label for="con-passward" class="control-label">Confirm passward:</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<!------------------------------------------------------------------------------->
<button data-toggle="modal" data-target="#myModal3" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit"><b>Next</b></button>
<div class="modal fade bs-example-modal-sm" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Next Form</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form name="reg-form">
<div class="form-group">
<label for="age" class="control-label">Age:</label>
<input type="number" class="form-control" id="age" required>
</div>
<div class="form-group">
<label for="add" class="control-label">Address:</label>
<input type="text" class="form-control" id="add" required>
</div>
<div class="form-group">
<label for="con" class="control-label">Contact:</label>
<input type="text" class="form-control" id="con" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" value="submit">Submit</button>
<!--button type="button" class="btn btn-danger" data-dismiss="modal">Close</button-->
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!------------------------------------------------------------------------------------------------>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
Simply add an id around your first few inputs and then check if they're empty or not.
$('#next').on('click', function(evt) {
$('#firstModal input:required').each(function() {
if ($(this).val() === '') evt.stopPropagation();
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--Added by online for Register-->
<nav>
<button data-toggle="modal" data-target="#myModal2" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit"><b>Register</b></button>
<div class="modal fade bs-example-modal-sm" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Register</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form name="reg-form">
<div id="firstModal">
<div class="form-group">
<label for="username" class="control-label">Name:</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="email" class="control-label">Email:</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="form-group">
<label for="passward" class="control-label">passward:</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<label for="con-passward" class="control-label">Confirm passward:</label>
<input type="password" class="form-control" id="password_validate" required>
</div>
</div>
<div class="form-group">
<!------------------------------------------------------------------------------->
<button data-toggle="modal" data-target="#myModal3" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit" id="next"><b>Next</b></button>
<div class="modal fade bs-example-modal-sm" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Next Form</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form name="reg-form">
<div class="form-group">
<label for="age" class="control-label">Age:</label>
<input type="number" class="form-control" id="age" required>
</div>
<div class="form-group">
<label for="add" class="control-label">Address:</label>
<input type="text" class="form-control" id="add" required>
</div>
<div class="form-group">
<label for="con" class="control-label">Contact:</label>
<input type="text" class="form-control" id="con" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" value="submit">Submit</button>
<!--button type="button" class="btn btn-danger" data-dismiss="modal">Close</button-->
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!------------------------------------------------------------------------------------------------>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
My modal is not working. Actually I want a modal for sign up and send it to my code behind page. I have used bootstrap lumen and jquery. Please help me, any help would be beneficial. Thanks in advance.
Also I need to make a form and generate ajax call for that.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="HotelReservation.Views.Login" %>
<!DOCTYPE html>
<link href="../css/bootstrap.css" rel="stylesheet" />
<script src="../js/bootstrap.js"></script>
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<script src="../js/bootstrap.min.js"></script>
<link href="../css/custom1.css" rel="stylesheet" />
<script src="../js/jquery-3.3.1.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<div class="form_bg">
<form>
<h2 class="text-center">Login Page</h2>
<br />
<div class="form-group">
<input type="email" class="form-control" id="userid" placeholder="User id">
</div>
<div class="form-group">
<input type="password" class="form-control" id="pwd" placeholder="Password">
</div>
<br />
<div class="align-center">
<button type="submit" class="btn btn-default" id="login">Login</button>
</div>
<br />
<button class="btn btn-success" data-toggle="modal" data-target="#mymodal">Launch Modal </button>
<div class="modal">
<div class="modal-dialog" role="document" id="mymodal">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="HotelReservation.Views.Login" %>
<!DOCTYPE html>
<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/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../css/custom1.css" rel="stylesheet" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<div class="form_bg">
<form>
<h2 class="text-center">Login Page</h2>
<br />
<div class="form-group">
<input
type="email"
class="form-control"
id="userid"
placeholder="User id"
/>
</div>
<div class="form-group">
<input
type="password"
class="form-control"
id="pwd"
placeholder="Password"
/>
</div>
<br />
<div class="align-center">
<button type="submit" class="btn btn-default" id="login">
Login
</button>
</div>
<br />
<div
class="btn btn-success"
data-toggle="modal"
data-target="#mymodal"
>
Launch Modal
</div>
<div class="modal">
<div class="modal-dialog" role="document" id="mymodal">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">
Save changes
</button>
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(".btn-success").click(function() {
console.log("hit");
$(".modal").modal("show");
});
});
</script>
</body>
</html>
add this script in head section
<script type="text/javascript">
function ShowPopup() {
$("#btnShowPopup").click();
}
</script>
Now add this code in body
<button type="button" class="btn btn-info btn-lg" id="btnShowPopup" style="display:none" data-toggle="modal" data-target="#myModal">Open Modal</button>
<asp:Button ID="Button1" runat="server" CssClass="btn btn-success" style="padding:5px;font-size:14px;" OnClick="Button1_Click" Text="View Contact" />
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" style="color:#00ca4c;">Lead Details</h4>
</div>
<div class="modal-body">
<div class="col-md-12">
</div>
</div>
<div class="modal-footer" style="padding-right:15px;">
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and add this in your code behind
protected void Button1_Click(object sender, CommandEventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
}
in the button click event on which you want to open modal
I would like to open a help modal, but depending on which link is clicked I need to focus on specific anchor like we do on a FAQ page.
On a page we will add #myAmazingTitle on href link (e.g FAQ for focusing the display on specific dom element.
<h1>My first title</h1>
<h1 id="myAmazingTitle">My Amazing Title</h1> <== Display will be focused on this title
....
I would like to have the same behavior with a bootstrap modal.
Is it possible and how?
This is Fiddle for this issue.
Use relatedTarget and HTML data-* attributes to specify target element selector (or anchor) and send this value to a handler of shown.bs.modal event. See example of usage below.
$('#exampleModal').on('shown.bs.modal', function(e) {
var recipient = $(e.relatedTarget).data('focus');
$(this).find( recipient ).focus();
});
<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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<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>
<span class="modal-title" id="exampleModalLabel">Registration form</span>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="EmailInput">Email address</label>
<input type="email" class="form-control" id="EmailInput" placeholder="Email">
</div>
<div class="form-group">
<label for="PassInput">Password</label>
<input type="password" class="form-control" id="PassInput" placeholder="Password">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Register</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-focus="#EmailInput">Type Email</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-focus="#PassInput">Type Password</button>
I would like to ask how I can stretch the width throughout the modal form.
Here is my code:
<form asp-controller="Employee" asp-action="Create" method="post" class="form-inline" role="form">
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Employee</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control"/>
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="Id">
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and it shows like this:
input text problem
Is there any way that I could fix this problem.
I think it has something to do with the bootstrap library but I don't know where it is located.
You have to use bootstrap grid system.
#inpt {
width: 100%;
}
.modal-body {
height: 200px;}
<form asp-controller="Employee" asp-action="Create" method="post" class="form-inline" role="form">
<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/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
button
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Employee</h4>
</div>
<div class="modal-body">
<div class="form-group col-xs-12">
<input id="inpt" type="text" class="form-control"/>
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="Id">
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Try this:
<form asp-controller="Employee" asp-action="Create" method="post" class="form-inline" role="form">
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Employee</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control"/>
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="Id">
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Working example: https://jsfiddle.net/KyleMit/0fscmf3L/
Credits: Kyle Mitofsky
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>