Vertically Centre Div inside another div bootstrap-4

Question

Hi All,

Hi I am trying to achieve the following in bootstrap 4. I have a slim banner image over which I need to vertically align three buttons. They should be responsive as well. Please see the image below. The logo in this picture is part of the slim banner itself. Padding from both ends is 106 px. I am very confused, how to achieve it? It has a different display on mobile the buttons will be stacked on top of another.

I have chucked out my code from the main file

<!doctype html>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<title>Hello, world!</title>

.btn-midweek-Must {

width: 184px;
height: 48px;
color: #41173F;
font-family: "Proxima Nova";
font-size: 14px;
font-weight: 600;
line-height: 20px;
text-align: center;
text-decoration: none !important;
background-color: #FFFFFF;
margin: 0 15px;

}

.buttonList{ position: absolute; top: 0px; right: 0px; padding: 51px 30px; }

/* Media Query for 768px */

@media(max-width:768px){ .buttonList { position: absolute; top: 0px; right: 0px; padding: 24px 30px; } .btn-midweek-Must { width: 120px; height: 40px; color: #41173F; font-family: "Proxima Nova"; font-size: 14px; font-weight: 600; line-height: 20px; text-align: center; text-decoration: none !important; background-color: #FFFFFF; margin: 0 10px; }

}

</style>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <div class="container">
      <div class="row mt-5">
      <div class="col col-12">




        <picture>
            <source media="(max-width:767px)" srcset="/Users/bzest/Beenish 2020/Web Development Bootstrap/midweek musts/[email protected]"/>
          <img src="/Users/bzest/Beenish 2020/Web Development Bootstrap/midweek musts/slim-midweek.png" srcset="/Users/bzest/Beenish 2020/Web Development Bootstrap/midweek musts/slim-midweek@2x 2x" />
         </picture>

          <div class="buttonList ">
      <button class="btn-primary btn-midweek-Must cta body-font">
          <a href="$url('Search-Show','cgid','mid-week-250')$" >
          Under $250 › </a></button>
      <button class="btn-primary btn-midweek-Must cta body-font">

          <a href="$url('Search-Show','cgid','mid-week-500')$" >Under $500 ›</a></button>
      <button class="btn-primary btn-midweek-Must cta body-font">

          <a href="$url('Search-Show','cgid','mid-week-1000')$" >Under $1000 ›</a></button>
     </div>

        </div>
      </div>
  </div>

Alireza HI Alireza HI · Accepted Answer · 2020-03-03T08:05:50

Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities: Bootstrap Flex

If the height of your content is fixed you can user flex display and do it like below:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="d-flex align-items-center justify-content-around p-2 bg-light" style="height: 100px">
        <div>
            <span class="border p-2">
                logo
            </span>
    </div>
        <div>
            <button class="btn btn-success">btn 1</button>
            <button class="btn btn-success">btn 2</button>
            <button class="btn btn-success">btn 3</button>
        </div>
    </div>
</body>
</html>

HOW:

d-flex will add flex display to your parent div.

By adding align-items-center your child divs will be centered on your second axis(which here is vertical). It only works if the height of your parent div is obvious.

Vertically Centre Div inside another div bootstrap-4

2 Answers