Bootstrap 12 column grid does not start on the left-CodePudding

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 >
        <div >
            <div >
                One of three columns
            </div>
            <div >
                One of three columns
            </div>
            <div >
                One of three columns
            </div>
    </div>
    </div>
</template>

CodePudding user response：

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.

CodePudding user response：

Try giving justify-content-start to the row div

<template>
    <div >
        <div >
            <div >
                One of three columns
            </div>
            <div >
                One of three columns
            </div>
            <div >
                One of three columns
            </div>
    </div>
    </div>
</template>

Suggestion: replace col-sm to col if necessary

CodePudding user response：

That empty space get in bootstrap class.you can remove container class and use external css

CodePudding user response：

there is a class in bootstrap that center the text, you can use it after "row" calss

<template>
<div >
    <div >
        <div >
            One of three columns
        </div>
        <div >
            One of three columns
        </div>
        <div >
            One of three columns
        </div>
</div>
</div>