Bootstrap 12 column grid does not start on the left

Issue

I am currently using Bootstrap with Vue inside an App.vue file. When using Bootstrap, I realised that there is a lot of empty space on the left and right sides. I have attached an image below. I used the default code from the Grid System website.I have ensured that under my Vue styles, there is no code there besides the red outline. I am still slightly confused why my cols do not start from the left.

Could there possible be any other conflicting style properties in Vue that takes priority?

<template>
    <div class="container">
        <div class="row">
            <div class="col-sm">
                One of three columns
            </div>
            <div class="col-sm">
                One of three columns
            </div>
            <div class="col-sm">
                One of three columns
            </div>
    </div>
    </div>
</template>

Solution

the class container has max-width set by bootstrap at each major media query breakpoint. I suggest you to add a class named something like container_flexible to the container div and apply the following styles

container_flexible {
    width: 100%;
}

I don't know your specific case, but usually it is good to have a maximum width, so that the website won't strech itself out on big displays. If you want that, then you can add it in there too.

Answered By - Sandeep C. Nath