Boostrap Vertical Alignment

Asked

Viewed 81 times

2

I’m doing a grid on boostrap, and I can’t get it properly aligned vertically.

It should always stay that way: 

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

Note that cards three and five should be aligned with the base of card one, but they are becoming so: 

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

as card tres and five, just below two and four.

Here’s an example of how I’m doing it now

twitter-bootstrap

2 answers

3


Guy doesn’t even need CSS beyond the native Bootstrap classes. You can use the classes Flex of framework to adjust this. See here https://getbootstrap.com/docs/4.1/utilities/flex/

Notice that first you need to put the .row 100% father height, so use the class h-100, then you line up the kids from the bottom with align-self-end for them to stay at the base of the col

See how it looks

    <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 Funcioando.

  • 1

    It worked perfectly. I will mark as answered.

  • @Alexandrequeiroz legal that worked there. The good practice since you are using the Framework is that you really use its native classes, avoid ways with custom CSS, because this can bring you problems in the future, especially with the grid and the responsiveness... Good luck there!

  • @Alexandrequeiroz If my answer helped you in any way consider mark it as accepted in this ✔ ai on the left side near the arrows. Just click on it and the question is marked as solved and answered accepted :)

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: https://jsfiddle.net/x0ko7tmq/

  • Here did not work your code, the position : Absolut; breaks the column system.

  • I put it in the fiddle. The piece Voce posted to me worked... will q another part of your code is being affected or interfering?

  • it was not I who asked the question hahah, but I did a test here and did not give, I will try again

  • I found the difference of your code to mine, is that you put the container class. it worked.

  • hahahah was badly not seen that was not the author ;)

  • works partially, when Voce have several columns Position Absolute ends up giving problems.

Show 1 more comment

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.