CODEWITHSUNDEEP
javascriptvue.jsbootstrap-4containerssidebar
Adam
Adam

Reputation: 70

Why do the col divs stack instead of aligning aside?

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

Upvotes: 1

Views: 43

Answers (3)

Adam M.
Adam M.

Reputation: 1193

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>

Upvotes: 1

Daniel Azubuine
Daniel Azubuine

Reputation: 25

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.

Upvotes: 1

web1connoisseur
web1connoisseur

Reputation: 106

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.

Upvotes: 1

Related Questions