Make bootstrap well to the same size

Question

I am using boostwatch: https://bootswatch.com/3/cyborg/bootstrap.min.css

I am also using fontawesome, jquery

#ser img {
  width: 100%;
}

.centerFontAwesome {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@media(min-width:960px) {
  #ser .col-md-3 .well {
    height: 330px;
  }
  #ser .col-md-3 img {
    height: 240px;
  }
}

.well {
  background: pink;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container">
  <div id="ser" class="row">

    <div class="col-md-3">
      <div class="well text-center centerFontAwesome">
        <a href="#">
          <i class="fas fa-plus-circle fa-10x modalButton"></i>
        </a>
      </div>
    </div>

    <div class="col-md-3">
      <div class="well text-center">
        <a class="btn btn-primary" href="#"><img src="https://image.tmdb.org/t/p/w500/u3bZgnGQ9T01sWNhyveQz0wH0Hl.jpg"></a>
        <h5>Game of thrones</h5>
      </div>
    </div>

  </div>
</div>

I would like to set each well width and height to the same at all time.

With full screen each well have the same size, but below a certain size the well which is contain the fontawesome icon does not have the appropiate size.

How could I do that?

Bootstrap well same height is not working.

I have tried:

#series .col-md-3 .well {
  width: 100%;
  height: 100%;
}

but it is not working.

not okey pic

okey pic

Don't add big images. We can't debug those. Fix your demo. Font Awesome can be added via CDN. — isherwood, Mar 29 '22 at 18:46
@isherwood I have updated my code, if you run it you can see the my issue, if the size is bigger than 960px it is behave well — palloc, Mar 29 '22 at 18:59

isherwood · Answer 1 · 2022-03-29T19:10:32.640

Simply adding Bootstrap's h-100 sizing class seems to do what you want. Note that much of what you had in your custom CSS is available via Bootstrap. You should really skim the entire documentation to become familiar so you aren't duplicating effort.

.well {
  background: pink;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container">
  <div id="ser" class="row">

    <div class="col-md-3">
      <div class="well text-center h-100">
        <a href="#">
          <i class="fas fa-plus-circle fa-10x modalButton"></i>
        </a>
      </div>
    </div>

    <div class="col-md-3">
      <div class="well text-center h-100">
        <a class="btn btn-primary" href="#"><img src="https://i.stack.imgur.com/xApmt.jpg" class="img-fluid"></a>
        <h5>Game of thrones</h5>
      </div>
    </div>

  </div>
</div>

Thanks. I installed that image, along with Bootstrap's `img-fluid` class to control its size. Everything still seems fine. — isherwood, Mar 29 '22 at 19:11

Make bootstrap well to the same size

1 Answers1