What is causing the col divs to stack instead of aligning next to each other?

I am a newcomer to Vue.JS and front-end programming in general. I wanted to create a page with a fixed sidebar and content below a navbar. Here is the configuration I tried:

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-12">.col-md-12</div>
    </div>
  </div>
</template>

I attempted to put my sidebar content in the .col-md-6 div, but they are being displayed stacked on top of each other instead of side by side.

App screenshot here

javascriptvue.jsbootstrap-4containerssidebar

Answer №1

In order for them to be displayed next to each other, ensure that the second div has a class of col-md-6. If the total number of columns exceeds 12, they will not align in a single row.

Answer №2

It's not recommended to mix col-md-6 and col-md-12 in the same layout. You may want to familiarize yourself with how the bootstrap grid system works.

Consider using col-md-3 for a sidebar and col-md-9 for the main content section instead.

Answer №3

When using Bootstrap, a row is divided into 12 columns that can be allocated among child elements. In a scenario where you have one `div` with classes `col-md-6` and `col-md-12`, they will not fit on the same row as there isn't enough space. However, dividing the columns equally will allow both elements to be on the same row.

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
  </div>
</template>

It's important to note that each child element's proportion of columns will determine the space it occupies in the row. If you want one element to be larger than the other, allocating fractions of the columns can achieve this effect. For example:

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-8">.col-md-8</div>
    </div>
  </div>
</template>

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

Adding external stylesheets or libraries in Express is a simple process that can greatly

Currently, I am in the process of developing a todo application using the express framework on a node server. The starting point for my application is an index.ejs file located in the same folder as my jquery.min.js file. However, when I attempt to include ...

javascripthtmlnode.jsexpress

Alter the Header/Navigation to switch colors depending on the section of the website currently being viewed

I'm currently revamping my personal portfolio website and had an idea for a cool feature. I want the header/navigation bar to change color based on which section of the webpage it's in (the site is one page only). My initial thought was to add o ...

javascriptjqueryhtmlcss

Troubleshooting issue: Next.js Material-ui CSS SSR not functioning properly within components

Upon completing my project, I discovered that SSR for Material-ui is not functioning on the page where I utilized functional components. Here is my _document.js file: [Code from _document.js] Example Page: [Code from E ...

javascriptreactjsmaterial-uinext.jsserver-side-rendering

creating dynamic lists in angular.js

Could you please guide me on creating a dynamic list in Angular.js? I have successfully implemented a feature where users can add items to the list by clicking a button and filling out the required fields. To see this in action, check out this fiddle: http ...

javascriptjqueryangularjs

Challenges in achieving seamless interaction between Javascript Form and Ajax for logging in to a Secure Magento Store

My Webdeveloper abandoned me and my form doesn't seem to work always. When clicked it doesn't appear to do anything (just shows the "javascript:;" href on the browser status bar), but sometimes it works... I've searched everywhere for a so ...

javascripthtmlajaxmagento

AngularJS does not allow data to be deleted in mongodb

Backend code: var User = require("./models/user"); var express = require('express'), app = express(), Account = require("./models/account"), mongoose = require('mongoose'), passport = require("passport"), basicAuth = require('basi ...

javascriptangularjsmongodb

Creating a platform for users to share their thoughts and engage in

A friend and I are working on creating a commenting system for our website. We have written some code to insert values into a mysql database so that they can be read and displayed as comments later on. Unfortunately, we are facing an issue where the data i ...

phpjavascriptajaxformscomments

Ways to customize the datetime-local format in an HTML input field

When dealing with the HTML input of datetime type, consider the following: Datefield: <input type="datetime-local" data-date="" data-date-format="DD MMMM YYYY, h:mm:ss"> The script below includes important code. $("input").val(moment().format(&apo ...

javascriptjqueryhtmlcssdatetime

Consolidate radio group in Vuetify platform

I'm having trouble centering the v-radio-group. Here's my current setup: <v-container grid-list-md text-xs-center> <v-form ref="form"> <div v-if="question.question_type == 'YESNO' "> <v-radio-group ...

javascriptcssvue.jsvuejs2vuetify.js

The issue with the callback function not being triggered within a self-repeating loop

As I work on creating a user-script to incorporate a trailer video into a website, I encountered an issue with the callback function in my script. The goal is to filter the real source of the video from different URL formats, but for some reason, the callb ...

javascript

Vue plugins that emit events

In the scenario where I have a basic Vue plugin that does not contain any components, but simply provides some methods to the user: export default { install(Vue, options) { // Unrelated tasks go here. } Vue.prototype.$foo = () => { ...

javascriptvue.js

Utilizing $stateParams within a personalized ui-router configuration attribute

Attempting to retrieve data from $stateParams within a custom ui-router state configuration property results in an empty object being logged. This outcome is anticipated given that I am straying from the standard ui-router configuration. Despite this devi ...

javascriptangularjsangular-ui-router

Transforming form inputs into JSON structure

<form name = 'test' > <input type='text' name = 'login'> <input type='email' name = 'email'> </form> When I try to convert the form data using JSON.serialize($(form)).serial ...

javascriptjqueryjson

What is the best way to iterate through a JSON object and display its values?

When I receive JSON data from an API, it looks like this: callback({"Message":"","Names”:[{“id”:”16359506819","Status":"0000000002","IsCurrent":true,"Name":"JAKE"," ...

jsonvue.jsaxios

Mobile Chrome allows users to utilize the IFrame player API for enhanced video

Currently, I am working on creating a mobile website where I plan to include some YouTube videos using the IFrame player API (https://developers.google.com/youtube/iframe_api_reference). My main goal is to have the video start playing only after the user ...

javascripthtmlgoogle-chromemobileyoutube

Increase the size of a centered image within a table

Lately, I've felt like my mind is starting to unravel. Here's the issue at hand: I've been attempting to resize an image within a table cell so that it spans the full width of the cell. Strangely enough, this seems to be harder than anticip ...

javascriptjqueryhtmlcss

How can we prevent the modal from extending beyond the boundaries of the phone screen when zoomed in

I am currently developing a web application that features a large content page, specifically a map which should display detailed information upon zooming in similar to Google Maps. The interactive elements on my map are clickable, triggering a modal popup ...

javascriptcssangularjstwitter-bootstrapbootstrap-modal

Designing a layout for a chat application that is structured from the bottom up

I'm currently in the process of designing a web application for a chat platform. I have access to an API that provides a list of messages: chatsite.com/api/thread/1/messages/ [ { "id": 2, "sender": { "id": 2, ...

javascripthtmlcssvue.jsflexbox

Challenges with Scaling HTML5 Video onto Canvas

Attempting to extract a frame from an html5 video to generate a thumbnail, but encountering peculiar outcomes when the image is rendered onto canvas. The issue lies in the fact that the canvas displays only a greatly magnified portion of the video! Refer ...

javascriptjqueryhtml5-canvashtml5-video

Connect-busboy: The file being piped to the write stream is either empty or incorrect, depending on its type

My current project involves testing a file upload feature using connect-busboy. Interestingly, I have encountered a peculiar issue when uploading PNG files - although the file gets uploaded, the content seems to be incorrect and unable to open. Upon furthe ...

javascripthtmlnode.jsexpressbusboy