The left margin of the Bootstrap 12 column grid is not aligned correctly

Currently, I am utilizing Bootstrap in conjunction with Vue within an App.vue file. One issue I have encountered is the excessive empty space on both the left and right sides when using Bootstrap. An image has been provided below for reference. I followed the default code from the Grid System website and made sure that there were no conflicting styles under my Vue styles except for the red outline. It is perplexing to me why my columns are not aligning properly to the left. https://i.sstatic.net/yR9dF.png

Is it possible that there are other style properties in Vue that may be taking precedence?

<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>
cssvue.jsbootstrap-4

Answer №1

Within the bootstrap framework, the class container is equipped with a maximum width defined for each major breakpoint media query. To give your design more flexibility, consider creating a new class called container_flexible and implementing the following CSS styles:

.container_flexible {
    width: 100%;
}

While I'm not familiar with your specific requirements, it's generally recommended to set a maximum width to prevent overextension on larger screens. Feel free to include this adjustment in your styling as needed.

Answer №2

Consider using justify-content-start for the row div

<template>
    <div class="container">
        <div class="row justify-content-start">
            <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>

Tip: consider changing col-sm to col as needed

Answer №3

The absence of content in the class="container" is due to the Bootstrap styling. To fill this space, consider removing the container class and utilizing an external CSS file.

Answer №4

If you want to center text using Bootstrap, there is a specific class you can use after the "row" class.

<template>
<div class="container">
    <div class="row text-center">
        <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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Vue to properly reference asset paths for background URLs

I recently developed a Vue application and I am currently trying to display an image as a background in a div element. I have found that using the following code snippet accomplishes this: background: url('~../assets/my_image.png'); However, I a ...

vue.js

The feature of Google street view is not supported within the tabs on WordPress

I'm experiencing some issues with displaying Google maps and street view using the Wp Google Map WordPress plugin within tabs. The map displays perfectly on the first tab where I placed the short code for the map, but on the second tab where I placed ...

javascriptcsswordpressgoogle-mapsgoogle-maps-api-3

"Aligning content in Bootstrap with vertical centering

I am currently working on aligning a simple piece of code vertically. Check out the code on JS Fiddle: https://jsfiddle.net/3kj44net/ .container-fluid { padding-left: 20px; padding-right: 20px; } <link href="https://maxcdn.bootstrapcdn.com/boots ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to ensure a checkbox in VueJs is pre-selected when rendering?

UPDATE: My issue has taken a different turn, focusing on another code aspect. As a result, I have posted a new question. Within my Beufy Form Field Component, there is a Boolean Input Checkbox that allows users to select the option "Later," which in turn ...

vue.jsvuejs2vue-component

Tips on automatically centering an image within a div as it is resized

I'm currently working on a website that showcases cards featuring Discord users. Each card includes an avatar image within a div element, and when the user hovers over it, the image expands. However, I've noticed that as it expands, it shifts to ...

htmlcss

Add the onmouseover attribute to dynamically alter the text

I'm trying to add the onmouseover function to the image of Angelina Jolie in order to change the text above, which currently says "Your Daily Dose of Contrabang". What is the best way to achieve this? Thank you for your assistance. You can check out t ...

htmlcss

Tips for shutting down an open section within a jQuery Accordion?

I am having trouble closing the active panel using jQuery. The rest of my code is functioning perfectly, but for some reason, I can't get the active panel to close. Currently, the code is working correctly in that only one panel can be open at a time ...

javascriptjqueryhtmlcss

icomoon functions successfully on a localhost environment, however it is currently experiencing difficulties when uploaded to

Here is my folder structure: - index.php - css --> master.css - plugins --> icommon --> style.css In master.css, I am using @import url('../plugins/icomoon/style.css'); The Icomoon fonts are working fine on localhost but not on the ...

htmlcss

What is the best way to expand a footer's height to fill the remaining space on the screen?

Any idea how to achieve this look: Creating a footer that stretches to fill the remaining height of the screen at the bottom of the page. Can CSS make this happen? ...

htmlcsslayout

After removing an element from an array in Vue.js, how can we adjust its class to reflect the change?

Apologies for my lack of proficiency in English. I am eager to find a solution to resolve these issues. I am working on a todolist and encountering an issue where the class ('centerLine') continues to affect the next element after deleting an a ...

javascriptvue.jsvuejs2

What is the best way to position one div above another div?

I'm struggling to move the div containing the product name, amount, price, and total to the top of its parent div. Changing the position and vertical alignment properties have not been effective. I've attached a screenshot of the page where the b ...

htmlcssbootstrap-4

Tips for Accessing Values in a Dynamic Array in Vue.js

ArrayOrdered :[ { name :"PRODUCT 1", price :"20", amount:"10", Total 1:" ", discount : "" , Total 2:" " }, { name :"PRODUCT 2", price :"50", amount:"20", Total 1:" ", discount : "" , Total 2:" " }, { name :"PRODUCT 3", price :"15.5", amount:"10", Total ...

javascriptvue.js

Why isn't my ng-click event working in Ionic/AngularJS?

I'm currently experimenting with Ionic/AngularJS, but I'm having trouble getting an alert window to appear. I began with a blank template in Ionic, and while the app launches in the browser window, nothing happens when the button is pressed. / ...

javascriptangularjshtmlcssionic-framework

The width of Highcharts items is not reaching 100% when displayed in a carousel

I'm currently using dynamic highcharts graphs within my bootstrap carousel. Here is a snippet of my carousel setup: <div class="carousel"> <div class="carousel-inner"> <div id="item"> <div id="container1" data-h ...

javascriptcsstwitter-bootstraphighchartscarousel

Creating custom folding icons for the Vue Treeselect Component: A step-by-step guide

I am currently working on a Vue TreeSelect component within my Nuxt application. However, I am facing an issue with customizing the folding icons in the Treeselect component: https://i.sstatic.net/46XvO.png Is there a way to achieve this? I attempted to ...

javascriptvue.jsvuejs2nuxt.jsvue-treeselect

Prevent event bubbling when clicking

I have a code snippet that I'm struggling with. <p>haha</p> <button class="btn btn-light" onclick="nextSibling.classList.toggle('d-none');"> <i class="fa fa-ellipsis-h"></i> </button> <div class= ...

javascripthtmlbootstrap-4event-bubbling

Working with VueJS v-for directive inside Laravel Blade template

Is there a way to create a list in Laravel (v7) Blade using VueJS v-for method? In home.blade.php: <template v-for="(item,index) in this.list"> <qm-item number="@{{index}}"></qm-item> </template> When checking the source code ...

laravelvue.js

Designing CSS outlines to create shapes

I want to design a unique navigation for my website without using images, so I thought using shapes would be a cool idea. Specifically, I am trying to create a crescent moon shape with a border. My goal is to have a border around the red part of the cres ...

htmlcsscss-shapes

using an SVG mask declared in HTML to apply masking

I've been experimenting with masking using an SVG shape that I created in the HTML content. I've tried various options: mask, -webkit-mask mask-image, -webkit-mask-image different MaskUnits and MaskContentUnits mask-type: luminance or not Desp ...

htmlcsssvgmask

Generating a table with two columns utilizing ng-repeat

I am currently dealing with an array of objects that I need to showcase in a two-column layout. The challenge arises because some columns have more data than others, requiring equi-height rows. Despite utilizing Bootstrap and clearfix in my attempts to di ...

angularjshtmltwitter-bootstrapcss