CODEWITHSUNDEEP
htmlcssflexboxbootstrap-4
Martin Stievenart
Martin Stievenart

Reputation: 295

Bootstrap 4 columns center vertically and keeping same height

I'm having an issue with bootstrap 4 columns height and vertical alignment. Here's a JSFiddle with the problem.

i need to design a layout with items, in desktop they're all on the same row, on mobile we get two rows. All of that is encountered with borders.

The problem is that i can't manage to keep the columns's height when i want to vertically center their content. Without classes added the columns have the same heights but the content is centered to the top. After searches i found the align-items-center that center my columns but the height doesnt remain. Which breaks my border layout.

I tried also to add the my-auto, align-self-center classes but with no success.

.why-choose-warranty {
  width: 100%;
  height: 100%;
  background-color: #f5f3ef;
  color: #11155e;
  padding: 1rem;
}

.why-choose-warranty .row {
  padding: 1rem;
}

.why-choose-warranty .row div {
  justify-content: center;
}


/* Small screens (mobiles) */

@media screen and (max-width: 992px) {
  .why-choose-warranty .row {
    background-color: white;
    border-radius: .5rem;
  }
  .why-choose-warranty img {
    max-width: 40%;
    max-height: 40%;
  }
  .why-choose-warranty .row div:nth-child(1),
  .why-choose-warranty .row div:nth-child(2) {
    border-right: 1px solid #d7d5d1;
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(3) {
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(4),
  .why-choose-warranty .row div:nth-child(5) {
    border-right: 1px solid #d7d5d1;
  }
}


/* Big screens (desktops) */

@media screen and (min-width: 992px) {
  .why-choose-warranty img {
    max-width: 60%;
    max-height: 60%;
  }
  .why-choose-warranty .row div {
    border-right: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:last-child {
    border-right: 0;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div class="why-choose-warranty">
  <div class="row col-12 col-lg-10 m-auto align-items-center">
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">Test</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">Test<br /><br />Test TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST <br /><br /><br /><br /><br />TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
  </div>
</div>

Does anyone figured out this problem ? Or can help me figure it out ?

Thanks in advance guys

Upvotes: 2

Views: 4480

Answers (2)

Asons
Asons

Reputation: 87191

You add d-flex and remove align-items-center on

  • <div class="row col-12 col-lg-10 m-auto d-flex">

and add d-flex align-items-center to your

  • <div class="col-4 col-lg-2 d-flex align-items-center">

Updated fiddle

.why-choose-warranty{
  width: 100%;
  height: 100%;
  background-color: #f5f3ef;
  color: #11155e;
  padding: 1rem;
}
.why-choose-warranty .row{
  padding: 1rem;
}
.why-choose-warranty .row div{
  justify-content: center;
}

/* Small screens (mobiles) */
@media screen and (max-width: 992px){
  .why-choose-warranty .row{
    background-color: white;
    border-radius: .5rem;
  }
  .why-choose-warranty img{
    max-width: 40%;
    max-height: 40%;
  }
  .why-choose-warranty .row div:nth-child(1), .why-choose-warranty .row div:nth-child(2){
    border-right: 1px solid #d7d5d1;
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(3){
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(4), .why-choose-warranty .row div:nth-child(5){
    border-right: 1px solid #d7d5d1;
  }
}

/* Big screens (desktops) */
@media screen and (min-width: 992px){
  .why-choose-warranty img{
    max-width: 60%;
    max-height: 60%;
  }
  .why-choose-warranty .row div{
    border-right: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:last-child{
    border-right: 0;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="why-choose-warranty">
  <div class="row col-12 col-lg-10 m-auto d-flex">
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">Test</p>
    </div>
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">Test
        <br />
        <br />Test TEST</p>
    </div>
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">TEST TEST</p>
    </div>
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">TEST
        <br />
        <br />
        <br />
        <br />
        <br />TEST</p>
    </div>
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
  </div>
</div>

Upvotes: 3

kukkuz
kukkuz

Reputation: 42352

You can do this:

  1. Remove align-items-center class from your row element

  2. Add align-items-center and d-flex classes to each of your .why-choose-warranty .row div or add this to the style:

    display: flex;
align-items: center;

See demo below:

.why-choose-warranty {
  width: 100%;
  height: 100%;
  background-color: #f5f3ef;
  color: #11155e;
  padding: 1rem;
}

.why-choose-warranty .row {
  padding: 1rem;
}

.why-choose-warranty .row div {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Small screens (mobiles) */

@media screen and (max-width: 992px) {
  .why-choose-warranty .row {
    background-color: white;
    border-radius: .5rem;
  }
  .why-choose-warranty img {
    max-width: 40%;
    max-height: 40%;
  }
  .why-choose-warranty .row div:nth-child(1),
  .why-choose-warranty .row div:nth-child(2) {
    border-right: 1px solid #d7d5d1;
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(3) {
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(4),
  .why-choose-warranty .row div:nth-child(5) {
    border-right: 1px solid #d7d5d1;
  }
}


/* Big screens (desktops) */

@media screen and (min-width: 992px) {
  .why-choose-warranty img {
    max-width: 60%;
    max-height: 60%;
  }
  .why-choose-warranty .row div {
    border-right: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:last-child {
    border-right: 0;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div class="why-choose-warranty">
  <div class="row col-12 col-lg-10 m-auto">
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">Test</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">Test<br /><br />Test TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST <br /><br /><br /><br /><br />TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions