Bootstrap Layout Nesting?

Question

I'm fairly new to bootstrap and having trouble with nesting. I've got a layout that I'm trying to recreate and not getting the correct result seen here layout image.

My code http://www.bootply.com/0BETlZMU7T

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">image with image text here</div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">A Text</div>
            <div class="col-md-6">B Text</div>
        </div>
        <div class="row">
            <div class="col-md-6">Y Text</div>
            <div class="col-md-6">Z Text</div>
        </div>
    </div>
  </div>
</div>`

can you describe what's actually not working with the code example? — Aaron Vanston, Dec 09 '16 at 04:55

score 0 · Accepted Answer · edited May 23 '17 at 11:45

vertical align isn't possible with default bootstrap, but you can achive it with code showed in this solution vertical-align with Bootstrap 3

Your updatetd html would look like the following:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">image with image text here</div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-6">A Text</div>
                <div class="col-md-6">B Text</div>
            </div>
            <div class="row">
                <div class="col-md-6">Y Text</div>
                <div class="col-md-6">Z Text</div>
            </div>
        </div>
    </div>
</div>

And your CSS like:

/*From: 
  https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3#answer-25517025
*/
.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;
  justify-content: center; /* Optional, to align inner items 
                              horizontally inside the column */
}

/**
 *  "flex: 1" or "flex-grow: 1" is added to make the inner div
 *  - Which is also a flex-item - take up all the horizontal space
 *  available space inside the flex container (.col-* elements)
 */
.vertical-align > [class^="col-"] > div,
.vertical-align > [class*=" col-"] > div {
  /* flex: 1; */
  flex-grow: 1;
}

I made you an example with your code and I merged the Items "A,B,X,Y" into one row, because you don't need this second row.

http://www.bootply.com/uIVbiDLGkj

Bootstrap Layout Nesting?

1 Answers1