I am using bootstrap 3 in a small div. When I increase the window's width by dragging the window - the fields (username and password input fields) that are supposed to stay in the interior of the div move out to almost the center of the window. Why? CSS and HTML are below
<body>
<div class="login">
<div class="container">
<div class="col-md-12">
<div class="row">
<form action="https://www.blah/login"/>
<h3>Login</h3>
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8"><input class="rounded white" type="text" name="username" placeholder="Username:" required/><br></div>
<div class="col-xs-4">Password:</div>
<div class="col-xs-8"><input class="rounded white" type="password" name="password" placeholder="Password:" required/><br></div>
<input type="checkbox" name="retrieve" value="true"/>I forgot my password.
<ul class="no-bullets">
<li><input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now"></li>
<li><input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel"></li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS----
.login {
height: 200px;
width: 330px;
max-width: 330px;
padding: 10px 20px 10px 20px;
background-color: #242424;
border: 1px solid #545454;
border-radius: 5px;
color: #ddd;
}
JS Fiddle
The elements containing your labels (.col-xs-4) have a width: 33.33333%.
The elements containing your input fields (.col-xs-8) have a width: 66.6666667%.
When the screen is narrow these width values are small and the labels and inputs are close together.
When the screen expands, these width values expand as well, creating a progressively larger gap between label and input.
The answer is to give the container a width constraint.
Add this style to the container class:
.col-md-12 { max-width: 250px; }
I tested it in Chrome and it works. Also, here's a live demo:
http://jsfiddle.net/y0psw5dn/
You seemed to inproperly set .login to height:200px.
.login{
/*height:200px*/
}
Is is what you want?
Try this.
<div class="login">
<div class="row">
<div class="col-md-12">
<form action="https://www.blah/login" />
<h3>Login</h3>
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8">
<input class="rounded white" type="text" name="username" placeholder="Username:" required/>
<br>
</div>
<div class="col-xs-4">Password:</div>
<div class="col-xs-8">
<input class="rounded white" type="password" name="password" placeholder="Password:" required/>
<br>
</div>
<input type="checkbox" name="retrieve" value="true" />I forgot my password.
<ul class="no-bullets">
<li>
<input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now">
</li>
<li>
<input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel">
</li>
</ul>
</div>
</div>
</div>
.login {
height: 200px;
width: 330px;
max-width: 330px;
padding: 10px 20px 10px 20px;
background-color: #242424;
border: 1px solid #545454;
border-radius: 5px;
color: #ddd;
}
JSfiddle
Just put the .login div under the .container div. Below the code is
<div class="container">
<div class="login">
See the jsfiddle demo.
I changed your structure. There was some wrong. You can check this demo on jsfiddle
I also using Bootstrap 3 here Just Check it out this code.
Your HTML code structure is not organized here. First you need to understand its row and columns architecture what the purpose Behind it.
and Here on many places you open the div but you are not closing your at proper Location Where you need to close it.
I used this HTML Code :
<div class="container">
<div class="col-md-12 login">
<form action="https://www.blah/login"/>
<h3>Login</h3>
<div class="row">
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8">
<input class="rounded white" type="text" name="username" placeholder="Username" required/><br>
</div>
</div>
<div class="row">
<div class="col-xs-4">Password:</div>
<div class="col-xs-8">
<input class="rounded white" type="password" name="password" placeholder="Password" required/><br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="checkbox" name="retrieve" value="true"/> I forgot my password.
</div>
</div>
<div class="row">
<div class="col-md-6">
<input class="bg-default btn-font" type="submit" name="register" value="Submit Now">
</div>
<div class="col-md-6">
<input class="bg-default btn-font" data-dismiss="modal" type="submit" value="Cancel">
</div>
</div>
</div>
and css code is here:
.login { height: 200px; width: 330px; max-width: 330px; padding: 10px 0px 10px 20px; background-color: #242424; border: 1px solid #545454; border-radius: 10px; color: #ddd; } .btn-font{ color: #000; }
and here is my running fiddle Example:
For Demo Click Here
hi please check below code it should be within container...
<div class="container">
<div class="login">
<div class="col-md-12">
<div class="row">
<form action="https://www.blah/login"/>
<h3>Login</h3>
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8"><input class="rounded white" type="text" name="username" placeholder="Username:" required/><br></div>
<div class="col-xs-4">Password:</div>
<div class="col-xs-8"><input class="rounded white" type="password" name="password" placeholder="Password:" required/><br></div>
<input type="checkbox" name="retrieve" value="true"/>I forgot my password.
<ul class="no-bullets">
<li><input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now"></li>
<li><input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel"></li>
</ul>
</div>
</div>
</div>
check the demo here
Just change your upper starting structure of your html like this only
<div class="container">
<div class="row-fluid">
<div class="login">
the problem is with your html structure still many wrong things are
present you can make it better just try to improve by understanding the grid system of Bootstrap
it happens because of the improper structure sequence so that
here is the working demo jsfiddle
DEMO check out
here i tried to modify your code my way you can check out
.login {
height:280px;
max-width:250px;
padding: 10px 20px 10px 20px;
background-color: #242424;
border: 1px solid #545454;
border-radius: 5px;
color: #ddd;
}
.temp_div{
float: left;
margin-top: 10px;
}
.forgetPass_check{
padding-right:5px;
vertical-align:bottom;
padding-left: 15px;
}
.forgetPass_label{
padding-left:10px;
}
.no-bullets{
list-style-type: none;
margin: 0;
padding-left: 15px;
}
ul.no-bullets li{
float: left;
padding-right: 20px;
color:black;
}
<div class="container">
<div class="row-fluid">
<div class="login">
<form action="https://www.blah/login"/>
<h3 class="text-center">Login</h3>
<div class="col-xs-8"><label>UserName:</label><input class="rounded white" type="text" name="username" placeholder="Username:" required/></div>
<div class="col-xs-8"><label>Password:</label><input class="rounded white" type="password" name="password" placeholder="Password:" required/></div>
<div class="temp_div">
<div class="forgetPass_check">
<input type="checkbox" name="retrieve" value="true"/><label class="forgetPass_label">I forgot my password.</label>
</div>
<div class="button_wrapper">
<ul class="no-bullets">
<li><input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now"></li>
<li><input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
here is the demo code as well
Please Check Out Modified
even you can check this
Another try
Related
i want to get this file upload button to the right side like other text boxes.
tried editing the CSS file seems not working.
I'll put the CSS code and HTML code below.
if I can add something like add your image like drag and drop option that'll be very cool :)
little left algin the file upload area
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="PostYourAD.css" type="text/css">
</head>
<body>
<div class="navmenu">
<ul>
<li>Home</li>
<li>Post Your AD</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class="logo">
<img src="images/logo.jpg" alt="logo" align = "left" width="150" height="150" />
</div>
<br><br><br><br><br><br><br><br>
<h1 align = "center">Post Your AD</h1>
<br><br>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="images">Upload Your Images</label>
<div class="col-75">
<input type="file" id="myFile" name="filename">
</div>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="name">Name</label>
</div>
<div class="col-75">
<input type="text" id="name" name="name" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="location">Location</label>
</div>
<div class="col-75">
<input type="text" id="location" name="location" placeholder="Your Location..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="price">Price</label>
</div>
<div class="col-75">
<input type="text" id="price" name="price" placeholder="Enter the Price..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="pnumber">Phone Number</label>
</div>
<div class="col-75">
<input type="text" id="pnumber" name="pnumber" placeholder="Your Phone Number..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="Type">Type</label>
</div>
<div class="col-75">
<select id="type" name="type">
<option value="type">Select a Type</option>
<option value="land">Land</option>
<option value="vehicale">Vehicale</option>
<option value="house">House</option>
<option value="annex">Annex</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="description">Description</label>
</div>
<div class="col-75">
<textarea id="description" name="description" placeholder="Write Your Description.." style="height:200px"></textarea>
</div>
</div>
<br>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
CSS code
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
text-align: justify;
vertical-align:super;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
input[type=file] {
text-align: justify;
vertical-align:super;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: middle;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: right;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
It seems like one of the closings tags in your file input code is misplaced:
You have this:
<div class="row">
<div class="col-25">
<label for="images">Upload Your Images</label>
<div class="col-75">
<input type="file" id="myFile" name="filename">
</div>
</div>
</div>
You should have this:
<div class="row">
<div class="col-25">
<label for="images">Upload Your Images</label>
</div>
<div class="col-75">
<input type="file" id="myFile" name="filename">
</div>
</div>
Reading you HTML code, you're closing the "html" tag, but the opening one, which should be below the doctype, is missing.
If I may, I don't know if it's the copy / paste who misaligned your tags, but I advise you to always align your tags correctly, or use a formatter. It will help you to edit your code and to spot small errors like this one more easily ;)
You placed the </div> for an element of the class col-75 wrongly. Here's the corrected version: https://jsfiddle.net/fw26y5pe/.
Input box has no space in between on mobile view but looks okay on laptop. Ive tried to put br tag to make space in between the input boxes but the laptop view will change its look.
<div class="panel panel-flat " style=" border: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.18); border-radius: 9px;">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group-xlg">
<input placeholder="ስም" id="name" maxlength="12" name="ስም" type="text" style="border-radius: 9px; border: 0; background-color: #F3F4F6"
class="form-control border-bottom-0 text-size-large input-xlg">
</div>
</div>
<div class="col-md-6">
<div class="form-group-xlg">
<input placeholder="የአባት ስም" id="fname" style="border-radius: 9px; border: 0; background-color: #F3F4F6" maxlength="12" name="የአባት ስም" type="text"
class="form-control border-teal border-lg input-xlg">
</div>
</div>
</div>
</div>
</div>
A simple approach would be to use form-group elements and not form-group-xxl. Please see this fiddle https://jsfiddle.net/qtL1forw/1/ .
If you must use form-group-xxl, you can add top and bottom padding to the element.
The next learning step would be to stay away from inline styling and place your style rules in a stylesheet. Best of luck!
This solved it.
<div class="panel panel-flat " style=" border: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.18); border-radius: 9px;">
<div class="panel-body">
<div class="row">
<div class="col-md-6" style="padding-top: 7px;padding-bottom: 7px;">
<div class="form-group-xlg">
<input placeholder="ስም" id="name" maxlength="12" name="ስም" type="text" style="border-radius: 9px; border: 0; background-color: #F3F4F6"
class="form-control border-bottom-0 text-size-large input-xlg ">
</div>
</div>
<div class="col-md-6" style="padding-top: 7px;padding-bottom: 7px;">
<div class="form-group-xlg">
<input placeholder="የአባት ስም" id="fname" style="border-radius: 9px; border: 0; background-color: #F3F4F6" maxlength="12" name="የአባት ስም" type="text"
class="form-control border-teal border-lg input-xlg">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-4" style="padding-top: 7px;">
<div class="form-group-xlg text-center ">
<input placeholder="እድሜ" id="age" style="border-radius: 9px; border: 0; background-color: #F3F4F6"
maxlength="2" name="እድሜ" type="tel"
class="form-control border-lg input-xlg text-center">
</div>
</div>
</div>
</div>
</div>
Im using bootstrap 4 and have this form in a section that Im having issues with centering the button and making it the length of the two columns so that its even with input-boxes outer border. currently if i just have button at 100% width it appears centered but is longer than the inputs boxes so it looks off. Do I have it structured correctly? I used a form off there examples and am not sure if this is correct or if there is a better way.
here is my codepen:https://codepen.io/robot_head/full/qKQwqe/
html for that section:
<div class="container-fluid bg-3 text-center" id="contact">
<h3>CONTACT US</h3><br>
<div class="container">
<div class="col-sm-8 col-sm-push-2">
<form role="form">
<br style="clear:both">
<div class="col-sm-6">
<div class="form-group">
<input type="text" class="control" id="firstname" name="firstname" placeholder="First Name" required>
</div>
<div class="form-group">
<input type="text" class="control" id="email" name="email" placeholder="Email" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="text" class="control" id="lastName" name="lastName" placeholder="Last Name" required>
</div>
<div class="form-group">
<input type="text" class="control" id="phone" name="phone" placeholder="Phone" required>
</div>
</div>
<button type="button" id="submit" name="submit" class="btn btn-primary pull-right">SEND</button>
</form>
</div>
</div>
</div>
css:
#contact{
background-color: #febb2e;
height: 500px;
color: #000;
}
.form-area
{
background-color: #FAFAFA;
padding: 10px 40px 60px;
margin: 10px 0px 60px;
border: 1px solid GREY;
}
.control{
display: block;
width: 100%;
height: 50px;
padding: 6px 10px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
border: 1px solid #fff;
border-radius: 10px;
}
button#submit {
background-color: #8d1f2d;
border-color: #8d1f2d;
width: 100%;
border-radius: 10px;
}
you can fix them in many ways, the reason for the issue is that the col-sm-6 class has a padding 15px on both sides, and your button does not have any padding. As a quick fix either you can wrap your button in a div with class col-sm-12 or just add a padding of 15px on left and right of the button.
I am making a form inside of jumbotron and for some reason I get it to look good on desktop view but when viewing it mobile it goes out of the jumbotron. I am using netbeans to do my coding. I even use #media (max-width: 620px). I tried using google but failed :(
#wrapper{
width: 500px;
height: 700px;
position: relative;
margin: 0 auto;
background-color: rgba(255,255,255,.75);
text-align: center;
}
form{
color: black;
text-align: center;
}
div{
clear: both;
}
#off{
background-color: rgba(225,0,0,.85);
color: white;
width: 525px;
height: 140px;
font-size: 1rem;
text-align: center;
}
.formHeader{
color: #104c8b;
}
.formFooter{
background-color: rgba(0,0,255,.5);
color: white;
margin: 65px 0 0 0;
}
#media(max-width: 620px) {
#wrapper{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
background-color: rgba(255,255,255,.75);
text-align: center;
}
<section id="top" class="jumbotron">
<div class="container-fluid">
<div class="row text-center">
<div id="wrapper"><p>Contact Form</p>
<div class="formHeader">
</div>
<form action="test.html" method="get" name="test" id="myForm">
<label>Name</label><input name="name" type="text" /><br>
<label>Email</label><input name="email" type="text" /><br>
<label>Phone</label><input name="number" type="text" /><br>
<input type="submit" value="Send"/>
</form>
<div class="formFooter">
</div>
</div>
</div>
</div>
</section>
Given that you're using Bootstrap as a framework it seems a shame not to make use of all of well... the framework. With some restructuring of your HTML (to make use of Bootstrap's responsive classes and form controls) you can easily achieve the responsiveness you desire.
Most of it is just adding the necessary .col-*-* for grid layouts, and of course applying Bootstrap classes to your input and label elements, etc. An example Bootply is below though the code is significantly altered to better-reflect Bootstrap's Framework and modern input classifications (like tel or email, etc).
http://www.bootply.com/mPNCZyXbbD
The HTML:
<section id="top" class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="form-wrapper text-center">
<p>Contact Form</p>
<form action="test.html" method="get" name="test" id="myForm" class="form form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input name="name" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Phone</label>
<div class="col-sm-10">
<input name="number" type="tel" class="form-control">
</div>
</div>
<button type="submit" class="btn btn-default">Send</button>
</form>
</div>
</div>
</div>
</div>
</section>
And the CSS:
.form-wrapper {
padding: 15px;
background: rgba(255,255,255,0.75);
}
I can't figure out why none of the CSS I am using is having an effect on a textarea. The textarea's id is "addquestion", which is what I'm using in my CSS, but to no avail. Inline CSS works, but not through my separate stylesheet. I can verify that the stylesheet is definitely linked correctly because there is another element that is working just fine, its just this textarea that isn't being affected.
#addquestion {
width: 20px;
height: 120px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
background-image: url(bg.gif);
background-position: bottom right;
background-repeat: no-repeat;
}
<form>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control" rows="3" id="addquestion" style="width:20px;" placeholder="Find this for me..."></textarea>
</div>
<div class="form-group">
<div class="input-group" id="addtags">
<input type="text" class="form-control" placeholder="Tags">
</div>
</div>
<div class="form-group">
<div class="input-group" id="addmoney">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
</div>
</div>
<div class="col-md-6">
<input type="file" id="main_upload_file">
</div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<a class="btn btn-success" type="submit">Submit</a>
</div>
</div>
</div>
</div>
</form>
You could try changing #addquestion to textarea in your css file. Unless you have other textareas, of course.