0

First question on here.

I am working on learning bootstrap. Laying out content using the grid has been painful for me. With straight CSS, I feel I could lay out these things very quickly. I am starting to think that my difficulty understanding why I am having an issue is due to some deep misunderstanding of what is going on behind the scenes.

The details: I am trying to make this layout as a test. I am currently stalled on getting the content inside the left column centered

mockup

I have spent a few hours trying different approaches. Generally I have been trying to use a container with nested flex elements. However, with the nested flex elements, the align-items-center seems to stop working.

Here is the most recent code and what it produces:

Where I am at

.eh-height-nav {
  background-color: blueviolet;
  height: 150px;
}

.eh-intro-height0 {
  background-color: rgb(173, 134, 209);
  height: 100vh;
  color: rgb(255, 255, 255);
}

.eh-intro {
  width: 100%;
  height: 90vh;
}

.eh-intro-img {
  background-color: rgb(34, 10, 10);
  height: 300px;
  width: 300px;
  color: blanchedalmond;
}

.eh-intro-columns {
  width: 100%
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<div class="container-fluid eh-intro-height0 d-flex align-items-center ">
  <div class="d-flex eh-intro-columns justify-items-center align-items-center">
    <div class="eh-intro border mx-4 ">
      <div class="">
        <div class="col ">
          <div class="eh-intro-img"></div>
        </div>
      </div>
    </div>
    <div class="eh-intro border mx-4">
      Content Img
    </div>
  </div>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
SwimLeft
  • 9
  • 2
  • Flex alignment doesn't propagate beyond child elements. You've applied the right classes, but then you've layered in more div elements between them and the content you intended to center. I'd strip some of that out and see what's breaking things. Work outside in. – isherwood Aug 27 '21 at 20:29

2 Answers2

0

I'm not familiar with bootstrap so i apologize if this isn't the solution but trying to help - I added display: flex to your eh-intro class and then set your margin on eh-intro-img to margin: auto. It centers to how your picture shows. It doesn't scale great due to the set WxH though. You might want to click 'full page' for the snippet.

.eh-height-nav {
  background-color: blueviolet;
  height: 150px;
}

.eh-intro-height0 {
  background-color: rgb(173, 134, 209);
  height: 100vh;
  color: rgb(255, 255, 255);
}

.eh-intro {
  width: 100%;
  height: 90vh;
  display: flex;
}

.eh-intro-img {
  margin: auto;
  background-color: rgb(34, 10, 10);
  height: 300px;
  width: 300px;
  color: blanchedalmond;
}

.eh-intro-columns {
  width: 100%
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">    
    
    <div class="container-fluid eh-intro-height0 d-flex align-items-center ">
      <div class="d-flex eh-intro-columns justify-items-center align-items-center">
        <div class="eh-intro border mx-4 ">
              <div class="eh-intro-img"></div>
        </div>
        <div class="eh-intro border mx-4">
          Content Img
        </div>
      </div>
    </div>
Brandon
  • 374
  • 2
  • 15
0

Following what you said, I added some backgrounds and tried to simplify enter image description here

I remain confused about the behavior of the "align-items-center" class on line 16. On like 13 this class aligns the children elements with a "col" to the vertical center of the parent.

*moreover, I thought the default behavior of a child of a element with a "d-flex" class should grow to its parents height

SwimLeft
  • 9
  • 2
  • I added a class to the d-flex div on line 16 that added "height:100%" this let to the d-flex filling the parent div. This seems like a hack and further makes me think I am majorly misunderstanding things. – SwimLeft Aug 27 '21 at 20:52