Positioning of a button

Asked

Viewed 118 times

1

I’m having a hard time positioning a responsive button, whenever I can place the correct position on a screen with a certain resolution whenever I see it on the other screen it gets bad again.

This is my layout:

inserir a descrição da imagem aqui

The button I mentioned is the one that has the icon "+".

My code so far:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <div class=" col-sm-12 col-md-6 col-lg-4 mrg">
        <div class="row padInternalRow">
            <div class="col-4 border rounded p-0">
                <img class="float-left imagem" height="100%" width="100%" src="imagens\user.png" alt="Card image cap">
            </div>
            <div class="col-7 border pr-auto rounded">
                <div class="row h-50 flex-column pl-1">
                    <h5 class="text-left mb-0">Nome:</h5>
                       <p class="text-left">Nome exemplo</p>
                </div>
                <div class="row px-0 h-50 mt-1">
                    <div class="col-10 pl-1 mx-0">
                        <h5 class="text-left mb-0">Função:</h5>
                        <p class="text-left">Função exemplo</p>
                     </div>
                     <div class="col-1 ml-auto mt-auto">
                         <button type="button" class="btn btn-light p-0 btn-circle" data-toggle="modal" data-target="#viewCandModal">
                             <i class="fas fa-plus"></i>
                         </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

html css twitter-bootstrap
  • 1

    His question was not clear... Does he have to stay aligned always in the same position? If yes what would be the position? Where do you want him to stay? I could not understand what is the problem of alignment between one screen and another.

  • I apologize for not making the question clear Hugo, the goal is that the button was located in the lower right corner but not leaned with the Borders, thanks anyway :)

1 answer

2


Simple as that ^^

.btn_over{
  position:absolute;
  bottom:-10px;
  right:-10px
}
.btn_over2{
  position:absolute;
  top:100%;
  left:100%;
  transform: translate(-100%, -100%);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <div class=" col-sm-12 col-md-6 col-lg-4 mrg">
        <div class="row padInternalRow">
            <div class="col-4 border rounded p-0">
                <img class="float-left imagem" height="100%" width="100%" src="https://via.placeholder.com/150" alt="Card image cap">
            </div>
            <div class="col-7 border pr-auto rounded">
                <div class="row h-50 flex-column pl-1">
                    <h5 class="text-left mb-0">Nome:</h5>
                       <p class="text-left">Nome exemplo</p>
                </div>
                <div class="row px-0 h-50 mt-1">
                    <div class="col-10 pl-1 mx-0">
                        <h5 class="text-left mb-0">Função:</h5>
                        <p class="text-left">Função exemplo</p>
                     </div>
                     <div class="col-1 ml-auto mt-auto">
                         <button type="button" class="btn btn-light p-0 btn-circle btn_over" data-toggle="modal" data-target="#viewCandModal">
                             <i class="fas fa-plus"></i>
                         </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class=" col-sm-12 col-md-6 col-lg-4 mrg">
        <div class="row padInternalRow">
            <div class="col-4 border rounded p-0">
                <img class="float-left imagem" height="100%" width="100%" src="https://via.placeholder.com/150" alt="Card image cap">
            </div>
            <div class="col-7 border pr-auto rounded">
                <div class="row h-50 flex-column pl-1">
                    <h5 class="text-left mb-0">Nome:</h5>
                       <p class="text-left">Nome exemplo</p>
                </div>
                <div class="row px-0 h-50 mt-1">
                    <div class="col-10 pl-1 mx-0">
                        <h5 class="text-left mb-0">Função:</h5>
                        <p class="text-left">Função exemplo</p>
                     </div>
                     <div class="col-1 ml-auto mt-auto">
                         <button type="button" class="btn btn-light p-0 btn-circle btn_over2" data-toggle="modal" data-target="#viewCandModal">
                             <i class="fas fa-plus"></i>
                         </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

  • Thank you, your shape worked but can not have negative values in css code in the parameters "bottom" and "right", thanks anyway :)

  • I’ll make rum update with another option

Browser other questions tagged html css twitter-bootstrap

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