I know this is a question that has a number of threads on here however after trying several of the suggested answers I am having no such luck.
I am not new to programming however I am new to CSS and HTML.
Currently I am trying to create a basic "Login Page" for my personal web application.
GitHub: https://github.com/n-winspear/cashflow-webapp
From reading other threads on here I have tried:
- Adding heights to columns, rows and containers.
- Changing the container type
- Using many different classes (center-text, justify-content-center, align-self-center, align-items-center)
- Changing the form type
- Loading the CSS directly from a URL instead of a local file
<div class="container-fluid">
<div class="form-row align-items-center">
<div class="col-sm-4 offset-sm-4">
<form class="form-signin">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
What I was hoping to get was the form sitting in the middle of the web page however it stays stuck at the top.
Here is what I am currently getting
i cloned your project and made some modifications on it, and it works well, so what you must do is:
create a style.css file in your css folder (much cleaner code)
add a link to your new stylesheet in html and add an id to your container so that you can identify it (in case if you are going to add other containers later,you will need to add an id), so your final html code will look like that:
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type"text/css" href="bootstrap/css/styles.css">
<title>Cashflow Web App</title>
</head>
<body>
<div class="container-fluid" id="main-block">
<div class="form-row align-items-center">
<div class="col-sm-4 offset-sm-4">
<form class="form-signin">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
in style.css file, use display:table and display: table-cell, simply write the following code:
body{
height: 100%;
}
#main-block{
height: 100%;
display: table;
}
.align-items-center{
display: table-cell;
vertical-align: middle;
}
Here's how it looked after i added these modifications, i hope this helps you.enter image description here
feel free to ask any other question if it doesn't work for you.
You can use the absolute position trick to vertically center the div, or use Flex on the body container and VH units. In this case I would go with the absolute position.
Absolute:
.container-fluid {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Flex Body:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Related
I'm still learning bootstrap and I would like to know what should I use move things inside a bootstrap container.
My question is a little bit strange but maybe with images and code it will be easier to understand.
I want to create a form in that precise position like in this image but I don´t know how can to do it. I don't understand if I have to apply margins or padding neither if it is suppose to change/apply css in the row or in the container.
At this moment my website looks like this and my code is this one:
<div id="form">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-offset-7">
<form class="form-group">
<label for="testEmail">Email address</label>
<input type="email" class="form-control" id="testEmail" placeholder="Email">
</form>
</div>
</div>
</div>
</div>
Can you guys explain me how can I change my form position and how it is suppose to move things inside bootstrap?
Thanks
you can use offset like what you did. But here I prefer to create to Columns of divs inside row. please review this one: (see in full screen to check the layout)
form {
border-radius: 2px;
border: 1px solid green;
padding: 15px;
}
#form {
margin-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="form">
<div class="container">
<div class="row">
<div class="hidden-xs col-lg-3">test1</div>
<div class="col-xs-6 col-lg-3">test2</div>
<div class="col-xs-6 col-lg-4">
<form class="form-group">
<label for="testEmail">Email address</label>
<input type="email" class="form-control" id="testEmail" placeholder="Email">
</form>
</div>
<div class="hidden-xs col-lg-2">test3</div>
</div>
</div>
</div>
You can use bootstrap's offset class for positioning elements as you need. Here is the documentation for offset:
https://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns
below is my code
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="col-md-6">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
</div>
</div>
i have created two columns in one row
first column has label and under that input box
next column has only label and it should be aligned inline with input box, but since only label was there it used to display on top. So i wrote one dummy label. Still it is not aligned with input box.
how to do this? Is there any way to do it in bootstrap?
Add between label. There should be some content inside label to make it work. So just add html code of empty space.
<label> </label>
However a better approach will be without bootstrap columns and using custom css as follows:
.column-holder {
table-layout: fixed;
display: table;
width: 100%;
}
.column-holder .column {
vertical-align: bottom;
display: table-cell;
padding: 0 15px;
}
label {
display: block;
}
input {
display: block;
width: 100%;
}
<div class="column-holder">
<div class="column">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="column">
<label>test</label>
</div>
</div>
Without Bootstrap :
that is happens because you put every label inside same div tag again and again.
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="col-md-6">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
when you remove those two same div tags or put all labels and input tag inside a single label then all elements will gets inline automatically.
HOW TO DO :
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
</div>
</div>
Using Bootstrap :
Yes you can do same thing using bootstrap even that is more easy and looks more beautiful. here is a simple example for you.
copy this code and run with chrome or firefox or safari this code will work perfectly
you can visit this site:for more detail
or check this outinline form using bootstrap
<!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.6/css/bootstrap.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>
</head>
<body>
<div class="container">
<h2>Example of inline form</h2>
<form class="form-inline" role="form">
<div class="form-group">
<label >Name : </label>
<input type="email" class="form-control" id="name" placeholder="Enter your name ">
</div>
<div class="form-group">
<label for="email">Email : </label>
<input type="password" class="form-control" id="email" placeholder="enter your email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
I'm developing a form in Bootstrap 3 that is to have a series of text controls and an image. The form takes up 100% of its container, and the text inputs also are set to 100% width. This works well when I don't have to worry about an image. I use the bootstrap .form-control and .form-horizontal classes to make it work (code at the bottom):
Current Look
I need to put the image to the right of these form controls and decrease their width appropriately:
Mockup
I would simply put in another column in Bootstrap's grid system to handle this, but I'd also like the columns to go back up to full width when the image is done, as shown in the mockup image above. Something similar to the "tight" image layout in Microsoft Word. I've tried setting float:right; and display:inline-block' to the image class but it doesn't turn out correctly:
Not Working Yet
Anyone know how to make the design work like how I described it in the mockup?
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<h2>New Guest</h2>
<form class="form-horizontal" role="form">
<img src="http://images.all-free-download.com/images/graphiclarge/man_silhouette_clip_art_9510.jpg" style="float: right; max-width: 200px; display: inline-block;" />
<div class="form-group" id="group-tbFirstName">
<label for="tbFirstName" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbFirstName" placeholder="First Name" value="" />
</div>
</div>
<div class="form-group" id="group-tbLastName">
<label for="tbLastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbLastName" placeholder="Last Name" value="" />
</div>
</div>
<div class="form-group" id="group-optGender">
<label for="optGender" class="col-sm-3 control-label">Gender</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="optGender" placeholder="Gender" value="" />
</div>
</div>
<div class="form-group" id="group-tbAge">
<label for="tbAge" class="col-sm-3 control-label">Age</label>
<div class="col-sm-9">
<input type="number" class="form-control" step="any" id="tbAge" value="" placeholder="Age" />
</div>
</div>
<div class="form-group" id="group-dtDateOfBirth">
<label for="dtDateOfBirth" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dtDateOfBirth" placeholder="Date of Birth" value="" />
</div>
</div>
</form>
</div>
</body>
</html>
The specific effect I'm going for is to have the inputs below the image expand out to 100% again. Like this:
I know that the image can be floated but I don't want all the inputs below it at the same width as the ones on the lines with the image. I want them to expand.
You just need to add some floats to the image and also to the form, as in the following:
(FIDDLE)
HTML
<img class="img-right">
<form class="form-horizontal">
</form>
CSS
.img-right {
float: right;
max-width: 200px;
padding-left: 20px }
.form-horizontal {
float: right }
Have you tried putting the first 3 or 4 inputs and the image in their own row? This will cause the row to expand out to the width of the container and keep your image on the right. You can also add the class class="img-responsive" to the image so that it will shrink down as the screen shrinks.
<div class="row">
<div class="col-sm-8">
//inputs go here
</div>
<div class="col-sm-4">
//image goes here
</div>
</div>
<div class="row">
<div class="col-sm-12>
//the rest of your inputs here
</div>
</div>
I see many kinds of format column in your code. This makes it behave uncontrollable.
Try to use one format only, say, class="col-lg-6.
As long as I know, bootstrap use 100% for form-control, we can modify it by choosing the suitable class of columns.
To handle your need, you can create new CSS file. place it below the bootstrap.min.css. Then Float the image to the right and set the min-width and max width in % to make it resized automatically based on browser's windows.
Besides, use class='img-responsive' inside the image attr to make it resized auto.
Use float property float: right;
.img-right {
float: right;
max-width: 200px;
padding-left: 20px;
}
.form-horizontal {
float: right;
}
<img class="img-right">
<form class="form-horizontal">
</form>
This spacing issue was driving me crazy. I finally figured out that in order to have spaces between the form elements, I need to format my HTML code as shown below.
Could somebody explain what's going on here? Is this some newline issue?
Notes:
I'm using Bootstrap 3 CSS file, no other styling in place
the only difference between the 2 samples below is in how .form-group divs are laid out
1. Form elements with spaces:
<!DOCTYPE html>
<html>
<head>
<title>Elements with spaces</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</body>
</html>
2. Form elements without spaces:
<!DOCTYPE html>
<html>
<head>
<title>Elements with spaces</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div><div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div><button type="submit" class="btn btn-default">Sign in</button>
</form>
</body>
</html>
Inline elements are sensitive to white space in your code. Since you have divs in your example which are normally block level elements, but they're appearing side by side, your CSS is most likely changing them to display inline. You could also remove the gap by using HTML comments.
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div><!--
--><div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
According to the Bootstrap docs (http://getbootstrap.com/css/#forms-inline), form-group is used to wrap the form-control so your 2nd approach is better.
Your 1st example is rendering as expected since the Bootstrap CSS sets inline-block and no margin on the form-control itself. You could override this behavior by using margin in the CSS..
.form-inline .form-control {
display: inline-block;
margin-right:4px;
}
Demo: http://bootply.com/86947
As an alternative to j08691 answer, this is the method I use to prevent white-space:
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div
><div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
You don't introduce unnecessary comments, but auto-formatting in some IDEs might mess up your indentation a bit.
Right now I'm working on a school project where I create a bookstore. I have created the front page and now I'm trying to use php to create the login and register system. I've created the Register page (php) and I created a CSS File to go along with it, however I can't get the two to connect properly. When I run it in localhost the css won't render. I don't see a error in my code and I don't understand why it's not working. I tried to change the css name around a bit to see if the problem was the naming however nothing else seems to work.
/* Import Google Font */
#import url('https://fonts.googleapis.com/css?family=Lora&display=swap');
.form-div {
margin: 50px auto 50px;
padding: 25px 15px 10px 15px;
border: 1px solid #80ced7;
border-radius: 5px;
font-size: 1.1em;
font-family: 'Lora', serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<!--Bootstrap 4 CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- Other CSS File --->
<link rel="stylesheet" href="registerandlogin.css" type="text/css">
<title>Register</title>
</head>
<body>
<p>Register Today and Join the Royal Reader Community</p>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4">
<form action="signup.php" method="post">
<h3 class="text-center">Register</h3>
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" name="email" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="passwordConf">Confirm Password</label>
<input type="password" name="passwordConf" class="form-control form-control-lg">
</div>
<div class="form-group">
<button type="submit" name="signup-btn" class="btn btn-primary btn-block btn-log">Sign Up</button>
</div>
<p class="text-center">Already a member?</p>Sign In
</form>
</div>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Try to add a class to your form or whatever like this:
<form class="form-div" action="signup.php" method="post">
Here you can read about css selectors: https://www.w3schools.com/html/html_css.asp
You do not have an element named .form-div, which is why your CSS does not affect anything. Try adding an element with that class name in your <form> tag.