How to move elements in HTML

Asked

Viewed 359 times

0

I’m developing an application and I don’t have much knowledge about HTML. I took a template straight from the bootstrap site and am making some changes to look the way I want, but I’m having the following problem:

inserir a descrição da imagem aqui

I would like to know how to move and align the fields in which they are hidden, I have a base template and another for each "page", according to the codes below:

Template 'new project':

{% extends 'base.html' %}

{% block title %}

    Novo Projeto - {{ block.super }}   

{% endblock title %}

{% block body %}

    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Novo Projeto</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
    </main>

    <form action="." method="POST">            
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Simular</button>
    </form>

{% endblock body %}

Template 'base':


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
        <title>{% block title %} Projeto 2 {% endblock title %}</title>
        <style>
            .bd-placeholder-img {
              font-size: 1.125rem;
              text-anchor: middle;
              -webkit-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
            }
      
            @media (min-width: 768px) {
              .bd-placeholder-img-lg {
                font-size: 3.5rem;
              }
            }
          </style>
          <!-- Custom styles for this template -->
          <link href="{% static 'css/menu.css' %}" rel="stylesheet">
    </head>
    <body>
        <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
            <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Teste</a>
                <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
                <ul class="navbar-nav px-3">
                <li class="nav-item text-nowrap">
                    <a class="nav-link" href="#">Sair</a>
                </li>
                </ul>
            </nav>
        <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
            <div class="sidebar-sticky pt-3">
            <ul class="nav flex-column">
                <li class="nav-item">
                <a class="nav-link active" href="#">
                    <span data-feather="home"></span>
                    Novo Projeto <span class="sr-only">(current)</span>
                </a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="file"></span>
                    Meus Projetos
                </a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="shopping-cart"></span>
                    Perfil
                </a>
            </ul>
    
            <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                <span>Sobre a aplicação</span>
                <a class="d-flex align-items-center text-muted" href="#" aria-label="Add a new report">
                <span data-feather="plus-circle"></span>
                </a>
            </h6>
            <ul class="nav flex-column mb-2">
                <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="file-text"></span>
                    Informações
                </a>
                </li>
            </ul>
            </div>
        </nav>
        

        {% block body %}
            


        {% endblock body %}
        

        <script src="{% static 'js/bootstrap.min.js' %}"></script>
        <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
    </body>
</html>

If necessary follow the official link of the template in bootstrap: https://getbootstrap.com/docs/4.5/examples/dashboard/

javascript html jquery css html5

3 answers

1

Use CSS to position elements on your screen:

item {
  clear: both;
}

If it’s not:

item: {
  position: relative;
  left: 35%;
}

  • Thanks, but this way did not work. I managed otherwise, I will post as reply!!

0


I put a div container involving the form html and modified it leaving the way I wanted to move css.

The css was as follows:

#containerForm{
  float: right;     
  width: 1050px;  
}

I’m including a print for more details: inserir a descrição da imagem aqui

-2

<div class='container'>
  <div class='row'>
     <div class='col-12'>
       <!-- sua informação -->
     </div>
  </div>
</div>

  • Consider adding a brief explanation of your solution.

Browser other questions tagged javascript html jquery css html5

You are not signed in. Login or sign up in order to post.