Fill the page entirely with background color

Question

How can I extend the color green up to bottom? And how can I move the CRUD in left too

So as you can see it can't fill the page entirely.

Here's my code in VueJS

    <template>
    <div class="container-fluid">
        <h1>CRUD</h1>
        <div class="my-form col-xs-1">
            <b-card class="box">
                <b-form-group id="input-group-1">
                    <b-form-input
                            id="input-1"
                            required
                            placeholder="Username"
                    ></b-form-input>
                </b-form-group>
                <b-form-group id="input-group-2">
                    <b-form-input
                            id="input-2"
                            type="password"
                            required
                            placeholder="Password"
                    ></b-form-input>
                </b-form-group>
                <div class="btn">
                    <b-button variant="primary" >Login</b-button>
                    <b-button variant="success" @click="$router.push('/register')">Register</b-button>
                </div>
            </b-card>
        </div>

    </div>
</template>

<script>
    export default {}
</script>

<style scoped>
    .container-fluid {
        background-color: green;
        height: 100%;
    }

    .my-form {
        display: block;
        margin-top: 120px;
        margin-bottom: 120px;
    }

    .box {
        padding: 10px;
        margin-bottom: 20px;
    }

    .btn {
        margin: 5px;
    }
</style>

What is my mistake with this? I tried using flex a while ago but didn't understand why it always fits the content to itself.

By the way sorry for my bad English.

THanks

try `height:100vh;` instead of `height: 100%;` and style your `h1` with `text-align: left` , here is a jsfiddle with those two changes: https://jsfiddle.net/rwone/520g1Ldo - edit: i haven't looked into bootstrap vue, but it may already have classes available for `100vh` etc. this answer mentions something like that in bootstrap 4, ie a `h-100` class: https://stackoverflow.com/a/44985360 , also see: https://getbootstrap.com/docs/4.0/utilities/sizing — user1063287, Aug 11 '19 at 09:57
excellent, also i just saw this: https://getbootstrap.com/docs/4.3/utilities/sizing/#relative-to-the-viewport , the class representing `100vh` in that version of bootstrap seems to be `vh-100`. — user1063287, Aug 11 '19 at 13:15

score 0 · Answer 1 · answered Aug 11 '19 at 09:58

0

just write in your body tag it will solve your problem

bgcolor="green"

answered Aug 11 '19 at 09:58

Engineering Projects

80
1
8

score 0 · Answer 2 · answered Aug 12 '19 at 17:10

Use CSS to get the background color changed, and ensure the body (document) is at least 100% of the viewport height :

body {
  background-color: green;
  min-height: 100vh;
}

To align "CRUD" to the left, use the Bootstrap utility class "text-left":

<h1 class="text-left">CRUD</h1>

https://getbootstrap.com/docs/4.3/utilities/text/

https://bootstrap-vue.js.org/docs/reference/utility-classes

Fill the page entirely with background color

2 Answers2