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>
Related
Like i say in the title why cant i get the input-form to stick with my button?
I am using bootstrap with my django site.
<div class="container" style="margin-top: 20%; margin-bottom: 20%";>
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div id="logo" class="text-center">
<h1 style="font-size:500%";>Zaira.io</h1><p style="font-size:120%";>Test</p>
</div>
<form role="form" id="form-buscar">
<div class="form-group">
<div class="input-group">
<input id="1" class="form-control input-lg" type="text" name="search" placeholder="Input Website Url" required/>
<span class="input-group-btn">
<button class="btn btn-success btn-lg" type="submit">
<i class="glyphicon glyphicon-search" aria-hidden="true"></i> Search
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
Website Screenshot
It looks like you're trying to create an input group. If so, then on the line that reads <span class='input-group-btn'>, change the class input-group-btn to input-group-append. Here's a fiddle to demonstrate the change.
Check out this page https://getbootstrap.com/docs/4.0/components/input-group/ to learn more about input group with bootstrap. Also, you should avoid using span in this case as it is an inline element and not a block element to position obj. To position, use input-group-prepend and/or input-group-append as needed for buttons and more.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Input Website Url" aria-label="Input Website Url" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
<!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="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>
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div id="logo" class="text-center">
<h1 style="font-size:500%";>Zaira.io</h1>
</div>
<form role="form" id="form-buscar">
<p style="font-size:120%";>Test</p>
<input id="1" class="form-control input-lg" type="text" name="search" placeholder="Input Website Url" required/>
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</form>
</div>
</div>
</div>
</body>
</html>
I was attempting to have a simple log-in screen and for some reason, I am not able to get the input boxes' widths to be relative to the width of my modal. I can manually set the width, but then they adjust incorrectly when resizing.
I am using HTML and Twitter Bootstrap. If anyone has any suggestions, it would be a big help!
Thanks!
EDIT: Thanks to #RobertC, I was able to fix the issue by changing my container classes to container-fluid. Thanks again!
Picture of Modal with problem
My Code
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Html/JavaScript</title>
<link rel="stylesheet" type="text/css" href="Style.css">
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).on('load',function(){
$('#logInModal').modal('show');
});
</script>
</head>
<body>
<div class="modal" id="logInModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h2>Log In</h2>
</div> <!--ModalHEADER DIV-->
<div class="modal-body">
<div class="container">
<form>
<div class="form-group">
<lable for="email">Email: </lable>
<input type="email" class="form-control" name="email">
</div> <!--1st Form-groupDIV-->
<div class="form-group">
<lable for="password">Password: </lable>
<input type="password" class="form-control" name="password">
</div> <!--2nd form-group DIV-->
<div class="checkbox">
<lable>
<input type="checkbox"> Keep Me Logged in
</lable>
</div> <!--CHECKBOX DIV-->
<div>
<a class="btn btn-primary" data-dismiss="modal" id="continueAsGuestBtn">Continue As Guest</a>
<a class="btn btn-success" id="logInBtn">Log In</a>
</div>
</form>
<div>
<p>New User? Create Accont <a data-toggle="modal" data-dismiss="modal" href="#signUpModal">Here</a>
</div>
</div> <!--CONTAINER DIV-->
</div><!--modalBODY DIV-->
</div> <!--modalCONTENT DIV-->
</div> <!--modalDIALOG DIV-->
</div> <!--LogInMODAL DIV-->
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)
I want to place the search button in the column next to the input form using the Bootstrap grid, but since both the "input" tag and "button" tag must be in the div with the "form-group" attribute, this makes things difficult.
This is my original code:
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<br><div id="errors"></div>
</div>
</form>
</div>
</div><!--end row-->
And this is my failed attempt with nested columns:
<div class="row">
<div class="col-md-12 formMove">
<div class="row">
<div class="col-md-10">
<form id="getposts_form" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div> <!--I want this closing tag to close "col-md-10", but its closing the "form-group"-->
<div class="col-md-2">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<br><div id="errors"></div>
</div>
</form>
</div>
</div>
</div>
</div>
Thanks in advance.
I could not understand why do you need button and input within the same form-group class, as you can use separate form-group class for them.
The approach through which in line forms are achieved is using .form-inline class with the<form> tag. As you wanted an answer using grid system I have provide a snippet for that also.
I have added two snippet
using .form-inline class
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div>
<div class="form-group">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div>
<br><div id="errors"></div>
</form>
</div>
</div><!--end row-->
</body>
</html>
using bootstrap grid system
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div>
</div>
<br><div id="errors"></div>
</div>
</form>
</div>
</div><!--end row-->
</body>
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>