Adding buttons in the upper right corner of div

Navigation
0

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

HowcanIaccomplishthis?regardlessofwhat'sinsidethediv?forexample

<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>
    
asked by anonymous 01.02.2018 / 20:58

2 answers

2

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

Here's an 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

    
02.02.2018 / 13:27
0
<div class="wrapper">
    <img src="https://image.freepik.com/free-icon/male-user-shadow_318-34042.jpg"><divclass="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>
    
02.02.2018 / 10:49
Error in order finishing on Woocommerce Where are the project files developed in Android Studio on Linux?