How to get down a form?

Navigation
1

I have this form: 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>Jornal Web</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="apple-touch-icon" sizes="180x180" href="galery/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="galery/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="galery/favicon-16x16.png">
    <link rel="manifest" href="galery/manifest.json">
    <link rel="mask-icon" href="galery/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="theme-color" content="#ffffff">

    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/carousel.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <style type="text/css">

    </style>
</head>
<body>
<div class="container">
    <form class="form-horizontal" method="post" action="/login">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <h2>Entrar no Jornal Web</h2>
                <hr>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="form-group has-danger">
                    <label>Digite seu e-mail</label>
                    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                        <input type="text" name="email" class="form-control" id="email"
                               placeholder="[email protected]" required autofocus>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Digite sua senha</label>
                    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                        <input type="password" name="password" class="form-control" id="password"
                               placeholder="********" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6" style="padding-top: .35rem">
                <div class="form-check mb-2 mr-sm-2 mb-sm-0">
                    <label class="form-check-label">
                        <input class="form-check-input" name="remember"
                               type="checkbox">
                        <span style="padding-bottom: .15rem">Lembrar-me</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="row" style="padding-top: 1rem">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <button type="submit" class="btn btn-success"><i class="fa fa-sign-in"></i> Login</button>
            </div>
        </div>
    </form>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $('.form-control').on('focus blur', function (e) {
            $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
        }).trigger('blur');
    });
</script>
</body>
</html>

Which I'm developing for a login page. However in the desktop version, the form as well as the whole page is very much on top, and I would like to go down a bit the position of it.

I used some <br> but it seems wrong to use it that way. How to change through CSS?

    
asked by anonymous 24.10.2017 / 21:40

4 answers

3

To position elements use CSS. <br> should be used in text line wrap , just as the name itself suggests. Use for example style="padding-top: 150px;" in your <body> , to position the way you want, or through the <style> tag: 

body{
    padding-top: 150px;
}

You can also use percentage measures, for example: 

body{
    padding-top: 15%;
}

Which brings greater responsiveness to your page and adaptation to different devices, and which I recommend using.

You can also use the margin instead of padding depending on the situation: 

body{
    margin-top: 15%;
}

Values are all assumptions, adapt whatever is needed.

If you do not know the difference between margin and padding , I recommend reading of that answer .

Related

24.10.2017 / 21:45
1

Following the logic of the little friend up there , if you do not stay in the place that is supposed to be, you can use: 

<style>
    form
    {
        margin-top:50px;
        display:table;
    }
</style>
    
24.10.2017 / 21:47
0

Try using: 

<head>
    ...
    <style>
        form {
            margin-top: 50px;
        }
    </style>
</head>
    
24.10.2017 / 21:43
0

If it is your preference, you could also use the "position" property, with the value "relative" and redefining the position of the form from the top property. 

form{
 position: relative;
 top: 10%;
}

However, the most recommendable way would be through '
' or even the 'margin-top'.

    
24.10.2017 / 23:19
What's wrong with my class's function to decrease the value? How to concatenate an object with a variable to be dynamic?