Why do the col divs stack instead of aligning aside?

user_10436627 0
Viewed 26

I'm new to Vue.JS and new to front-end programming more in general. I was trying to set a page with a fixed sidebar and a content page, which is to rendered below a navbar. I tried using this configuration:

<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>

To place my sidebar content in the .col-md-6 div, but they're being rendered stacked instead of being aside.

Screenshot of app

bootstrap-4 vue.js sidebar containers javascript
3 Answers

They will not show up side by side unless you make the second div of class col-md-6. If there are more than 12 columns, they will not appear in one row.

user_103812910

I don't think you can use col-md-6 and col-md-12 together You should try and understand the bootstrap grid system.

For a sidebar, you can try using col-md-3 and col-md-9.

user_89700020

Bootstrap operates on a row having 12 columns that you can divide among the child elements, so in your case where you have one div with a col-md-6 and a col-md-12 you will not have enough room for both on one row, but if you divide those 12 columns equally you will have both 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>

Another thing, the proportion that each child element has of the columns will be equal to the amount of the row that they take up so in the case of above they will share the same amount but you may want one to be larger than the other so you could allocate 1/3 of the columns to one container and 2/3 of the columns to the other. As in the example below

<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>
user_74966630
Related