Bootstrap button at the same height and position in mobile versions

Question

Bootstrap button at the same height and position in mobile versions

Navigation

#1 by (1 votes)

0

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

<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:

ButwhenItrytochangetheattributebelow:

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

See what happens:

DESKTOP VERSION

MOBILE(360x640)

My question is: How can I make sure that in any view the buttons maintain the same height and position?

css twitter-bootstrap

asked by anonymous 31.08.2017 / 15:41

1 answer

problem with a function run when clicked enter Adding values from a php string

score 1 · Accepted Answer

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

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

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

Here is 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 the bootstrap grid system: link