Adding Buttons in the upper right corner of the div

Asked

Viewed 1,885 times

0

I am using bootstrap, HTML and CSS in a responsive layout and wanted to add two Buttons in the upper right corner of the DIV

inserir a descrição da imagem aqui

How can I do that? Regardless of what’s inside the div? for example

<div> 
   <img>
</div>

or

<div>
  <p>
</div>

div {
  background: gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-12">

  <div class="col-md-3 FaseImg">
    <img id="thumbnail" src="https://thumbs.dreamstime.com/b/do-retrato-masculino-do-avatar-do-%C3%ADcone-do-perfil-pessoa-ocasional-46846328.jpg" class="img-circle img-responsive center-block" alt="Imagem" width="150" />
  </div>

</div>

  • 1

    Search for the Bootrap Navbar and use the "pull-right"

2 answers

2


If you are using bootstrap you can use the class pull-right as Mr @hugocsl mentioned.

Following example:

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

<div class="col-md-12">

<div class="pull-right">
    <button class="btn btn-default" type="submit">
        <i class="icon-user glyphicon glyphicon-remove"></i>
    </button>
    <button class="btn btn-default" type="submit">
        <i class="icon-user glyphicon glyphicon-th"></i>
    </button>

</div>
  
  
  <div class="col-md-3 FaseImg">
    <img id="thumbnail" src="https://thumbs.dreamstime.com/b/do-retrato-masculino-do-avatar-do-%C3%ADcone-do-perfil-pessoa-ocasional-46846328.jpg" class="img-circle img-responsive center-block" alt="Imagem" width="150" />
  </div>
  
</div>

See Bootstrap floating class documentation

0

<div class="wrapper">
    <img src="https://image.freepik.com/free-icon/male-user-shadow_318-34042.jpg">
    <div class="buttons">
        <a href="" class="btn btn-sm btn-primary">X</a>
        <a href="" class="btn btn-sm btn-default">Menu</a>
    </div>
</div>
<style>
    .wrapper {
        position: absolute;
        width: 100%;
    }
    img {
        display: block;
        width: 50%;
        margin: 10px auto;
    }
    .buttons {
        position: absolute;
        top: 0;
        right: 0;
    }
</style>

Browser other questions tagged

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