Bootstrap button at the same height and position in mobile versions

Question

I have a system developed in Bootstrap of which I am using the following code to create a card based on work of Bootsnipp’s colleague:

<div class="card-base">
  <div class="card-icon"><a href="#" title="Widgets" id="widgetCardIcon"><img src="fotos-usuarios/silhuetaHomem.jpg" class="imagecard"></a>
    <div class="card-data widgetCardData">
      <h2 class="box-title" style="color: #000;">FERNANDO PESSOA</h2>
      <p class="card-block text-center">USUÁRIO<br>Acesso Padrão<br>Último acesso: 22/10/2017 às 11h11</p>
      <a href="#" title="Alterar Senha" class="btn btn-primary col-sm-6 col-xs-12" style="background: #465768; border:#465768;"> <i class="fa fa-lock" aria-hidden="true"></i>  Alterar Senha </a></div>
  </div>
  <div class="space"></div>
</div>

CSS

.card-base>.card-icon {
  text-align: center;
  position: relative;
}

.imagecard {
  z-index: 2;
  display: block;
  positioN: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 5px solid white;
  box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  margin: 0 auto;
  color: white;
}

.card-base>.card-icon>.card-data {
  margin-top: -24px;
  background: ghostwhite;
  border: 1px solid #e0e0e0;
  padding: 15px 0 10px 0;
  box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

#widgetCardIcon {
  background: #465768 !important;
  font-size: 28px;
  line-height: 78px;
}

So far so good, the result is this:

But when I try to change the attribute below:

class="btn btn-primary col-sm-6 col-xs-12"

See what happens:

DESKTOP VERSION

MOBILE (360x640)

My question is: How can I do so that in any display, the buttons keep the same height and position?

Answer 1

In this case the problem is that you have included the classes in the button col-sm-6 col-xs-12, and they are used to define bootstrap grid system columns.

There is no standard bootstrap class to make buttons assume 100% width at small resolution, but you can do this with a simple CSS:

@media (max-width: 768px) {
    .btn, .btn-group {
        width:100%;
    }
}

Follow your example with this adaptation:

.card-base>.card-icon {
  text-align: center;
  position: relative;
}

.imagecard {
  z-index: 2;
  display: block;
  positioN: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 5px solid white;
  box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  margin: 0 auto;
  color: white;
}

.card-base>.card-icon>.card-data {
  margin-top: -24px;
  background: ghostwhite;
  border: 1px solid #e0e0e0;
  padding: 15px 0 10px 0;
  box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

#widgetCardIcon {
  background: #465768 !important;
  font-size: 28px;
  line-height: 78px;
}

@media (max-width: 768px) {
    .btn, .btn-group {
        width:100%;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-base">
  <div class="card-icon"><a href="#" title="Widgets" id="widgetCardIcon"><img src="fotos-usuarios/silhuetaHomem.jpg" class="imagecard"></a>
    <div class="card-data widgetCardData">
      <h2 class="box-title" style="color: #000;">FERNANDO PESSOA</h2>
      <p class="card-block text-center">USUÁRIO<br>Acesso Padrão<br>Último acesso: 22/10/2017 às 11h11</p>
      <a href="#" title="Alterar Senha" class="btn btn-primary" style="background: #465768; border:#465768;"> <i class="fa fa-lock" aria-hidden="true"></i>  Alterar Senha </a></div>
  </div>
  <div class="space"></div>
</div>

More about bootstrap grid system: https://getbootstrap.com/docs/3.3/css/#grid