I'm trying to position my bootstrap rows for small devices but I'm running into an issue with my rows.
They are touching the edge of the screen and it looks really ugly, and I tried to offset it with col-ex-off-2 but now that is not only not helping at all, but its messing up the screen medium and large screens.
Also, I can add any margin to the rows either and its making the text boxes look super ugly because they are touching.
Here is a link to the bootply replicating this issue. Notice the text boxes are touching each other and it looks bad. Also they are not side by side like I would prefer.
http://www.bootply.com/Ko7Ky3nj0M
<!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.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,body {
height:100vh;
max-width: 1500px;
margin: 0 auto;
padding-top: 00px;
}
h1 {
font-size:50px;
}
.checkbox-margin
{
margin-left:30%;
}
.subtitle
{
display:block;
text-align:right;
border-top: 7px solid #ffffff;
color:white;
font-size:40px;
}
.textarea
{
margin-left:15px;
margin-right:15px;
padding-top:5px;
padding-bottom:10px;
}
.content
{
min-height:90vh;
margin-top:5vh;
margin-bottom:5vh;
border-radius:15px;
box-shadow: 1px 1px 20px #000000;
margin-right:15px;
}
.stylebox
{
border-top-right-radius:15px;
border-bottom-left-radius:15px;
background-color:#FFFFFF;
color:#CC3611;
margin-top:5%;
margin-bottom:7%;
}
.full
{
min-height:100vh;
}
.textarea p
{
font-size:20px;
font-weight:bold;
}
.textarea h3
{
font-weight:bold;
}
.divarea
{
margin-left:15px;
margin-right:15px;
padding-top:5px;
padding-bottom:10px;
}
.form-margin
{
margin-bottom:2%;
}
#media screen and (max-width: 992px) {
.container .col-xs-12 {
margin:0px;
padding:0px;
}
.col-xs-12
{
margin-top:50px;
padding-bottom:10px;
padding-left: 10px;
padding-right:10px;
}
.content
{
min-height:100vh;
border-radius:0px;
box-shadow: 0px;
}
h1 {
padding:0px;
}
}
</style>
</head>
<body>
<div class="container full">
<div class="row full">
<div class="col-xs-0 col-md-2">
</div>
<div class="col-xs-12 col-md-8 content">
<div class='divarea'>
<div class='row form-margin'>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
</div>
<div class='row form-margin'>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
</div>
<div class='row form-margin'>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
</div>
</div>
</div>
<div class="col-xs-0 col-md-2"></div>
</div>
</div>
</body>
</html>
You need to change the way that you are using your forms, there is no need to add custom css, if you wrap each pair of elements in a "input-group" class, you can apply other classes that separates the information nicely. If you check the Bootsrap input group documentation here you can get some examples on form elements.
You can solve you current problem by adding an empty element , such as a label, with the class m-b-1 (margin-bottom-1rem).
Note that this is a hotfix and would not recommend it otherwise.
<div class="row form-margin">
<div class="col-xs-8 col-xs-offset-2 col-md-6 ">
<input placeholder="Test" type="text" class="form-control" id="usr">
<label class="m-b-2"></label>
</div>
<div class="col-xs-8 col-xs-offset-2 col-md-6">
<input placeholder="Test" type="text" class="form-control" id="usr">
<label class="m-b-2"></label>
</div>
</div>
Related
I am trying to make an image on the side remain the same height as the calculator.
Where should either the css or html go within the structure? I would like to keep the aspect ratio as close to possible
Code: http://jsbin.com/gijitaluta/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<aside class="imageContainer">
<img src="">
</aside>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</div>
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>
This way uses a table. Doesn't require many changes. You'll need a version of the image with the gray edges removed and you'll have to play with padding and/or margins.
http://jsbin.com/xepiren/edit?html,css,output
td {
background-color:#fff;
}
form {
padding: 5%;
/*width: 50%;*/
font-family: 'Open Sans'
}
#theForm {
background-color: white;
}
legend {
color: red;
font-size: 1.3em;
}
#maincontainer {
margin: 5%;
}
fieldset {
}
img {
/*width:30%;*/
float: right;
height: 430px
}
body {
background-color: grey;
}
fieldset {
padding: 10%;
}
#calculatorcontainer {
margin: 10%;
border-style: solid;
border-style: groove;
}
h4 {
margin: 0px;
}
footer {
padding: 10px;
border-style: solid;
border-style: groove;
}
footer h3 {
color:red;
font-size:80%
}
input {
width: 90%
}
#submit {
margin:10px
}
#media (max-width: 479px) {
img {
width:30%;
float: right;
height: 230px
}
fieldset {
padding: 0%;
}
form {
font-size: 7px;
}
footer {
padding: 7px;
}
footer h3 {
color:red;
font-size:10%
}
}
#media (min-width: 1000px) {
img {
width:30%;
float: right;
height: 480px
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<table>
<tr>
<td>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</td>
<td>
<aside class="imageContainer">
<img src="https://image.ibb.co/iUhiUv/Screen_Shot_2017_08_03_at_12_12_16_PM.png">
</aside>
</td>
</tr>
</table>
</div><!-- End "maincontainer" -->
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>
I need to upload passport and photo but i want it to be inline
<div id="upload">
<div>
<label for="Passportcopy">Passport Copy</label>
<input type="file" id="Passportcopy">
</div>
<div >
<label for="Photo">Photo</label>
<input type="file" id="Photo">
</div>
</div>
css
#passport{
float:left;
display:inline;
width:250px;
}
#photo{
float:right;
display:inline;
width:250px;
}
I have used container with following css .
is it bcz of div the block form of file upload will appear ?
label, input, div {
display: block;
}
input{
margin-bottom:10px;
width: 40px;
}
Or container having width or clear
.container {
width:500px;
clear:both;
}
.container input {
width: 100%;
clear: both;
}
There is a native way to inline form elements in bootstrap using form-inline and form-control classes. You don't need to use any css if you use it in this way.
I have provided a snippet demonstrating it.
Example
<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>
</head>
<body>
<div class="container">
<div id="upload row">
<form class="form-inline">
<div class="row">
<div class="form-group col-xs-6 col-md-3 ">
<label for="Passportcopy">Passport Copy</label>
<input type="file" class="form-control" id="Passportcopy">
</div>
<div class="form-group col-xs-6 col-md-3 col-md-offset-1">
<label for="Photo">Photo</label>
<input type="file" class="form-control" id="Photo">
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Hope this helps!
Are you looking for something like this?
#passport{
float:left;
display:inline;
width:250px;
}
#photo{
float:right;
display:inline;
width:250px;
}
#upload div{ /* new code */
display:inline;
}
<div id="upload">
<div>
<label for="Passportcopy">Passport Copy</label>
<input type="file" id="Passportcopy">
</div>
<div>
<label for="Photo">Photo</label>
<input type="file" id="Photo">
</div>
</div>
Website I'm building
Hello, I'm wondering if anyone could help me achieve the layout in this photograph? I'm trying to build this website, and my current progress is being frustrating. I've created the basic layout but it doesn't work correctly.
I'm not sure on how to position the content to match this image. If someone could point me in the write direction that would be great.
<body>
<div>
<div>
<div>
<div>
<h3>LOGO</h3>
</div>
<div>
<hr>
<h2>Console</h2>
</div>
<div class="form">
<form>
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" id="exampleInputPassword1" placeholder="Password">
</div>
Forgot your password?
<button type="submit">Log in</button>
</form>
</div>
<div class="images">
<a id="firstPostLink" target="_blank">
<div class="box" id="firstPostImg">
</div>
</a>
<a id="secondPostURL" target="_blank">
<div class="box" id="secondPostImg">
</div>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
<script src="https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js"></script>
<script src="app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
Heres the CSS`body {
background-color: #13253F;
color: white;
}
a {
text-decoration: none;
color: white;
}
hr {
border: solid #6cc1d6;
border-width: 5px 5px 5px 5px;
clear: both;
margin: 10px 0;
height: 0;
width: 160px;
position: relative;
left: 100px;
}
h3 {
text-align: center;
}
h2 {
margin-left: 100px;
margin-top: -15px;
}
label {
color: #f0f0f0;
}
.form {
padding: 20px;
margin: 0 auto;
position:relative
}
.box {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 600px;
height: 600px;
border:2px solid white;
}
.images {
position:absolute;
left:200px;
height:100%;
}
#firstPostImg {
position:relative;
left:1100px;
top:-300px;
}
#secondPostImg{
position:relative;
left:1100px;
top:-300px;
padding-bottom:0;
}`
Here's the link to the codepen
You didn't make it clear what specific issues you're trying to fix. But I do see several things that should be improved in the code. The first of which is the amount of divs you have. It seems you may have a lot of unnecessary nesting.
And if one of your goals is to make things more responsive, it's a good idea to use a grid framework (such as bootstrap or foundation).
Using Bootstrap, I created a wireframe of the beginning of what you're wanting to achieve. I'd recommend looking closely at how the grid system works. That'll make a big difference.
Here's my demo.
HTML
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<!-- Logo here-->
<img src="http://placehold.it/335x115" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-1">
<!-- Console -->
<h2>Console</h2>
</div>
</div>
<form class="row">
<!-- Form -->
<div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-2">
<div class="row">
<div class="col-md-12 form-group">
<label for="email" class="control-label">Email Address: </label><br>
<input type="email" name="email" id="email">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label for="password" class="control-label">Password: </label><br>
<input type="text" name="password" id="password">
</div>
</div>
<div class="row">
<div class="col-md-8">
Forgot your password?
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Log in</button>
</div>
</div>
</div>
</form>
</div>
<sidebar class="col-md-3 col-sm-12">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-6">
<img src="http://placehold.it/275x290" class="img-responsive">
</div>
<div class="col-lg-12 col-md-12 col-xs-6">
<img src="http://placehold.it/275x290" class="img-responsive">
</div>
</div>
</sidebar>
</div>
I'd recommend positioning/styling everything you create. Good thourough code will ensure less issues with different browsers and devices.
Only use the containers (divs) you actually need, give them a class or ID and position everything properly in your CSS. Minimum you should float and give a width to your key structural divs so you get predictable results.
Here's one possible solution:
$(document).ready(function() {
feednami.load(urlToHT, getHeaderTagPost);
feednami.load(urlToKX, getKXBlogPost);
});
var firstPostImg = $("#firstPostImg");
var secondPostImg = $("#secondPostImg");
var firstPost = $("#firstPost");
var secondPost = $('#secondPost');
var firstPostURL = $("#firstPostLink");
var urlToImg = "";
var urlToArticle = "";
var urlToHT = 'http://wiki.headertag.com/feed';
var urlToKX = "http://kx.indexexchange.com/feed/";
var secondPostUrl = $("#secondPostURL");
function getHeaderTagPost(data) {
if (data.error) {
console.log(data.error);
} else {
var entries = data.feed.entries;
console.log("Header Tag " + entries);
urlToImg = removeCharacters(entries[0].image.url);
urlToArticle = entries[0].link;
firstPostImg.css("background-image","url("+ urlToImg +")");
console.log(urlToImg);
// firstPost.attr("src", urlToImg);
firstPostURL.attr("href", urlToArticle);
}
}
function getKXBlogPost(data) {
if (data.error) {
console.log(data.error);
} else {
var entries = data.feed.entries;
console.log("KX blog: " + entries);
urlToImg = removeCharacters(entries[0].image.url);
urlToArticle = entries[0].link;
console.log(urlToImg);
secondPostImg.css("background-image","url("+ urlToImg +")");
secondPostUrl.attr("href", urlToArticle);
}
}
function removeCharacters(string) {
return string.substring(0, string.indexOf('?'));
}
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
body {
background-color: #13253F;
color: white;
}
a {
text-decoration: none;
color: #00AFE5;
}
hr {
border: solid #6cc1d6;
border-width: 5px;
clear: both;
margin: 10px 0;
height: 0;
width: 100%;
position: relative;
float: right;
}
h3.logo {
margin-top: 110px;
text-align: center; margin-bottom: 40px;
}
h2 {
}
label {
color: #f0f0f0;
}
.form {
margin-top: 100px;
}
.box {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 300px;
border:2px solid white;
}
.images {
position:absolute;
right: 0px; top:0;
height:100%;
}
#firstPostImg {
position:relative;
}
#secondPostImg{
position:relative;
padding-bottom:0;
}
#media screen and (max-width: 992px) {
form.form {margin-top:30px;}
#firstPostImg {margin-top: 30px;}
}
<div class="container">
<div class="col-md-8">
<div class="col-md-12">
<h3 class="logo">Index Exchange</h3></div>
<div class="col-md-3">
<hr>
<h2>Console</h2>
</div>
<div class="col-md-6">
<form class="form">
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="row">
<div class="col-md-7">
Forgot your password?
</div>
<div class="col-md-5">
<button class="btn btn-info btn-block" type="submit">Log in</button>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-4">
<a id="firstPostLink" target="_blank"><div class="box" id="firstPostImg"></div></a>
<a id="secondPostURL" target="_blank"><div class="box" id="secondPostImg"></div></a>
</div>
</div> <!-- end of .container -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
<script src="https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js"></script>
<script src="app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I'm just wondering what do we need to add into our coding so that my div position will auto adjust according to the browser's window size? Currently my div and input box always run out of position whenever I reduce the size of my browser's window.
Below is my code:
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript">
function startTime()
{
var today=new Date();
var y=today.getFullYear();
document.getElementById('datetime').innerHTML="© Systems 2003-"+y+"<br>"+"All rights reserved.";
}
</script>
<style type="text/css">
#username{
position:absolute;
top:190px;
left:70px;
}
#login{
position:absolute;
top:260px;
left:545px;
}
#password{
position:absolute;
top:240px;
left:70px;
}
#box{
border:1px solid #eaeaff;
background-color: #eaeaff;
border-radius:5px;
width:400px;
height:400px;
margin-top:100px;
margin-left:360px;
box-shadow: 4px 4px 10px black;
}
.btn{
height: 30px;
width: 100px;
position:absolute;
top:395px;
left:620px;
}
#logo{
position:absolute;
top:130px;
left:595px;
}
#model{
font-size: 25px;
position:absolute;
top:200px;
left:545px;
}
#datetime{
margin-top:20px;
}
</style>
</head>
<body onload="startTime()">
<div class="container">
<div id="box">
<img src="logo.png" alt="logo" id="logo"/>
<div id="model"><p>Welcome</p></div>
<div id="login"><p>Please login</p></div>
<form class="form-signin">
<div class="col-md-8"><input type="text" class="form-control" id="username" placeholder="Username"></div>
<div class="col-md-8"><input type="text" class="form-control" id="password" placeholder="Password"></div>
<button class="btn btn-primary">Login</button>
</form>
</div>
<div id="datetime" align="center">
</div>
</div>
</body>
Step One: Remove your absolutely positioned CSS stuff.
Step Two: Take a look at this demo bootply with this markup in it:
<div class="container">
<div class="row">
<div id="box" class="col-sm-6 col-sm-offset-3">
<img src="logo.png" alt="logo" id="logo">
<div id="model">
<p>Welcome</p>
</div>
<div id="login">
<p>Please login</p>
</div>
<form class="form-signin">
<div class="form-group">
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<input type="text" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary">Login</button>
</div>
</form>
<div id="datetime" align="center">
</div>
</div>
</div>
</div>
Step Three: Become more familiar with how Bootstraps grid works.
HTH :)
you dont need all those position absolutes. Replace your CSS with this: HERES A DEMO
#box {
border:1px solid #eaeaff;
background-color: #eaeaff;
border-radius:5px;
width:400px;
height:400px;
margin:100px auto;
box-shadow: 4px 4px 10px black;
text-align:center;
}
.btn {
height: 30px;
width: 100px;
}
#model {
font-size: 25px;
}
#datetime {
margin-top:20px;
}
Here is a basic solution without bootstrap: Remember only use absolute positioning when you absolutely have to.
Note: If you intended for your login text inputs to be pushed off to the side, this works. However as far as UX goes this is probably a very bad idea.
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript">
function startTime()
{
var today=new Date();
var y=today.getFullYear();
document.getElementById('datetime').innerHTML="© Systems 2003-"+y+"<br>"+"All rights reserved.";
}
</script>
<style type="text/css">
html, body{
height:100%; margin:0; padding:0;
}
#box{
border:1px solid #eaeaff;
background-color: #eaeaff;
border-radius:5px;
width:400px;
height:400px;
box-shadow: 4px 4px 10px black;
text-align:center;
}
.btn{
height: 30px;
width: 100px;
}
#model{
font-size: 25px;
}
#datetime{
margin-top:20px;
}
.form-control{
margin:10px;
}
.form-container{
width:25%;
height:500px;
float:left;
min-width:185px;
}
.container{
height:500px;
width:100%;
}
#box-container{
width:48%;
height:500px;
float:left;
}
#box2{
width:400px;
}
#form-signin1{
position: relative;
top: 35%;
transform: translateY(-50%);
}
</style>
</head>
<body onload="startTime()">
<div class="container">
<div class="form-container">
<form id ="form-signin1" class="form-signin">
<div class="col-md-8"><input type="text" class="form-control" id="username" placeholder="Username"></div>
<div class="col-md-8"><input type="text" class="form-control" id="password" placeholder="Password"></div>
</form>
</div>
<div id="box-container">
<div id="box">
<img src="logo.png" alt="logo" id="logo"/>
<div id="model"><p>Welcome</p></div>
<div id="login"><p>Please login</p></div>
<form class="form-signin">
<button class="btn btn-primary">Login</button>
</form>
</div>
<div id="box2">
<div id="datetime" align="center"></div>
</div>
</div>
</div>
</body>
Something like this?
Fiddle for you
#box {
border:1px solid #eaeaff;
background-color: #eaeaff;
border-radius:5px;
width:300px;
height:400px;
margin-top:100px;
margin-left:360px;
box-shadow: 4px 4px 10px black;
padding: 3em 4em;
}
#box form, #box header {
text-align: right;
}
#box .form-group {
margin-bottom: 15px;
/*boostrap will already have this so delete it */
}
.btn {
height: 30px;
width: 100px;
}
#model {
font-size: 25px;
}
#datetime {
margin-top:20px;
}
<div class="container">
<div id="box">
<header>
<img src="logo.png" alt="logo" id="logo" />
<h2 id="model">Welcome</h2>
<p>Please login</p>
</header>
<section>
<form class="form-signin">
<div class="form-group">
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<input type="text" class="form-control" id="password" placeholder="Password">
</div>
<button class="btn btn-primary">Login</button>
</form>
</section>
</div>
<div id="datetime" align="center"></div>
i'm not very familiar with CSS, i'm trying to apply a border on my login form, here is the code i use:
login.html:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<div id="login_container">
<form action="#" method="POST">
<div class="row">
<label for="username" class="label">Username</label>
<input type="text" class="field" name="username" />
</div>
<div class="row">
<label for="password" class="label">Password</label>
<input type="password" class="field" name="password" />
</div>
</form>
</div>
css/style.css:
#login_container {
margin-top:50px;
margin-left: auto;
margin-right: auto;
width: 300px;
border:1px solid black;
display:block;
}
.field {
float:right;
margin-left: 10px;
}
label {
float:left;
}
.row{
display:block;
clear:both;
}
and the output:
Why does the border cross the password text field?
EDIT:
with
form{
border:1px solid black;
}
the output is:
Add overflow:auto; to your #login_container div.
jsFiddle example
Because the inner elements are floated, you need to specify the overflow property to bring the border back around them.