bootstrap - align nested row vertically within alert-box

Question

I'm not sure if my issue is the nested row, but I can't get the inner row vertical aligned centered within it's alert-box. Anyone any hint what I'm doing wrong?

https://jsfiddle.net/d2pg4xta/

<div class="container-fluid">
  <div class="row"> 
    <div class="col-md-6 d-flex">
      <div class="alert alert-dark">
        <div class="row"> <!-- here is my nested row -->
          <div class="col-md-6"><p class="mb-0">1:</p></div>
          <div class="col-md-6"><p class="mb-0">A</p></div>
          <div class="col-md-6"><p class="mb-0">2:</p></div>
          <div class="col-md-6"><p class="mb-0">B</p></div>
          <div class="col-md-6"><p class="mb-0">3:</p></div>
          <div class="col-md-6"><p class="mb-0">C</p></div>
          <div class="col-md-6"><p class="mb-0">4:</p></div>
          <div class="col-md-6"><p class="mb-0">D</p></div>
        </div>
      </div>
    </div>
    <div class="col-md-6 d-flex">
      <div class="alert alert-dark text-center">
        <p>Lorem ipsum ...Lorem ipsum ...</p>
        <p>Lorem ipsum ...Lorem ipsum ...</p>
        <p>Lorem ipsum ...Lorem ipsum ...</p>
        <p>Lorem ipsum ...Lorem ipsum ...</p>
      </div>
    </div>
  </div>
</div>

Update: It's not about aligning the 2 alert-boxes, it's about the inside of my left alert-box. I expect the inside row containing the content (abcd1234) to be more centered withing it's own alert-box like this: https://ibb.co/myntK5j

@Yaerox Thats how its looks like already in your fiddle ? whats you final expected out — Always Helping, Aug 24 '20 at 08:18
@AlwaysHelping I don't think so. For me my jsfiddle isn't centered. https://ibb.co/Qpw6Q5y there are 2 red lines. I want this vertical-centered withing the alert-box it is inside. — Yaerox, Aug 24 '20 at 08:22
I think the inside (1234ABCD) should be more like: https://ibb.co/myntK5j — Yaerox, Aug 24 '20 at 08:24

score 1 · Accepted Answer · answered Aug 24 '20 at 08:21

1

Do this:

.alert-dark {
    display: flex;      /*add*/
    flex-direction: column;     /*add*/
    align-items: center;     /*add*/

    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca;
}

answered Aug 24 '20 at 08:21

s.kuznetsov

14,870
3
10
25

this doesn't seem to change anything to me. I already use d-flex to align the 2 alert-boxes vertically aligned within the outer-row. Maybe that's an issue? – Yaerox Aug 24 '20 at 08:26
the weird thing is that on the link you gave it works – s.kuznetsov Aug 24 '20 at 08:27
it's not about aligning the 2 alert-boxes, it's about the inside of alert-box left: https://ibb.co/myntK5j I expect the (1234ABCD) more centered like the red marked square – Yaerox Aug 24 '20 at 08:28
the flex rules that I wrote above in my answer just center the contents of the left and right blocks, but only here https://jsfiddle.net/d2pg4xta/ – s.kuznetsov Aug 24 '20 at 08:30
In the very first comment, you will see my screenshot. This is the result of the code, which in my example – s.kuznetsov Aug 24 '20 at 08:31
Sorry for this circumstances, when I tried it it first it didn't changed anything. Now it works on my jsfiddle as well. Maybe cache or something hitted on me or I was just not paying attention enough. Thank you sir! – Yaerox Aug 24 '20 at 08:36
Is it possible to get some more information how your solution works? I played around with `d-flex` and `align-items-center` but I couldn't get it to work. I added those classes on my inner row where nothing changed. – Yaerox Aug 24 '20 at 08:37
Always happy to help. Please tell me, are the same plugins connected on your production site as in `https://jsfiddle.net/d2pg4xta/`? – s.kuznetsov Aug 24 '20 at 08:47
I'm using: `bootstrap.min.css jquery-3.4.1.min.js popper-1.14.7.min.js bootstrap.min.js` bootstrap is version 4.3.1 – Yaerox Aug 24 '20 at 08:56
1

Strange then ... My solution works as follows: The flex display makes the block rubber, the flex-direction: column adjusts the height, and the aling-items: center aligns to the center. Please add the fourth parameter to my solution - justify-content: center (because flex-direction: column is registered). This is for absolute centering of your inner content. And the main thing! Try adding `!important` after each rule in my solution. It should work! – s.kuznetsov Aug 24 '20 at 09:05

score 1 · Answer 2 · answered Aug 24 '20 at 08:33

You need to use flex on .alert-box and remove margin from .row

Js fiddle: https://jsfiddle.net/zbywdacp/

Live Demo:

.row {
  background: #f8f9fa;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.alert-dark {
  display: flex;
  align-items: center;
  justify-content: center;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 d-flex">
      <div class="alert alert-dark">
        <div class="row m-0">
          <div class="col-md-6">
            <p class="mb-0">1:</p>
          </div>
          <div class="col-md-6">
            <p class="mb-0">A</p>
          </div>
          <div class="col-md-6">
            <p class="mb-0">2:</p>
          </div>
          <div class="col-md-6">
            <p class="mb-0">B</p>
          </div>
          <div class="col-md-6">
            <p class="mb-0">3:</p>
          </div>
          <div class="col-md-6">
            <p class="mb-0">C</p>
          </div>
          <div class="col-md-6">
            <p class="mb-0">4:</p>
          </div>
          <div class="col-md-6">
            <p class="mb-0">D</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 d-flex">
      <div class="alert alert-dark text-center">
        <p>Lorem ipsum ...Lorem ipsum ...</p>
        <p>Lorem ipsum ...Lorem ipsum ...</p>
        <p>Lorem ipsum ...Lorem ipsum ...</p>
      </div>
    </div>
  </div>
</div>

This seems to work as fine as the answer of sergey kuznetsov. Any explanation hints why this works? I played around with d-flex and align-items-center but I couldn't get it to work. I added those classes on my inner row where nothing changed. — Yaerox, Aug 24 '20 at 08:44

score -1 · Answer 3 · answered Aug 24 '20 at 08:14

-1

Try adding display: flex; to .alert.alert-dark.

answered Aug 24 '20 at 08:14

jchiem

1
1

in my example this doesn't help. it screws the overall view. I'm not sure, maybe because I use d-flex on a parent element because I want both alert-boxes centered withing a row as well. – Yaerox Aug 24 '20 at 08:20

bootstrap - align nested row vertically within alert-box

3 Answers3