How it should look
How it is not suppose to look
So my goal is to try to make my Registration form look like my login form. All I did was added extra fields and then the form went crazy. Can anyone explain? I searched the internet for help but that didn't work and I was just really trying to make this one work because it looks nice. Yes I am working and learning dJango so I just wanted this to look nice even though it is not even needed. I go the extra mile sometimes but hate when I don't understand.
This is my index html and login form
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}" />
<title>Albert's Page</title>
</head>
<body>
<section class="Form my-4 mx-5">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-5">
<img
src="../static/img/swordandshield.jpg"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-7 px-5 pt-5">
<h1 class="font-weight-bold py3">Welcome to My place</h1>
<h4>Sign into your account</h4>
<form action="" method="post">
<div class="form-row">
<div class="col-lg-7">
<h4>User Name</h4>
<input
type="userName"
name="userName"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Password</h4>
<input
type="password"
name="pw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<button class="btn1 mt-3 mb-5" type="submit">Login</button>
</div>
</div>
<p>
Don't have an account yet?Register here
</p>
</form>
</div>
</div>
</div>
</section>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
</body>
</html>
This is my registration form, it uses the same css and boostrap method
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}" />
<title>Albert's Page</title>
</head>
<body>
<section class="Form my-4 mx-5">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-5">
<img
src="../static/img/swordandshield.jpg"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-7 px-5 pt-5">
<h1 class="font-weight-bold py3">Registration Form</h1>
<h4>Sign up for an account</h4>
<form action="" method="post">
<div class="form-row">
<div class="col-lg-7">
<h4>Your Full Name</h4>
<input
type="fullName"
name="fullName"
class="form-control my-3 p-4"
/>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>User Name</h4>
<input
type="userName"
name="userName"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Password</h4>
<input
type="password"
name="pw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Confirm Password</h4>
<input
type="password"
name="cpw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<button class="btn1 mt-3 mb-5" type="submit">Register</button>
</div>
</div>
<p>Have an account then Sign In</p>
</form>
</div>
</div>
</div>
</section>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
</body>
</html>
and this is my css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: rgb(211, 218, 218);
}
.row {
background: white;
border-radius: 30px;
box-shadow: 12px 12px 22px;
}
img {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.btn1 {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: black;
color: white;
border-radius: 4px;
font-weight: bold;
}
.btn1:hover {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: rgb(51, 105, 38);
color: white;
border-radius: 4px;
font-weight: bold;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: rgb(211, 218, 218);
}
.row {
background: white;
border-radius: 30px;
box-shadow: 12px 12px 22px;
}
img {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.btn1 {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: black;
color: white;
border-radius: 4px;
font-weight: bold;
}
.btn1:hover {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: rgb(51, 105, 38);
color: white;
border-radius: 4px;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}" />
<title>Albert's Page</title>
</head>
<body>
<section class="Form my-4 mx-5">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-5">
<img
src="https://images.unsplash.com/photo-1602900004353-2e786ce8f35c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=658&q=80"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-7 px-5 pt-5">
<h1 class="font-weight-bold py3">Registration Form</h1>
<h4>Sign up for an account</h4>
<form action="" method="post">
<div class="form-row">
<div class="col-lg-7">
<h4>Your Full Name</h4>
<input
type="fullName"
name="fullName"
class="form-control my-3 p-4"
/>
</div>
<!-- I added below </div> tag here. only one change and it works. -->
</div>
<!-- Change Ended. -->
<div class="form-row">
<div class="col-lg-7">
<h4>User Name</h4>
<input
type="userName"
name="userName"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Password</h4>
<input
type="password"
name="pw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Confirm Password</h4>
<input
type="password"
name="cpw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<button class="btn1 mt-3 mb-5" type="submit">Register</button>
</div>
</div>
<p>Have an account then Sign In</p>
</form>
</div>
</div>
</div>
</section>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
</body>
</html>
If i got your question this should help you.
You need to add crispy form tag on the top of the index page. To use crispy form tags, you need to install them first;
pip install django-crispy-forms
Then on the top of the index page (or any page where the form is present or use it in the base.html page);
{% load crispy_forms_tags %}
Create your forms in a different file named as forms.py where you can create your forms from python classes.
Import these forms into the views.py file and transfer them to html pages as variables.
In html pages;
<form action=some_url>
{{ form | crispy }} <!-- here the form is the variable whose value is set to be the class which created form in forms.py -->
</form>
Related
I'd to split html page into 3 devision :
1st : contain text , table ...
2nd : this part will contain form for user submit
3nd : contain hyperlink or sth like that
my code likes below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOOTSTRAP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<!-- <style>
.form {
margin: auto;
margin-top: 100px;
width: 300px;
padding: 20px;
border: 1px solid #DDD;
border-radius: 5px;
background-color: darkgray;
}
.form-label{
/* background-color: blue; */
color:aqua
}
</style> -->
</head>
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
<form action="" method="post">
{% csrf_token %}
<div class="form" style="width: 50%;">
<h3 class="mt-3">Please input the info</h3>
<div class="form-group mb-2">
<label class="form-label" >password:</label>
<input class="form-control" type="password" name = "password"/>
</div>
<div class="form-group mb-2 mt-2">
<label class="form-label">phone:</label>
<input class="form-control" type="text" name="phone"/>
</div>
<!-- <button style="width:100%" class="btn btn-primary btn-block mb-4 mt-3">submit</button> -->
<button style="width:100%" class="btn btn-warning btn-block mb-4 mt-3">submit</button>
</form>
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
</html>
however, its layout was not my expect, I also attach the output expect, could you please help assist ?
Here you go...
You are missing a <div> closing tag!
Optional: Change col to col-md-4 col-12.
Optional: You can remove style="width: 50%;".
Optional: Add d-flex justify-content- classes if you want the first card to be positioned to the left, the second in the middle and the third to the right.
See the snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOOTSTRAP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<!-- <style>
.form {
margin: auto;
margin-top: 100px;
width: 300px;
padding: 20px;
border: 1px solid #DDD;
border-radius: 5px;
background-color: darkgray;
}
.form-label{
/* background-color: blue; */
color: aqua;
}
</style> -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-12 d-flex justify-content-md-start justify-content-center">
1 of 3
</div>
<div class="col-md-4 col-12 d-flex justify-content-center">
<form action="" method="post">
{% csrf_token %}
<div class="form">
<h3 class="mt-3">Please input the info</h3>
<div class="form-group mb-2">
<label class="form-label">password:</label>
<input class="form-control" type="password" name="password" />
</div>
<div class="form-group mb-2 mt-2">
<label class="form-label">phone:</label>
<input class="form-control" type="text" name="phone" />
</div>
<!-- <button style="width:100%" class="btn btn-primary btn-block mb-4 mt-3">submit</button> -->
<button style="width:100%" class="btn btn-warning btn-block mb-4 mt-3">submit</button>
</form>
</div>
</div>
<div class="col-md-4 col-12 d-flex justify-content-md-end justify-content-center">
3 of 3
</div>
</div>
</div>
</body>
</html>
You can try this
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-4 border">
1 of 1
</div>
<div class="col-xs-12 col-md-4 border">
1 of 2
</div>
<div class="col-xs-12 col-md-4 border">
1 of 3
</div>
</div>
</div>
I have a problem with using background-image in style in my HTML page.I am creating login page in my Django application and when I execute the page, the background image is not displaying. Interestingly, this code worked yesterday and not today.
I've already deliberately placed the image and the file in one folder to avoid path problems.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title> Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<style>
body {
margin-top: 20px;
background: rgb(184, 213, 242);
}
.account-block {
padding: 0;
background-image: url('login.jpg') !important;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
position: relative;
}
.account-block .overlay {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.account-block .account-testimonial {
text-align: center;
color: #fff;
position: absolute;
margin: 0 auto;
padding: 0 1.75rem;
bottom: 3rem;
left: 0;
right: 0;
}
.text-theme {
color: #5369f8 !important;
}
.btn-theme {
background-color: #5369f8;
border-color: #5369f8;
color: #fff;
}
</style>
</head>
<body>
<div id="main-wrapper" class="container" style="text-align:center; width:100%;">
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="card border-0">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-6">
<div class="p-5">
<div class="mb-5">
<h3 class="h4 font-weight-bold text-theme">Login</h3>
</div>
<h6 class="h5 mb-0">Welcome back!</h6>
<p class="text-muted mt-2 mb-5">Enter your User ID and password to access admin panel.</p>
<form method="POST" action="">
{% csrf_token %}
<div class="form-group">
<label for="exampleInputText1">User ID</label>
<input type="text" name="username" class="form-control" id="exampleInputText1">
</div>
<div class="form-group mb-5">
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-theme">Login</button>
Forgot password?
</form>
</div>
</div>
<div class="col-lg-6 d-none d-lg-inline-block">
<div class="account-block rounded-right">
<div class="overlay rounded-right"></div>
<div class="account-testimonial">
<h4 class="text-white mb-4">Test 1</h4>
<p class="lead text-white">"Test 2"</p>
</div>
</div>
</div>
</div>
</div>
<!-- end card-body -->
{% for message in messages %}
<p id="messages">{{message}}</p>
{% endfor %}
</div>
<!-- end card -->
<p class="text-muted text-center mt-3 mb-0">Don't have an account? register</p>
<!-- end row -->
</div>
<!-- end col -->
</div>
<!-- Row -->
</div>
</body>
</html>
Any ideas on how to fix this?
I could be wrong here but I would try out this solution.
Try changing
background-image: url('login.jpg')
to:
background-image: url('../indentification/login.jpg')
I'm not sure that you eliminated the path problem exactly.
Finally, I have created content folder and: background-image: url('../../static/app/content/login.jpg');
I have the folowing code that renders different from what I was expecting when you add the form tag.
Try removing the form tags to see the difference.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<title>Hello, world!</title>
<style>
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
.fondo {
background-image: url('https://source.unsplash.com/uR6dIgDnt38/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sombra{text-shadow: 1px 1px 2px rgb(0, 0, 0);}
</style>
</head>
<body>
<div class="container-fluid min-100 d-flex flex-column">
<div class="row flex-grow-1 vh-100 bg-info">
<main class="col p-4 flex-grow-1 fondo">
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center col-md-12">
<h1 class="text-white mb-4 sombra">Title</h1>
<form action="">
<div class="form-group col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</form>
<p class="text-white lead sombra">A paragraph!</p>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
With form tag
Without form tag
I want it to look like the second picture, but dont know why the form tag changes the alignment.
Your form tag should has a col-sm-12 class
<form action="" class="col-sm-12">
...
</form>
Change your form code with following code :
<form action="" class="col-sm-12">
<div class="row">
<div class="form-group col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</div>
</form>
Align it and you should use col class only inside row class.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<title>Hello, world!</title>
<style>
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
.fondo {
background-image: url('https://source.unsplash.com/uR6dIgDnt38/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sombra{text-shadow: 1px 1px 2px rgb(0, 0, 0);}
</style>
</head>
<body>
<div class="container-fluid min-100 d-flex flex-column">
<div class="row flex-grow-1 vh-100 bg-info">
<main class="col p-4 flex-grow-1 fondo">
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center col-md-12">
<h1 class="text-white mb-4 sombra">Title</h1>
<form action="" class="w-100">
<div class="form-group col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control border-0" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</form>
<p class="text-white lead sombra">A paragraph!</p>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
Try this structure. It will easy for you.
.fondo {
background-image: url('https://source.unsplash.com/uR6dIgDnt38/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh
}
.sombra{text-shadow: 1px 1px 2px rgb(0, 0, 0);}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body>
<div class="fondo d-flex justify-content-center align-items-center flex-column">
<h1 class="text-white mb-4 sombra">Title</h1>
<form action="">
<div class="form-group">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</form>
<p class="text-white lead sombra">A paragraph!</p>
</div>
</body>
</html>
Hi i know this is an amateur question, but i have some trouble.
This is my CSS`:
body{
background-image: url(street-photography1.jpg);
background-size: cover;
color: white;
background-repeat: no-repeat;
background-position:center;
background-attachment: fixed;
}
form{
background-color: rgba(19, 18, 18, 0.66);
color: white;
padding: 40px;
margin-top: 200px;
padding-bottom: 60px;
}
.form-control{
background-color: rgba(14, 14, 14, 0.35);
border-radius: 0px;
color: white;
}
.logo1{
padding: 40px;
margin-top: 200px;
}
h1{
text-align: center;
}
.btn{
width: 100%;
margin-top: 20px;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- 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">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<div class="container">
<div class="column">
<div class=" col-sm-5">
<img class="logo1" src="images/capture.png" alt=" logo">
</div>
</div>
<div class="row">
<div class="col-sm-offset-6 col-sm-7">
<form>
<h1>Hello, world!</h1>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember Password
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<footer class="container">
<div class="row">
<p class="col-sm-5">
Copyright © 2016 , Singapore. All rights reserved.</p>
</div>
</footer>
</body>
</html>
So currently my webpage looks like this.
How can i shift my message logo so that the logo and my validation form are in the same line with each other?
You can next the two col divs inside of a row. i.e.
<div class="row">
<div class="col-sm-12>
<div class="row">
<div class="col-sm-6>...Logo...
<div class="col-sm-6>...Form...
</div>
</div>
</div>
</div>
Try adding col-sm-offset-6 to the logo container if you want to align them vertically.
<div class="col-sm-offset-6 col-sm-5">
<img class="logo1" src="images/capture.png" alt=" logo">
</div>
Or, if you want them aligned horizontally, the answer posted by #DPalmquist should do it.
I can't see where is the extra pading or the things that add the ugly mini scroll horizontal, there is my code:
I have been checking my code and I can't find it :(
Someone can help?
I'm cooding in just html and css, I know that
body{
background: black;
}
section.home{
margin-top: 0;
background: url(../img/bg-01.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pull-left{
}
.ingresar-bg{
background-color: gray;
}
.ingresar{
margin: 50px 60px;
border: solid 1px white;
color: white;
background-color: rgba(0,0,0,0);
padding: 10px;
display: inline-block;
}
.ingresar:hover, .ingresar:active, .ingresar:visited{
background-color: gray;
color: white;
border: solid 1px white;
}
input.form-control{
margin-bottom: 15px;
}
.logo-modal{
margin-left: auto;
margin-right: auto;
}
.img-svg-logo{
margin: 35px 50px;
color: rgb(255, 255, 255);
width: 200px;
position: fixed;
}
#media (max-width:640px) {
.img-svg-logo{
width: 150px;
}
.ingresar{
font-size: 15px;
}
}
.cover-text {
text-align: center;
color: white;
vertical-align: middle;
font-size: 24px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 110px;
}
.input-lg{
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
margin-bottom: 100px;
}
input[placeholder].position{
text-align: center;
background-position: left center;
padding-left: 5px;
background-image: url(../img/ubicacion1.svg);
background-repeat: no-repeat;
}
.servicio-button{
background: #2260ad;
font-size: 25px;
border: solid 1px #2260ad;
border-radius: 0px;
width: 300px;
margin-bottom: 100px;
margin-top: 100px;
}
.servicio-button:hover{
background-color: #194984;
border: solid 1px #194984;
}
.modal-content {
position: relative;
background-color: gray;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
section.function{
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.iconos{
color: rgb(34, 96, 172);
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Garage tu taller a domicilio</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/normalize.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="home">
<div="container">
<div class="nav">
<div class="row">
<div class="col-lg-6 pull-left">
<a href="index.html">
<img src="assets/img/Logo_blanco.svg" class="img-svg-logo img-responsive" alt="Logo garage" />
</a>
</div>
<div class="pull-right">
<button class="btn btn-default ingresar" data-toggle="modal" data-target="#ingresar">INGRESAR</button>
</div>
</div>
<!-- Modal -->
<form class="modal fade" id="ingresar">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<img src="assets/img/logo-grande-color.svg" class="center-block" />
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Usuario" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Contraseña" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-warning" data-dismiss="modal">Registrate</button>
<button type="button" class="btn btn-info pull-left" data-dismiss="modal">Ingresar</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="cover-text row">
<div class="col-sm-12">
<p class="lead">
Ofrecemos servicios de mantenimiento básico y estética automotriz a donde estés
</p>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<form>
<input type="text" class="form-control input-lg position" placeholder="¿Dónde te encuentras?" class="button-add">
</form>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<a class="btn btn-info servicio-button center-block" href="#">Agendar un servicio</a>
</div>
</div>
<!--
</section>
<section class="function">
<div class="cover-text" id="function">
<h1>¿Cómo funciona?</h1>
<p class="lead">We're that "cool" vegan uncle who doesn't have kids and somehow makes a living repairing antique polaroid cameras, while drinking a $38 bottle of artisanal cold-brew.</p>
</div>
<div class="row iconos block-center" id="iconos">
<div class="col-md-4">
<img src="assets/img/ubicacion-img.png" class="img-responsive color" />
</div>
<div class="col-md-4">
<img src="assets/img/servicios-img.png" class="img-responsive color" />
</div>
<div class="col-md-4">
<img src="assets/img/agenda-img.png" class="img-responsive color" />
</div>
</div>
</section>
-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Try this code. Edited and alligned some code.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
<!-- Latest compiled and minified CSS -->
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/normalize.css" rel="stylesheet">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Garage tu taller a domicilio</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="home">
<div "container">
<div class="nav">
<div class="row">
<div class="col-lg-6 pull-left"> <img src="assets/img/Logo_blanco.svg" class="img-svg-logo img-responsive" alt="Logo garage" /> </div>
<div class="pull-right">
<button class="btn btn-default ingresar" data-toggle="modal" data-target="#ingresar">INGRESAR</button>
</div>
</div>
</div>
<div class="cover-text row">
<div class="col-sm-12">
<p class="lead"> Ofrecemos servicios de mantenimiento básico y estética automotriz a donde estés </p>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<form>
<input type="text" class="form-control input-lg position button-add" placeholder="¿Dónde te encuentras?">
</form>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2"> <a class="btn btn-info servicio-button center-block" href="#">Agendar un servicio</a> </div>
</div>
</div>
</section>
<!-- Modal -->
<form class="modal fade" id="ingresar">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<img src="assets/img/logo-grande-color.svg" class="center-block" /> </div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Usuario" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Contraseña" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-warning" data-dismiss="modal">Registrate</button>
<button type="button" class="btn btn-info pull-left" data-dismiss="modal">Ingresar</button>
</div>
</div>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Additional CSS
.row {
margin-right: auto;
margin-left: auto;
}
Actually it is the problem with bootstrap row class.
Check this code . It works
Working example http://www.bootply.com/coISbk1PgQ
I experienced the same issue but I soon figured that I was applying bootstrap classes in the wrong order.
.container = always leaves a wide padding on both sides of the page.
.container-fluid = leaves a small padding.
.row = comes with a negative margin that is equal to the small padding that .container-fluid adds.
So putting this together
<div class="container-fluid">
<div class="row">This container will stretch from one side of the page to the order</div>
<div style="width: 100%">This container will appear to have spaces between both of its sides and the walls of the page.</div>
</div>