Resolved - Boostrap Vertical Alignment

Question

Resolved - Boostrap Vertical Alignment

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

I'm doing a grid in boostrap, and I can not get it properly aligned vertically.

It should always look like this:

*-------------*     *--------------*    *--------------*
| card grande |     | card Pequeno |    | card Pequeno |
*-------------*     *--------------*    *--------------*
|             |     |     dois     |    |     quatro   |
|             |     *--------------*    *--------------*
|     UM      |
|             |
|             |
|             |
|             |  
|             |     *--------------*    *--------------*
|             |     | card Pequeno |    | card Pequeno |
|             |     *--------------*    *--------------*
|             |     |     tres     |    |     cinco    |
*-------------*     *--------------*    *--------------*

See that cards three and five should be aligned with the base of card one, but they are going like this:

*-------------*     *--------------*    *--------------*
| card grande |     | card Pequeno |    | card Pequeno |
*-------------*     *--------------*    *--------------*
|             |     |     dois     |    |     quatro   |
|             |     *--------------*    *--------------*
|     UM      |  
|             |     *--------------*    *--------------*
|             |     | card Pequeno |    | card Pequeno |
|             |     *--------------*    *--------------*
|             |     |     tres     |    |     cinco    |
|             |     *--------------*    *--------------*
|             |
|             | 
|             |
*-------------*

As the card three and five, just below the two and four.

Here is an example of how I am doing now

twitter-bootstrap

asked by anonymous 06.11.2018 / 13:55

2 answers

2

A suggestion:

<div class="container bottom-align-div">
      <div class="row">
        <div class="col-6">
            d
        </div>
        <div class="col-6">
            e
        </div>
    </div>
  </div>

CSS:

.bottom-align-div {
  position: absolute;
  bottom: 0;
  }

FIDDLE: link

06.11.2018 / 14:21

Print sales document through the engines for a specific printer (V9.15) Replace string with regex in python 3

score 3 · Accepted Answer

Dude does not even need CSS in addition to native Bootstrap classes. You can use the Flex classes of the framework to adjust this. See here link

Notice that you first need to put .row with 100% height of the parent, so use the class h-100 , then you align the children of the bottom with align-self-end so they stay in the col

See how it goes

    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

    <div class="row">

        <div class="col-6">
            a
            <br />

            <br />
            <br />
            <br />
            <br />
            <br />
            final
        </div>

        <div class="col-6">
            <div class="row h-100">
                <div class="col-6">
                    b
                </div>

                <div class="col-6">
                    c
                </div>

                <div class="col-6 align-self-end">
                    d
                </div>

                <div class="col-6 align-self-end">
                    e
                </div>
            </div>
        </div>

    </div>

Code Running.