CODEWITHSUNDEEP
csstwitter-bootstrapvue.jsbootstrap-vue
Graham Morby
Graham Morby

Reputation: 197

Bootstrap Vue Flex layout issue

Im trying to get a div to sit at the baseline of a container with 100vh on it using bootstrap vue, I have looked at the docs and implemented what they suggest but the div doesnt move.

<b-container fluid class="header bv-example-row bv-example-row-flex-cols">
      <b-row class="viewport-header" align-v="start">
        <b-col md="12" class="mt-5 text-center">
          <img src="../../image/logo-white.png" alt="" width="25%" />
          <h2
            class="text-white"
            style="text-decoration: underline; margin-top: 10px"
          >
            Friends Like This
          </h2>
          <h2 class="text-white">Out Now</h2>
        </b-col>
      </b-row>
      <b-row align-v="baseline">
        <b-col md="12" class="text-center">
          <h1>The New Single</h1>
          <b-dropdown id="dropdown-1" text="Listen Now" variant="success" class="m-md-2">
            <b-dropdown-item>First Action</b-dropdown-item>
            <b-dropdown-item>Second Action</b-dropdown-item>
            <b-dropdown-item>Third Action</b-dropdown-item>
            <b-dropdown-divider></b-dropdown-divider>
            <b-dropdown-item active>Active action</b-dropdown-item>
            <b-dropdown-item disabled>Disabled action</b-dropdown-item>
          </b-dropdown>
        </b-col>
      </b-row>
    </b-container>

So you can see I add the flex cols class to the container and then the baseline to the second row and its just sitting pretty at the top of the screen. For context I will supply the header class just incase i'm missing something

.header {
    background: url('../image/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
     -o-background-size: cover;
    background-size: cover;
    height: 100vh;
 }

Upvotes: 0

Views: 1258

Answers (1)

markcc
markcc

Reputation: 643

I am not very sure what you want to achieve. I guess you want to have a equal space in between row 1 and row 2. If it is, maybe you can add these to your header css.

.header {
    ...your css
    display: flex;
    flex-direction: column;
    justify-content: space-between;
 }

Upvotes: 1

Related Questions