How to add logo to a boostrap login box?

Asked

Viewed 93 times

-2

Good evening! How do I add a logo to a login box? I’m trying to add to my site, but I’m not getting it.

Page in question: http://tratspay.com/app/login.html

enter the code here

<div class="login-box">
  <div class="login-box-body">

<img src="app/dist/img/logo-trats-mini.png" class="img-responsive" alt="">

    <h3 class="login-box-msg">Faça o seu Login</h3><br>

    <form action="index.html" method="post">
      <div class="form-group has-feedback">
        <input type="email" class="form-control sty1" placeholder="Email">
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control sty1" placeholder="Senha">
      </div>
      <div>
        <div class="col-xs-8">
          <div class="checkbox icheck">
            <label>
              <input type="checkbox">
              Salvar Senha </label>
            <a href="recuperar-senha.html" class="pull-right"><i class="fa fa-lock"></i> Esqueceu a senha?</a> </div>
        </div>
        <!-- /.col -->
        <div class="col-xs-4 m-t-1">
          <button type="submit" class="btn btn-primary btn-block btn-flat">Acessar Conta</button>
        </div>
        <!-- /.col --> 
      </div>
    </form>
    <div class="social-auth-links text-center">

      </div>
    <!-- /.social-auth-links -->

    <div class="m-t-2">Ainda não possui uma conta? <a href="criar-conta.html" class="text-center"><strong> Cadastre-se</strong></a></div>
  </div>
  <!-- /.login-box-body --> 
</div>
css html5 twitter-bootstrap

  • What version of Bootstrap are you using?? I noticed that your code already has an IMG tag which should make the image appear. Have you checked if there is an error on the page accusing if the image was not found or something like that? If possible explain the problem better, your question is not very clear...

1 answer

-1

Basically just insert the IMG tag where you want and format accordingly. In this example is the image just below the text Faça o seu Login

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="login-box">
  <div class="login-box-body">
    <div class="text-center">
      <h3 class="login-box-msg">Faça o seu Login</h3><br>
      <img src="http://tratspay.com/app/dist/img/logo-trats-mini.png" class="img-responsive" alt="" />
    </div>
    <br /><br />
    <form action="index.html" method="post">
      <div class="form-group has-feedback">
        <input type="email" class="form-control sty1" placeholder="Email">
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control sty1" placeholder="Senha">
      </div>
      <div>
        <div class="col-xs-8">
          <div class="checkbox icheck">
            <label>
              <input type="checkbox">
              Salvar Senha </label>
            <a href="recuperar-senha.html" class="pull-right"><i class="fa fa-lock"></i> Esqueceu a senha?</a> </div>
        </div>
        <!-- /.col -->
        <div class="col-xs-4 m-t-1">
          <button type="submit" class="btn btn-primary btn-block btn-flat">Acessar Conta</button>
        </div>
        <!-- /.col --> 
      </div>
    </form>
    <div class="social-auth-links text-center">
     
      </div>
    <!-- /.social-auth-links -->
    
    <div class="m-t-2">Ainda não possui uma conta? <a href="criar-conta.html" class="text-center"><strong> Cadastre-se</strong></a></div>
  </div>
  <!-- /.login-box-body --> 
</div>

Browser other questions tagged css html5 twitter-bootstrap

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